Checklist de teste de site mobile: 30 verificações antes do lançamento

Um teste de site mobile confere se o site é legível, usável e rápido no celular antes que visitantes reais encontrem os problemas. O checklist abaixo reúne 30 verificações em sete grupos. A maioria leva segundos numa visualização mobile no computador; algumas exigem um celular de verdade. Passe por ele antes de cada lançamento ou redesign e guarde a versão curta para as entregas do dia a dia.

Antes de começar: prepare os aparelhos de teste

Você vai precisar de três tipos de visualização:

1. Uma visualização mobile rápida no computador para conferir o layout em muitas páginas: o modo dispositivo do Chrome DevTools ou uma extensão como o Mobile View Extension. As diferenças estão em extensão de simulador mobile ou DevTools.
2. Motores mobile reais (e os navegadores desktop do checklist de cross browser testing): Safari do iOS pelo Simulator do Xcode ou um iPhone real, e Chrome no Android. Veja testar no iPhone e testar no Android.
3. Pelo menos um celular intermediário de verdade para toque, teclado e velocidade.

Teste no mínimo estas larguras (o que esses números significam está em o que é o tamanho da viewport): 360 px, 390–402 px e 430–440 px na vertical, mais um tamanho na horizontal e um de tablet.

1. Layout e legibilidade

1. Nenhuma página tem rolagem horizontal. Se uma página rola para o lado, encontre o elemento mais largo que a tela; larguras fixas, URLs longas e tabelas largas são os culpados de sempre.
2. O texto principal tem pelo menos 16 px e as linhas não passam da largura da tela.
3. Os títulos quebram de linha direito, sem palavras soltas sozinhas numa linha.
4. As imagens se ajustam à tela e mantêm a proporção.
5. A ordem do conteúdo faz sentido quando as colunas se empilham. O mais importante não fica abaixo de uma sidebar longa.
6. Na horizontal, nada fica escondido atrás do notch ou do indicador de início (confira env(safe-area-inset-*) se usar layouts de ponta a ponta).
7. A página tem uma meta tag viewport correta. Sem ela, o celular mostra uma página desktop reduzida. Veja a meta tag viewport explicada.

2. Navegação

8. O menu abre e fecha com um toque e fecha quando um link é escolhido.
9. Todos os itens do menu, inclusive os aninhados, são acessíveis sem hover.
10. O logo ou um link para a home aparece em todas as páginas.
11. Na horizontal, cabeçalhos fixos ocupam só uma pequena parte da altura da tela.
12. O botão voltar (e o gesto de voltar do Android) leva ao lugar esperado, inclusive em single-page apps.

3. Toque e interação

13. As áreas de toque são grandes o suficiente e espaçadas. A WCAG 2.2 define um mínimo de 24 × 24 pixels CSS; as diretrizes de design da Apple e do Google recomendam cerca de 44–48 px.
14. Carrosséis e sliders funcionam com swipe e têm controles visíveis.
15. Pop-ups e avisos de cookies fecham com facilidade e não cobrem a tela inteira na chegada.
16. Os links no texto se distinguem sem hover.

4. Formulários

17. Cada campo mostra o teclado certo: type="email", type="tel", inputmode="numeric".
18. Os campos usam texto de pelo menos 16 px, para que o Safari no iOS não dê zoom ao focar.
19. O teclado na tela não cobre o campo em que se digita nem o botão de enviar.
20. O preenchimento automático funciona para nome, e-mail, endereço e pagamento (atributos autocomplete).
21. As mensagens de erro aparecem ao lado do campo e ficam visíveis sem rolar.

5. Mídia e arquivos

22. As imagens são entregues em tamanhos adequados à tela (srcset e sizes), e não como arquivos de desktop reduzidos.
23. Os vídeos não começam sozinhos com som e tocam dentro da página no iPhone quando essa é a intenção (playsinline).
24. Ícones e logos ficam nítidos em telas de alta densidade (SVG ou imagens 2x/3x).

6. Velocidade

25. O conteúdo principal aparece rápido numa conexão limitada. Veja os dados de campo no PageSpeed Insights e rode um teste de laboratório; o guia de teste de velocidade do site no celular explica os dois.
26. O layout não pula enquanto a página carrega (Cumulative Layout Shift).
27. A página responde rápido ao primeiro toque (Interaction to Next Paint).

7. SEO e acessibilidade no mobile

28. A página mobile tem o mesmo conteúdo principal, títulos, dados estruturados e meta tags que a desktop. O Google indexa a versão mobile.
29. O texto pode ser ampliado para 200% sem quebrar o layout, e a página pode ser usada com o leitor de tela em pelo menos um celular.
30. Uma auditoria do Lighthouse no modo mobile não mostra problemas críticos de acessibilidade ou SEO. Passos: auditoria mobile com o Lighthouse no Chrome.

A versão curta para cada entrega

Ninguém vai rodar 30 verificações a cada deploy. Para entregas de rotina:

• abra as páginas alteradas na visualização mobile em 360 px e 430 px
• confira se não há rolagem lateral nem menus quebrados
• envie um formulário de um celular real
• dê uma olhada no relatório de velocidade da principal landing page

Isso leva uns dez minutos e pega a maioria das regressões.

Erros comuns em testes mobile

• Testar só redimensionando a janela do navegador. Isso muda a largura, mas não o user agent, a densidade de pixels nem o tipo de entrada, e alguns sites entregam outra página para celulares reais. Detalhes: como ver a versão mobile de um site no computador.
• Testar só num celular top de linha recente. A maioria dos visitantes tem aparelhos mais lentos que os de quem desenvolve.
• Ignorar a horizontal e os tablets. Muitos layouts quebram por volta de 768–1024 px; veja como ver um site como no iPad.
• Testar só páginas sem login. Áreas de conta e checkout costumam receber a menor atenção no mobile.

Perguntas frequentes

Como testar meu site no celular sem ter um celular?

Use uma visualização mobile no Chrome do computador para o layout, o Simulator do Xcode para o Safari do iPhone num Mac e o emulador do Android Studio para o Android. Deixe um celular real para a conferência final dos fluxos principais.

Qual é o problema mais comum em sites no celular?

Conteúdo mais largo que a tela, que causa rolagem lateral. Geralmente vem de um elemento com largura fixa, uma tabela larga ou uma imagem sem max-width: 100%.

Existe um teste mobile oficial do Google?

O Google desativou o Teste de compatibilidade com dispositivos móveis em dezembro de 2023 e agora indica o Lighthouse. Há alternativas em alternativas ao teste de compatibilidade com dispositivos móveis do Google.