Para facilitar a tarefa crucial de testar a capacidade de resposta do seu site, aqui estão alguns excelentes ferramentas on-line gratuitas para conferir.
Esta ferramenta de código aberto (o repositório está no GitHub caso você queira configurá-lo localmente) permite ver como uma página da web será renderizada em vários tamanhos de tela. Existem muitos dispositivos suportados pelo ResponsiveTest, como iPhone, Blackberry, telefones celulares Samsung, laptops Dell e muito mais.
O Responsinator pega uma URL e então gera uma sequência de modelos de dispositivos com a página da web renderizada neles para que você possa ter uma ideia de como o layout da página será experimentado por seus usuários em vários dispositivos.
Responsivo
Um recurso útil que esta ferramenta possui é que ela fornece atalhos de teclado (por exemplo, pressionar T mostrará a visualização do tablet). Isso é útil se você gosta de alternar rapidamente entre várias visualizações de dispositivos.
Esta é uma ferramenta Web simples para testar a capacidade de resposta de qualquer site. Além disso, a imagem de visualização renderizada pode ser um ótimo visual para suas apresentações, reuniões de design, etc.
Isso é útil bookmarklet simplesmente permite redimensionar seu navegador para uma dimensão específica, por exemplo, a dimensão de um iPhone 5, ou Amazon Kindle Fire, ou qualquer uma das 47 predefinições de tamanho de tela do Viewport Resizer.
Esta ferramenta permite redimensionar seu navegador com base em qualquer um dos 15 tamanhos padrão que correspondem a alguns dispositivos populares (MacBook, iPad, etc.). Você também pode definir suas próprias dimensões personalizadas e também informa qual é o tamanho atual da janela do navegador.
Assim como algumas das outras ferramentas desta lista, o Screenfly pega qualquer URL e fornece uma visualização da página da web em várias dimensões de tela predefinidas.
Designmodo tem sua própria ferramenta de teste de design responsivo que pode ser útil ao projetar ou depurar seus pontos de interrupção responsivos.
Assim como o Responsinator, esta ferramenta de teste de web design responsiva da pixeltuner.de permite que você insira um URL que é então renderizado dentro de vários modelos de dispositivos.
Responsivepx pode funcionar com seus arquivos locais. O que eu faria é apenas abrir seu documento HTML em seu navegador e copiar e colar o URI em Responsivepx. Isso é útil quando você está trabalhando em um projeto de design responsivo em seu computador.
Qual ferramenta você deve usar?
Muitas dessas ferramentas de teste de design responsivas funcionam praticamente da mesma maneira, portanto, escolher uma em vez de outra é apenas uma questão de preferência pessoal. Recomendo brincar com todos eles e depois escolher o que mais gosta. Qual é a sua ferramenta de teste de design responsiva favorita? Compartilhe e fale sobre isso nos comentários.
Leia também
Perguntas frequentes sobre ferramentas de teste de responsividade
1. O que é o Responsivo?
R: O Responsivo é uma ferramenta de código aberto que permite ver como uma página da web será renderizada em vários tamanhos de tela.
2. Como funciona o Responsinator?
R: O Responsinator pega uma URL e gera uma sequência de modelos de dispositivos com a página da web renderizada neles para que você possa ter uma ideia de como o layout será experimentado por seus usuários.
3. O que posso fazer com o Am I Responsive?
R: O Am I Responsive é uma ferramenta simples para testar a capacidade de resposta de qualquer site, e a imagem de visualização renderizada pode ser útil para apresentações e reuniões de design.
4. Qual é a funcionalidade do Viewport Resizer?
R: O Viewport Resizer é um bookmarklet simples que permite redimensionar seu navegador para uma dimensão específica, como a dimensão de um iPhone 5, Amazon Kindle Fire, entre outras.
5. O que o Screenfly oferece em termos de testes de responsividade?
R: O Screenfly pega qualquer URL e fornece uma visualização da página da web em várias dimensões de tela predefinidas, facilitando a visualização do design em diferentes dispositivos.
