7 ferramentas gratuitas para testar layouts responsivos
Cada site deve ser projetado com uma abordagem responsiva. Para mantê-lo no caminho certo, testando com antecedência e com frequência, com qualquer uma dessas ferramentas de teste responsivas, você garantirá que seu design fique bem em todos os navegadores e em todos os tamanhos de viewport.
Todo site moderno precisa um design responsivo . Isso exige mais esforço, mas o resultado final vale a pena.
Na verdade, eu recomendo testar suas ideias com ferramentas de design responsivas para ver como seu site fica em cada estágio. Você pode procurar problemas de usabilidade em diferentes tamanhos de tela, tudo a partir de uma ferramenta útil.
E essas ferramentas gratuitas são minhas principais escolhas para testes responsivos, já que são super fáceis de usar. O melhor de tudo é o suporte a vários tamanhos de dispositivos para que você possa ter uma boa noção de como seu layout deve ficar de smartphones para desktops.
1. XRespond
o Aplicativo XRespond chama-se um "laboratório de dispositivos virtuais" e eu diria que é bem possível.
Com este site, você pode visualizar a aparência de qualquer site em vários dispositivos. O site funciona em um estilo horizontal longo, no qual você precisa rolar para os lados para ver todos os formatos de tela.
O rótulo acima de cada tela informa o tamanho exato e o dispositivo ao qual ele corresponde. Além disso, no menu suspenso, há uma ampla seleção de smartphones, tablets e laptops para testar dispositivos específicos.
Essa lista suspensa suporta até mesmo uma configuração personalizada de largura / altura se você quiser ver como seu site aparece em monitores específicos. Uma excelente ferramenta de teste para design responsivo e suporta muita variedade em estilos de dispositivos.
2. Responsinador
Um aplicativo semelhante que você também pode gostar é Responsinador .
Em vez de usar uma barra de rolagem horizontal, este site lista cada visualização de dispositivo em uma coluna vertical. Dessa forma, você pode percorrer cada dispositivo e visualizar o site em cada um deles.
Os dispositivos incluem os iPhones mais comuns e os dispositivos Android Nexus, ambos com visualizações de retrato e paisagem. Você também encontrará previews do dispositivo iPad também em retrato e paisagem.
Outro recurso interessante é a troca entre HTTP e HTTPS. O Responsinador oferece os dois tipos de visualização de sites, dependendo do URL inserido. Ele corresponderá automaticamente ao site que você está visualizando para evitar erros de SSL.
3. Verificador de Design Responsivo
Precisa verificar rapidamente se um site é realmente responsivo? Então tente usar isso Verificador de Design Responsivo feito especificamente para tamanhos de tela personalizados.
Depois de inserir um URL, você tem controle total sobre o espaço de teste responsivo. Você pode alterar a largura / altura da maneira que quiser e até mesmo usá-la para corresponder a certas proporções de tela se usar ferramenta de proporção .
Na barra lateral, você encontrará vários tamanhos de tela predefinidos para dispositivos comuns, como tablets Nexus, Kindles e até telefones mais novos, como o Google Pixel.
O site também suporta grandes tamanhos de tela com monitores de desktop de até 24 ″ de largura . Surpreendentemente, esses tamanhos grandes funcionam bem, mesmo em monitores pequenos, porque o painel de visualização é redimensionado com base na proporção e não na largura total de pixels.
Então, se você está lutando para testar os monitores 1920px em sua tela menor do MacBook, esta ferramenta vale a pena ser marcada.
4. Google Mobile Test
O Google está cheio de ótimas ferramentas para webmasters e seus Teste de compatibilidade com dispositivos móveis é um exemplo disso.
Esta ferramenta de teste não é realmente um pré-visualizador e não ajuda você a identificar erros de interface do usuário. Em vez disso, é uma ferramenta móvel dedicada para identificar problemas em seu site no celular.
Depois que o teste for executado, você será aprovado ou reprovado como um site otimizado para celular. Isso é um pouco genérico demais para os designers, mas o Google oferece dicas baseadas em áreas problemáticas e elementos de página que poderiam ser melhorados.
Mantenha isso salvo como uma ferramenta de teste móvel confiável. Não é um recurso completo para testes responsivos, mas é um ótimo local para coletar informações, e talvez venha da empresa mais autoritária da Web.
5. Ferramenta Responsiva de Matt Kersley
Designer e desenvolvedor Matt Kersley libertou o seu próprio livre ferramenta de teste para layouts responsivos. Este é muito mais simples que os outros e não tem muitos detalhes.
Em vez disso, é um pré-visualizador de site em linha simples com 5 larguras fixas: 240px, 320px, 480px, 768px, 1024px.
Os painéis de visualização apresentam barras de rolagem para que você possa percorrer o conteúdo sem esforço. No entanto, você não pode clicar em nenhum link ou navegar por outras páginas dentro dos painéis, portanto, isso é realmente melhor para testar páginas singulares.
Mas para uma ferramenta simples que executa o trabalho, isso funciona muito bem e é uma das poucas ferramentas de teste que oferece uma largura de 240px por padrão.
6. Sou responsivo?
Você provavelmente não precisará desta ferramenta se estiver procurando uma precisão perfeita.
Em vez disso, Eu sou responsivo? O website funciona melhor para verificações e visualizações rápidas em alguns tipos de dispositivos comuns.
Basta inserir um URL de website e ele será carregado em quatro painéis de visualização do dispositivo: um smartphone, tablet, laptop e desktop. Estes não são escaláveis, então você está apenas olhando para o site como uma proporção.
Mas isso é muito legal para capturar capturas de tela do seu site para mostrar como ele fica em vários dispositivos. A renderização é precisa para dimensionar e depende do seu navegador para renderização adequada.
Além disso, essa ferramenta permite que você execute endereços de host local para que você possa até mesmo verificar projetos que você está construindo localmente no seu computador.
7. Teste Responsivo Designmodo
Uma outra ferramenta que eu realmente gosto é a Testador Responsivo de Web Design criado por Designmodo. Esta ferramenta gratuita novamente permite que você visualize um site no seu navegador com base em certas larguras.
Mas a única adição legal a essa ferramenta é a configuração de página baseada em grade. Você pode verificar sua página em busca de pontos de pixel e até mesmo estudar a grade da página usando esta webapp.
Juntamente com as larguras de dispositivo predefinidas, você também pode arrastar o painel de visualização para caber em qualquer largura de tela que estiver testando. Ele tem entradas para a largura / altura se você precisar inserir tamanhos manualmente também.
Mas cada ícone de dispositivo no canto superior direito permite selecionar dezenas de tamanhos de tela comuns, tornando essa ferramenta perfeita para a verificação de qualquer dispositivo que você possa imaginar.
