A maior parte do tráfego de qualquer site hoje vem do celular. Mesmo assim, é comum encontrar sites que carregam rápido, tiram nota boa em teste de velocidade, e ainda assim afastam quem visita pelo celular. Velocidade e usabilidade são coisas diferentes, e um site pode ter uma sem ter a outra.
Os problemas mais comuns de responsividade
Texto pequeno demais pra ler sem zoom
Design pensado só pra tela de computador, com fonte que fica minúscula quando o site simplesmente encolhe pra caber no celular, sem reorganizar o conteúdo de verdade.
✓ Defina tamanhos de fonte específicos pra telas pequenas, não só uma versão "reduzida" da versão desktop.Botões grudados um no outro
Área de toque pequena faz o dedo errar o alvo com frequência, principalmente em menus e formulários. É frustração acumulada a cada tentativa.
✓ Garanta um espaço mínimo confortável entre elementos clicáveis, pensando em dedo, não em cursor de mouse.Menu que não fecha, ou cobre a tela inteira sem saída clara
Usuário abre o menu, não encontra como fechar, ou o menu cobre todo o conteúdo sem um "X" visível. O caminho mais simples do site vira o mais confuso.
✓ Teste a abertura e o fechamento do menu em um celular de verdade, não só redimensionando o navegador.Imagens cortadas ou fora de proporção
Foto pensada pra uma tela larga fica cortada de forma estranha, ou distorcida, quando o site não ajusta corretamente a proporção pra tela vertical.
✓ Use imagens com proporções pensadas especificamente pra mobile, não só a mesma imagem do desktop redimensionada.Formulário maior que a tela
Campo de formulário que ultrapassa a largura da tela obriga o usuário a rolar pros lados, algo que a maioria simplesmente não faz. É lead perdido silenciosamente.
✓ Confirme que todo campo de formulário se ajusta à largura da tela, sem rolagem horizontal.Por que redimensionar o navegador não é suficiente
Arrastar a borda do navegador pra simular celular é útil, mas não substitui o teste real. Toque de dedo, teclado do celular abrindo por cima do conteúdo, orientação da tela: nada disso aparece direito numa simulação de desktop.
Teste rápido: pegue seu próprio celular agora e navegue pelo site como se fosse a primeira vez visitando. Tente ler cada texto sem dar zoom, clicar em cada botão sem errar, e preencher o formulário até o fim. Qualquer travamento nesse processo é o mesmo travamento que seus clientes reais sentem.
O que checar no seu site agora
- Todo texto é legível sem precisar dar zoom?
- Todo botão é fácil de tocar sem errar o alvo ao lado?
- O menu abre e fecha de forma óbvia?
- Nenhuma parte do site exige rolagem horizontal?
- O formulário é confortável de preencher com o teclado do celular?
Um site rápido que é ruim de usar no celular perde cliente do mesmo jeito que um site lento. A diferença é que ninguém percebe o problema no PageSpeed.
Perguntas frequentes
Meu site é rápido, isso já garante boa experiência no celular?
Não. Velocidade e usabilidade são coisas diferentes: um site pode carregar rápido e ainda ser difícil de usar no celular.
Redimensionar o navegador é suficiente pra testar responsividade?
Não totalmente. É útil, mas não substitui testar em um celular de verdade, com toque de dedo e teclado real.
Quais são os erros mais comuns de um site não responsivo?
Texto pequeno demais, botões colados um no outro, menu que não fecha direito e formulário maior que a tela.