Como deixar um site compatível com celular: 12 passos comprovados

Um site compatível com celular é aquele que é fácil de ler e de usar no telefone: o texto é legível sem zoom, os botões são fáceis de tocar, nada transborda para os lados da tela e as páginas carregam rápido em uma conexão móvel. Isso importa mais do que nunca — a maior parte do tráfego da web vem de celulares, e o Google usa a indexação mobile-first, ou seja, ranqueia o seu site com base na versão mobile.

A boa notícia: deixar um site compatível com celular é um problema resolvido. Abaixo estão 12 passos que cobrem quase todos os casos e, em seguida, como testar o seu site de graça em tamanhos de dispositivos reais.

1. Adicione a meta tag viewport

Sem ela, os celulares renderizam a sua página na largura de desktop e depois a encolhem, deixando tudo minúsculo. Coloque isto no <head> de todas as páginas: <meta name="viewport" content="width=device-width, initial-scale=1">. Não desative o zoom com user-scalable=no — é uma falha de acessibilidade.

2. Use um layout responsivo e mobile-first

Projete primeiro para a menor tela e depois acrescente complexidade para telas maiores com media queries de CSS (@media (min-width: 768px)). Use Flexbox e Grid do CSS em vez de colunas de largura fixa e, nos celulares, empilhe os layouts de várias colunas em uma só.

3. Use larguras fluidas, não pixels fixos

Troque width: 960px por max-width: 960px; width: 100%. Use unidades relativas (%, rem, vw) nos contêineres e evite elementos mais largos do que a tela — eles causam rolagem horizontal, o bug de layout mais comum no celular.

4. Deixe imagens e mídias responsivas

Adicione img, video { max-width: 100%; height: auto; } ao seu CSS. Sirva imagens menores aos celulares com srcset e sizes, use formatos modernos (WebP, AVIF) e sempre defina os atributos width e height, para que o layout não dê saltos enquanto as imagens carregam.

5. Use tamanhos de fonte legíveis

O texto do corpo deve ter pelo menos 16 px no celular, com altura de linha em torno de 1,5. Mantenha um comprimento de linha confortável e garanta que o texto atenda às taxas de contraste das WCAG — texto pequeno e de baixo contraste é difícil de ler no celular ao ar livre.

6. Deixe botões e links fáceis de tocar

As áreas de toque devem ter pelo menos 48 × 48 px, com cerca de 8 px de espaço entre elas. Links minúsculos e espremidos em um rodapé ou menu estão entre as falhas de usabilidade mais frequentes no celular.

7. Simplifique a navegação

Recolha os menus longos em um botão de menu bem identificado, mantenha visíveis as ações mais importantes (busca, carrinho, contato) e evite interações que só funcionam com hover — não existe hover em uma tela sensível ao toque.

8. Evite pop-ups intrusivos

Intersticiais em tela cheia que cobrem o conteúdo no celular frustram os usuários e podem prejudicar o ranqueamento. Prefira banners pequenos e deixe os botões de fechar grandes e fáceis de acertar.

9. Otimize os formulários para o celular

Use os tipos de campo corretos (type="email", type="tel", inputmode="numeric") para que o celular mostre o teclado certo, habilite o preenchimento automático com autocomplete, mantenha os formulários curtos e coloque os rótulos acima dos campos, não ao lado.

10. Acelere o desempenho no celular

Celulares têm CPUs e redes mais lentas. Comprima as imagens e carregue-as sob demanda (lazy loading), minifique e adie o JavaScript, remova o CSS não utilizado, use uma CDN e habilite o cache. Mire em Core Web Vitals na faixa "boa": LCP abaixo de 2,5 s, CLS abaixo de 0,1 e INP abaixo de 200 ms — confira os seus dados de usuários reais no Google Search Console ou no PageSpeed Insights. Uma auditoria de site gratuita aponta as causas comuns, como respostas lentas do servidor, recursos que bloqueiam a renderização e imagens sem dimensões; veja por que o meu site está lento para as correções.

11. Mantenha o mesmo conteúdo no celular e no desktop

Com a indexação mobile-first, o conteúdo oculto ou removido no celular pode simplesmente não ser indexado. Mantenha nas duas versões os mesmos títulos, textos, dados estruturados, imagens (com texto alternativo) e meta tags.

12. Teste em tamanhos de dispositivos reais — com regularidade

Redimensionar o navegador do desktop não basta. Teste em viewports reais de celular e de tablet, nas duas orientações, e teste de novo depois de cada mudança significativa. É aqui que a maioria dos sites "compatíveis com celular" quebra sem ninguém notar.

Como testar se o seu site é compatível com celular

A auditoria de layout responsivo do Rudra renderiza as suas páginas em até oito perfis de dispositivo — iPhone SE, iPhone 14, Pixel 7, iPad, iPad Pro e três tamanhos de desktop — e sinaliza o conteúdo que transborda ou se sobrepõe, com capturas de tela de cada dispositivo. Combine-a com uma varredura do site inteiro para pegar também os problemas de desempenho no celular e de SEO:

1. Faça uma auditoria de site gratuita na sua página inicial para rastrear o site inteiro.
2. Abra o relatório e confira os achados de SEO, desempenho e acessibilidade.
3. Execute a auditoria de layout responsivo para ver as suas páginas em cada dispositivo, ou o verificador de celular gratuito para uma conferida rápida em uma única página.
4. Corrija os problemas sinalizados, depois faça uma nova varredura e compare os resultados.