Versão mobile do site: 10 regras com exemplos de antes e depois
A maioria dos visitantes de uma loja online chega pelo celular, e é lá que decide se compra. Aqui estão 10 regras para a versão mobile com exemplos de antes e depois e tamanhos exatos de botões e fontes segundo Apple, Google e WCAG.
Por que a versão mobile não é um site «encolhido»?
No celular a pessoa toca com o dedo, lê numa tela pequena e muitas vezes usa uma mão só. O que é confortável no computador fica minúsculo, apertado e confuso no celular. Além disso, o Google indexa os sites pela versão mobile, então busca e vendas dependem dela.
10 regras com exemplos
1. Faça botões grandes
O toque é com o dedo, não com o cursor. A Apple recomenda área de toque de pelo menos 44 × 44 pt, o Android 48 × 48 dp, e o padrão de acessibilidade WCAG 2.2 define mínimo de 24 × 24 px.
2. Aumente a fonte
O que está bom no computador fica ilegível no celular. O texto principal costuma ter 16 px ou mais para não precisar de zoom; o Lighthouse do Google marcava páginas com mais de 40% do texto abaixo de 12 px.
3. Cuide dos espaçamentos
Com blocos colados, a tela parece carregada e barata. É preciso mais respiro do que parece.
4. Empilhe os botões
Dois botões lado a lado ficam estreitos no celular. Na largura toda, um embaixo do outro, são mais fáceis de tocar e geram menos toques errados.
5. Mostre que dá para deslizar
Se os cards deslizam, isso precisa aparecer: a borda do próximo card, pontos ou setas indicam que há mais.
6. Reduza o menu
O cabeçalho não deve ocupar meia tela. Um cabeçalho compacto com logo e botão de menu deixa espaço para o essencial.
7. Esconda o secundário
No celular não é preciso mostrar tudo de uma vez: acordeões, abas e «ver mais» deixam a página limpa. Esconda, mas não apague: o Google indexa a versão mobile e o conteúdo deve ser o mesmo do desktop.
8. Deixe os contatos clicáveis
Telefone e e-mail devem abrir com um toque — para isso existem os links tel: e mailto:. Um botão «Ligar» é ainda mais simples.
9. Não sobrecarregue a primeira tela
Há pouco espaço no topo: um título, uma explicação curta e uma ação principal. Banners, descontos e inscrições ficam mais abaixo.
10. Não copie o desktop
A versão mobile não é um site menor. Os blocos mudam de ordem, três colunas viram uma e o excesso sai.
O Metriverra mostra como convertem os visitantes do celular e do computador, então fica fácil conferir se as melhorias no mobile trouxeram vendas.
Resumo
- Botões a partir de 44 × 44 pt (Apple) ou 48 × 48 dp (Android); mínimo WCAG 24 × 24 px.
- Texto principal a partir de 16 px, com espaçamento entre blocos.
- Botões na largura toda e empilhados; contatos clicáveis.
- Primeira tela: uma ação principal; o secundário em acordeões.
- Mobile é uma reconstrução, não um site encolhido; mesmo conteúdo do desktop.
Fontes: Apple — Human Interface Guidelines: Accessibility · Android Developers — Make apps more accessible · W3C — WCAG 2.2: Target Size (Minimum) · Chrome for Developers — Lighthouse: legible font sizes · MDN — The Anchor element · Google Search Central — Mobile-first indexing
