Sites · Uso no celular em 2026
Como conferir se sua página funciona bem no celular?
Abra a URL em um celular real e tente concluir as tarefas do visitante: entender o serviço, encontrar condições de atendimento e iniciar contato. Confira leitura, menu, campos, botões e carregamento. Depois use ferramentas para investigar os problemas observados. Uma tela que cabe no aparelho pode ainda impedir a contratação.
Este roteiro ajuda a registrar falhas reproduzíveis e escolher prioridades. Os exemplos são fictícios, sem resultados de clientes. Você não precisa começar por uma nota de desempenho: primeiro descubra se alguém consegue usar a página.
1. Escolha tarefas antes de procurar defeitos visuais
Use a página pública, quando disponível, e anote aparelho, navegador, orientação e tipo de conexão. A simulação no computador ajuda a investigar larguras, mas não reproduz todas as condições do dispositivo.
| Tarefa | O que observar |
|---|---|
| Entender a oferta | Serviço e modalidade claros antes de procurar contato. |
| Conferir condições | Escopo, cobertura, processo e limites acessíveis. |
| Navegar | Menu abre, fecha e leva ao destino correto. |
| Iniciar contato | Botão identificado e destino esperado. |
| Preencher um pedido | Campos e mensagens continuam utilizáveis com teclado aberto. |
| Voltar à leitura | Retorno possível sem perder o contexto necessário. |
Para negócios de Canoas, inclua uma pergunta concreta: a pessoa consegue descobrir como a empresa atende sua região? Confira a explicação no guia de serviços no site local.
2. Confira leitura sem depender de gestos para consertar a tela
- Leia títulos, textos e legendas na orientação vertical e horizontal.
- Aumente o texto e observe se informações ou controles ficam cortados.
- Procure rolagem horizontal que não seja necessária ao conteúdo.
- Veja se imagens, tabelas e trechos longos permanecem compreensíveis.
- Confira contraste e se o significado depende apenas de uma cor.
O critério de refluxo da WCAG orienta a apresentação sem perda de informação ou função em uma largura equivalente a 320 pixels CSS, com exceções para conteúdos que exigem duas dimensões. Uma tabela pode precisar de rolagem própria; isso não justifica fazer toda a página ultrapassar a tela.
Na implementação, use viewport adequado e permita ampliação. Evite resolver um corte escondendo todo o excesso: isso pode ocultar a informação ou o controle que precisa ser corrigido.
Registro útil: “Na página de serviço, com texto ampliado, o título do botão fica cortado e não é possível saber a ação.” Essa descrição permite reproduzir o problema; “ficou estranho” não identifica a falha.
3. Use o menu e o formulário até o fim
Confira abertura, fechamento, foco e retorno. Um menu que aparece corretamente pode deixar itens inacessíveis, cobrir o botão de fechar ou prender o usuário. Teste também com teclado quando possível; o foco precisa ser perceptível.
Botões e links
O texto deve identificar o destino. Não dependa apenas de um ícone para contato. A WCAG 2.2 sobre tamanho de alvo define requisitos e exceções de tamanho e espaçamento. Como decisão de projeto, áreas maiores podem facilitar o toque.
Campos e mensagens
- O campo tem um rótulo que continua visível depois de digitar?
- O teclado não encobre o controle necessário para avançar?
- Erros explicam o que falta e como corrigir?
- Os dados permanecem após uma validação malsucedida?
- Há uma confirmação clara depois de um envio realmente concluído?
Combine um teste identificado com o responsável pelo atendimento, evitando simular um cliente ou enviar dados pessoais desnecessários. Para o contato externo, siga o roteiro de pedidos pelo WhatsApp. Um clique não confirma que a mensagem foi enviada.
4. Separe experiência observada e medição
Observe se o conteúdo principal demora a aparecer, se o primeiro toque recebe resposta e se elementos se movem durante o carregamento. Depois investigue a causa. A documentação de Core Web Vitals define três métricas:
| Métrica | O que avalia | Bom |
|---|---|---|
| LCP | Carregamento do maior conteúdo visível. | Até 2,5 segundos. |
| INP | Responsividade das interações. | Até 200 milissegundos. |
| CLS | Instabilidade visual do layout. | Até 0,1. |
O PageSpeed Insights combina diagnóstico de laboratório e dados de campo quando disponíveis. Laboratório ajuda a reproduzir condições; campo representa experiências agregadas de usuários. A nota do Lighthouse não é uma nota de ranking, e TBT não substitui uma medição real de INP.
Sem dados suficientes, a ausência de métricas de campo não comprova que o site está bom ou ruim. Comece pelos problemas de uso e pelo diagnóstico disponível. Compare testes em condições semelhantes.
- Imagens com dimensões declaradas ajudam a reservar espaço.
- Arquivos adequados ao tamanho exibido evitam transferências desnecessárias.
- A imagem principal não deve depender de lazy loading sem análise.
- Scripts e widgets precisam justificar o custo de carregamento e interação.
Não remova informação essencial apenas para melhorar uma pontuação. Corrija a implementação preservando a utilidade da página.
5. Preserve o conteúdo útil na versão móvel
O Google utiliza o conteúdo rastreado com o agente de smartphone para indexação e classificação, conforme o guia de indexação que prioriza dispositivos móveis. Confira conteúdo principal, metadados, imagens e dados estruturados. Não elimine explicações importantes só para encurtar a tela.
Uma organização responsiva pode mudar a disposição sem retirar informação. Conteúdo em seções expansíveis pode ajudar a leitura; a informação precisa estar disponível e não depender de uma interação para ser carregada do servidor como única forma de acesso.
Para buscas com IA, a documentação do Google mantém os fundamentos de SEO. Legibilidade e conteúdo acessível ajudam pessoas; não garantem indexação, ranking ou citação. Veja o guia de presença em buscas com IA.
6. Exemplo: uma página que cabe, mas dificulta o orçamento
Cenário fictício: uma empresa de Canoas tem uma página responsiva. No celular, porém, o menu cobre o contato, uma imagem sem espaço reservado empurra o botão e o formulário perde dados quando há erro.
- Bloqueio de tarefa: corrigir menu e formulário para permitir navegação e envio.
- Toque e leitura: corrigir sobreposições e rótulos pouco claros.
- Estabilidade: reservar o espaço da imagem e investigar outros deslocamentos.
- Carregamento: analisar arquivos e scripts com ferramentas apropriadas.
- Revisão: repetir as mesmas tarefas e conferir os outros tamanhos de tela afetados.
A prioridade depende do impacto real. Esse exemplo não é um relatório da agência nem demonstra ganho de conversão. O objetivo é eliminar falhas identificadas, sem presumir que uma alteração isolada explica toda mudança nos pedidos.
7. Entregue um registro que permita reproduzir a falha
| Campo | Informação |
|---|---|
| Ambiente | URL, aparelho, navegador, orientação, conexão e data. |
| Passos | Sequência necessária para observar a falha. |
| Esperado e observado | Tarefa que deveria ser possível e o que acontece. |
| Impacto | Leitura, navegação, contato ou envio afetado. |
| Conferência | Responsável, alteração e repetição do teste após corrigir. |
Use capturas sem dados pessoais quando ajudarem a explicar. Depois da correção, repita a tarefa no ambiente original e em outro tamanho relevante. Inclua essa checagem antes de campanhas ou mudanças de formulário e contato.
Para preparar o projeto, consulte o guia de materiais e responsabilidades. Combine quem executa os testes e quem recebe as pendências.
Dúvidas sobre revisar uma página no celular
Uma nota alta no PageSpeed garante que o site é bom?
Não. Teste tarefas e acessibilidade, além das métricas. Um formulário quebrado pode impedir um pedido mesmo com bom desempenho.
Basta testar na simulação do computador?
A simulação ajuda a investigar layout. Complete a conferência em aparelho real, especialmente teclado, menus e abertura de aplicativos externos.
Posso esconder o texto no celular?
Reorganize antes de remover. Preserve informações essenciais de serviço, condições e contato. Uma seção expansível pode ser adequada quando mantém conteúdo acessível.
Toda rolagem horizontal é um erro?
Não. Algumas tabelas ou conteúdos bidimensionais podem exigir uma área própria. Confira se a página inteira continua utilizável e se o controle fica claro.
O que enviar para a agência conferir um problema?
URL, ambiente, passos e impacto. Acrescente uma captura sem dados privados, se útil. Informe se a falha impede leitura, contato ou envio.
Revise o caminho completo do visitante
Quer revisar o uso do seu site no celular?
Envie a Karina o link da página, o aparelho usado e os passos que causam dificuldade. Converse sobre estrutura, leitura e caminhos de contato no celular.
Conversar sobre criação de site