Como testar designs responsivos

Testar seus designs web responsivos  é crucial porque a experiência do usuário em dispositivos móveis é bem diferente dos desktops. Mas o teste real em todos os dispositivos móveis do mercado não é prático para a maioria de nós. Portanto, uma técnica simples de teste de design responsivo que alguns de nós fazemos é redimensionar o tamanho da janela do nosso navegador para corresponder aos tamanhos da janela de visualização de smartphones e tablets.

Este é um truque rápido e sujo para testes visuais básicos e nos ajuda a identificar os principais problemas, mas é um retrato terrivelmente impreciso da experiência do dispositivo móvel. Os dispositivos móveis têm interações de toque exclusivas, como deslizar e pinçar para ampliar, e, da mesma forma, os desktops têm interações como passar o mouse e clicar com o botão direito do mouse. Projetos responsivos devem levar em conta essas variações.

Este tutorial discutirá um método eficaz e prático para depurar e testar seus designs responsivos . Envolve uma ferramenta que você provavelmente já possui: o Google Chrome. O DevTools do Google Chrome tem um recurso chamado modo de dispositivo que é carregado com ferramentas úteis para testar e depurar designs responsivos.

O modo de dispositivo é inédito. A maioria das outras ferramentas de teste de design responsivo simplesmente redimensiona sua janela de visualização, mas o modo de dispositivo na verdade emula a experiência do dispositivo móvel, particularmente as interações da tela sensível ao toque, como tocar e deslizar, diretamente no navegador da web. Aqui está um resumo dos principais recursos do modo de dispositivo:

  • Emulação de dispositivo móvel:  o modo de dispositivo tem modelos precisos para smartphones e tablets populares (por exemplo, iPhone, Galaxy, BlackBerry, Kindle, Nexus e muito mais) que simulam a aparência e o funcionamento de seus designs responsivos em telas sensíveis ao toque.
    Ele ainda falsifica a string UA para corresponder ao dispositivo específico que você está testando, para que você obtenha uma visualização de design muito precisa do seu trabalho.
  • Emulação de eventos de toque: esse recurso permite que você experimente seus designs como se estivesse interagindo com eles em seu smartphone ou tablet.
  • Inspetor de consultas de mídia: Este é um recurso ridiculamente útil que mostra todos os seus pontos de interrupção de consulta de mídia. Clicar em um ponto de interrupção redimensiona a visualização do seu design, para que você não precise mais redimensionar manualmente a janela do navegador.
  • Simulação de rede móvel: a conectividade de internet móvel é diferente da conexão de banda larga de alta velocidade da nossa máquina. Além disso, muitas partes do mundo ainda não têm acesso a tecnologias de internet móvel mais rápidas, como LTE. O modo de dispositivo pode mostrar o desempenho de seus projetos em EDGE, 3G, LTE, DSL e WiFi para ajudá-lo a identificar possíveis problemas de desempenho na web .

Para começar a usar o modo de dispositivo, abra seu design da web no Google Chrome.

Em seguida, abra as Ferramentas do desenvolvedor clicando no menu do Chrome e escolhendo Mais ferramentas > Ferramentas do desenvolvedor . O atalho de teclado para abrir as Ferramentas do desenvolvedor é Ctrl+Shift+I (Win) ou Option+Command+I (Mac).

Agora você deve ver o painel Chrome Developer Tools (abreviado como DevTools a partir de agora) na parte inferior ou à direita da janela de visualização do seu navegador.

Clique no ícone do modo de dispositivo (é um botão super pequeno que se parece com um smartphone) para ativar e desativar o modo de dispositivo.

Quando o modo de dispositivo estiver ativado, você verá algo como na imagem abaixo e o ícone do smartphone ficará azul.

Teste de design responsivo em um dispositivo móvel específico

Use o painel Dispositivo para emular a experiência de um dispositivo móvel específico. Isso permitirá que você teste visualmente seu design no dispositivo móvel, bem como teste interações semelhantes ao toque.

Digamos que gostaríamos de ver como nosso design responsivo se parece e funciona em um iPhone 5. Tudo o que precisamos fazer é selecionar esse dispositivo na lista suspensa <Selecionar modelo>: O modo de dispositivo alterará a visualização do design para que você estamos vendo o que um usuário do iPhone 5 pode ver. Além do mais, se você notar, o cursor do mouse agora é um círculo. Ao mover o mouse para cima e para baixo, a visualização do design rolará para cima e para baixo, simulando o comportamento da interação com o dedo.

Mover o cursor sobre um link não funcionará como se você estivesse passando o mouse sobre ele (porque não há foco nas telas sensíveis ao toque).