Site responsivo: o que é e por que no Brasil não é opcional

Resposta curta: um site responsivo é aquele que se reorganiza para caber na tela de quem está olhando — mesmo conteúdo, mesmo endereço, arrumação diferente. Não é uma versão separada "para celular": é o mesmo site, que muda de forma.

E aqui a conta é diferente da de outros países. Segundo a TIC Domicílios, cerca de dois terços dos usuários brasileiros acessam a internet principal ou exclusivamente pelo celular; nas classes D e E isso passa de 85%. Ou seja: para boa parte do seu público, a versão de celular não é a segunda opção — é a única que existe.

O que muda quando a tela encolhe

Não é só "tudo fica menor". Um layout responsivo toma decisões:

• Colunas viram uma coluna só, na ordem em que fazem sentido lendo de cima para baixo.
• Menu horizontal vira botão. E o que estava escondido no menu precisa continuar alcançável.
• Imagens são servidas menores, para não gastar o dado de quem está no 4G.
• Botões crescem, porque o dedo é menos preciso que o cursor — cerca de 44 pixels de altura é o mínimo confortável.
• Tabelas ganham rolagem própria ou viram cartões, em vez de espremer seis colunas em 360 pixels.

Responsivo não é o mesmo que rápido. Um site pode se adaptar perfeitamente e mesmo assim demorar oito segundos porque carrega uma foto de 6 MB. São dois problemas diferentes, e o segundo costuma ser o que faz a pessoa desistir.

O que quebra na prática

Depois de olhar muitas páginas no celular, os defeitos se repetem quase sempre nesta ordem:

• Rolagem horizontal. Algo mais largo que a tela — uma tabela, uma imagem, um bloco com largura fixa — e a página inteira passa a deslizar de lado.
• Texto de 12 pixels. Fica legível na mesa do designer e ilegível na rua, com sol.
• Botões colados. Dois links a três pixels de distância viram o clique errado.
• Menu que abre e não fecha, ou que cobre o conteúdo sem deixar sair.
• Formulário sem teclado certo: telefone que abre teclado de letras, e-mail sem arroba à mão.
• Pop-up que ocupa a tela inteira e tem o "x" fora da área visível.
• WhatsApp flutuante em cima do botão de enviar do formulário. Clássico e caro.

Como testar o seu em cinco minutos

1. Abra o site no seu próprio celular, com dados móveis e não no Wi-Fi de casa.
2. Passe por todas as páginas com uma mão só, sem apertar a tela com dois dedos para ler nada.
3. Tente rolar a página para o lado. Se ela se mexe, existe algo mais largo que a tela.
4. Preencha o formulário até o fim e envie de verdade.
5. Peça a alguém de mais de cinquenta anos para achar o seu telefone no site. Cronometre em silêncio.
6. Repita tudo com o celular deitado. Metade dos defeitos só aparece na horizontal.

Esse teste vale mais que qualquer relatório automático, porque ele mede o que a ferramenta não mede: se dá para usar.

Responsivo, adaptativo e "versão mobile"

Três termos que aparecem em orçamento e não significam a mesma coisa.

• Responsivo: um site que se ajusta continuamente a qualquer largura. É o padrão hoje e o que você deve pedir.
• Adaptativo: layouts fixos para alguns tamanhos escolhidos. Funciona, mas envelhece mal — sempre aparece uma tela que não estava na lista.
• "Versão mobile" em outro endereço: dois sites para manter, dois lugares para esquecer de atualizar, e problemas de indexação. Herança dos anos 2010; hoje só existe em sistemas antigos.

Isso mexe com a busca

O Google avalia as páginas pela versão que ele vê no celular. Na prática: se algum conteúdo existe só na versão de computador, para efeito de busca ele não existe. Vale conferir se textos, links e informações de contato estão presentes nas duas — esconder blocos "para simplificar no mobile" é a forma mais silenciosa de perder posição.

A recíproca também vale: um site que funciona bem no celular não sobe sozinho no Google. Ele apenas para de ser descartado por um motivo bobo.

Quanto custa fazer certo

Praticamente nada, se for desde o começo — qualquer construtor, tema ou página gerada hoje já nasce responsiva, e a diferença de preço no orçamento é zero. O custo aparece quando se conserta depois: refazer um layout fixo para telas pequenas costuma dar mais trabalho do que ter feito assim de início.

Se o seu site atual é de antes de 2015 e está com layout travado, a conta honesta quase sempre é refazer em vez de remendar.

Como criar um site do zero: caminhos, custos e ordem das etapas

Lista de checagem

• Nenhuma rolagem lateral em nenhuma página.
• Texto do corpo a partir de 16 pixels.
• Telefone e WhatsApp clicáveis, visíveis sem rolar.
• Botões grandes o suficiente para o polegar, com espaço entre eles.
• Imagens comprimidas e servidas no tamanho da tela.
• Formulário testado por você, no seu celular, com envio real.
• Nada de conteúdo que só existe na versão de computador.