Site responsivo: o que é e como testar o seu

O que é um site responsivo

Um site responsivo é um só site, com um só endereço e um só código, que reorganiza o próprio layout conforme o tamanho da tela. No computador, os serviços aparecem em três colunas. No celular, as mesmas informações ficam uma abaixo da outra, o menu vira um botão e as imagens se ajustam à largura.

Não é simplesmente encolher a página. Em um site que só encolhe, o texto fica minúsculo e a pessoa precisa dar zoom e arrastar para os lados. No site responsivo, o conteúdo se reorganiza para continuar legível e fácil de tocar.

Isso é diferente de ter uma "versão mobile" separada, em outro endereço, que você mantém em duplicidade. A abordagem responsiva dá menos trabalho para manter, porque qualquer correção vale para todas as telas.

Por que isso importa

• O celular é a porta de entrada. Na pesquisa TIC Domicílios 2025 do Cetic.br, 65% dos usuários de internet no Brasil acessaram a rede somente pelo celular (tabela C16A).
• O Google indexa pela versão para celular. Na indexação mobile-first, ele usa o conteúdo da versão para celular para indexar e classificar. A documentação recomenda o design responsivo como o padrão mais fácil de implementar e manter, e avisa que, se a versão para celular tiver menos conteúdo, você pode perder tráfego (documentação do Google sobre indexação mobile-first).
• A experiência decide. Quem não consegue ler ou tocar em um botão sai. Um site que funciona bem no celular não promete posição no Google, mas deixa de perder o visitante que já chegou.

Como testar o seu site em 5 minutos

1. Celular de verdade, com dados móveis. Consegue ler sem dar zoom? Os botões respondem ao primeiro toque? O menu abre e fecha?
2. Gire a tela. Confira o modo retrato e o paisagem. Elementos que somem ou ficam cortados aparecem aqui.
3. Use o modo dispositivo do navegador. No Chrome, abra as ferramentas do desenvolvedor (F12) e clique no ícone de dispositivos, ou use Ctrl+Shift+M. Arraste a largura da janela e veja onde o layout quebra.
4. Rode o PageSpeed Insights. Escolha a aba de celular e veja também as métricas de velocidade. Veja teste de velocidade do site.
5. Teste telas largas. Abra em um notebook e em um monitor grande. Em telas largas, o erro típico é o conteúdo esticado de ponta a ponta ou solto no meio de um vazio.
6. Preencha o formulário no celular. Teclado que cobre o campo, botão de enviar escondido e máscara de telefone com defeito são problemas que só aparecem de perto.

Um aviso: o antigo Teste de Compatibilidade com Dispositivos Móveis do Google e o relatório de usabilidade em dispositivos móveis do Search Console foram descontinuados em dezembro de 2023. Se um tutorial antigo mandar usar essas ferramentas, use no lugar o Lighthouse (nas ferramentas do Chrome) e o PageSpeed Insights.

Nós testamos nossos sites em celular, tablet, notebook e telas largas antes de publicar, porque um layout que funciona em 1440 pixels de largura pode ficar solto em 2560.

Os problemas mais comuns

O que existe por baixo, em linguagem simples

Há três bases técnicas. Você não precisa escrever código, mas ajuda saber o que perguntar a quem faz o seu site.

1. Meta viewport. Uma linha no cabeçalho da página que diz ao celular para usar a largura real da tela, e não fingir ser um computador:

<meta name="viewport" content="width=device-width, initial-scale=1">

Sem ela, muitos celulares mostram a página em escala de desktop, reduzida. Evite desativar o zoom (user-scalable=no): isso impede que pessoas com baixa visão consigam ler, como alerta a documentação do MDN sobre o viewport.

2. Medidas relativas. Em vez de larguras fixas em pixels, usam-se porcentagens, unidades flexíveis e regras que só valem a partir de certa largura de tela (as "media queries"):

.container { width: min(100% - 2rem, 70rem); margin-inline: auto; }

@media (min-width: 48rem) {
  .servicos { display: grid; grid-template-columns: repeat(3, 1fr); }
}

No celular, os blocos ficam empilhados. Quando a tela passa de 48rem (cerca de 768 pixels), viram três colunas.

3. Imagens responsivas. A imagem nunca pode ser mais larga que o espaço onde está, e o navegador deve baixar o tamanho adequado à tela:

<img src="equipe-800.webp"
     srcset="equipe-400.webp 400w, equipe-800.webp 800w, equipe-1600.webp 1600w"
     sizes="(min-width: 60rem) 50vw, 100vw"
     width="800" height="600" alt="Equipe reunida na oficina">

img { max-width: 100%; height: auto; }

Essas são as bases do design responsivo: viewport configurado, conteúdo que cabe na tela sem rolagem lateral e imagens com largura máxima e dimensões definidas. Se o seu site tem as três, já evita a maior parte dos problemas da tabela acima.

Meu site não é responsivo. E agora?

Há dois caminhos. Se o site está em uma plataforma ou tema atual, muitas vezes basta ajustar o tema, trocar componentes problemáticos e corrigir o conteúdo. Se ele foi feito com tecnologia antiga, com tabelas de layout e larguras fixas, o ajuste costuma custar mais do que refazer. O que pesa no valor é a quantidade de páginas, o estado do código e quanto do conteúdo precisa ser reescrito.

Para saber em que situação você está, o diagnóstico gratuito analisa o seu site no celular. Se for o caso de refazer, veja como criar um site para empresa e a página de criação de sites. Depois de publicado, a manutenção de site evita que um plugin ou conteúdo novo quebre o layout no celular.