Hoje, boa parte das visitas a qualquer site vem do celular. Se a sua página obriga o visitante a dar zoom, rolar para o lado ou tentar acertar botões minúsculos, ele vai embora em segundos. A boa notícia é que deixar um site responsivo é uma questão de poucas técnicas, que você aprende de uma vez.
O que é um site responsivo
É um site com layout flexível: o mesmo endereço e o mesmo código se adaptam à largura da tela. Em um celular, o conteúdo aparece em uma coluna; em um computador, ocupa várias colunas. Não existem duas versões separadas do site, e sim regras que reorganizam a página conforme o espaço disponível.
O contrário seria uma página de largura fixa, pensada para o monitor, que no celular aparece minúscula ou transborda para o lado.
Por que isso importa
- Experiência do visitante: páginas que funcionam no celular retêm mais gente.
- Google: o buscador adota a indexação mobile-first, o que significa que analisa principalmente a versão para celular. Veja mais em SEO técnico básico.
- Manutenção: um único site é mais simples de manter do que dois.
- Acessibilidade: layouts flexíveis lidam melhor com zoom e com tamanhos de fonte aumentados.
Os ingredientes do design responsivo
1. A meta tag viewport
Sem ela, o celular finge ter tela de computador e reduz tudo. Dentro da área head do HTML, inclua a tag meta de viewport com a largura igual à do dispositivo e a escala inicial 1. É uma linha só e a primeira coisa a conferir quando o site aparece “pequeno demais” no celular.
2. Unidades flexíveis
Evite tamanhos fixos em pixels para tudo. Prefira:
- Porcentagem para larguras que acompanham o elemento pai.
- rem para fontes e espaçamentos, que acompanham o tamanho de fonte base.
- max-width para limitar a largura de blocos de texto, mantendo a leitura confortável.
- vw e vh (porcentagens da largura e altura da tela) com moderação.
3. Imagens que se ajustam
Defina max-width: 100% e height: auto nas imagens. Assim elas nunca passam do tamanho do espaço que têm. Para quem quer ir além, existem os atributos srcset e sizes, que deixam o navegador escolher a versão mais adequada da imagem. Imagens enormes em telas pequenas deixam a página lenta, assunto de como deixar o site mais rápido.
4. Layout com Flexbox e Grid
O Flexbox organiza itens em linha ou coluna e permite que quebrem de linha quando o espaço acaba (propriedade flex-wrap). O Grid cria colunas e linhas com controle fino. Os dois são a base dos layouts modernos e reduzem o uso de larguras fixas.
5. Media queries
As media queries são regras do CSS que só valem em certas condições, geralmente a largura da tela. Por exemplo: “a partir de 768 pixels de largura, mostre três colunas em vez de uma”. Os pontos em que o layout muda se chamam breakpoints.
A abordagem mais recomendada é mobile-first: você escreve primeiro o estilo para telas pequenas e vai acrescentando regras para telas maiores. O código fica mais enxuto e a experiência no celular, que costuma ser a mais usada, vem em primeiro lugar.
Detalhes que fazem diferença no celular
- Tamanho dos toques: botões e links devem ser grandes o bastante para o dedo e ter espaço entre si. Valores em torno de 44 a 48 pixels de altura são referências comuns.
- Texto legível: use fonte de cerca de 16 pixels no corpo do texto para uma leitura confortável. Em campos de formulário, tamanhos menores podem fazer alguns celulares ampliarem a tela ao toque.
- Sem rolagem lateral: se aparecer barra de rolagem horizontal, algum elemento está mais largo que a tela. Procure imagens, tabelas e blocos com largura fixa.
- Menu compacto: em telas pequenas, o menu costuma virar um botão que abre uma lista. Mantenha-o fácil de acionar.
- Formulários simples: campos de tamanho adequado e tipo certo de teclado (e-mail, número, telefone) ajudam muito. Veja como criar um formulário de contato.
- Evite o hover: efeitos que só aparecem ao passar o mouse não existem no toque.
Como testar
- Ferramentas do navegador: abra o Inspecionar (F12) e ative o modo de dispositivo, geralmente pelo atalho Ctrl + Shift + M no Chrome e no Edge. Escolha tamanhos de celular e tablet ou arraste a largura.
- Em um celular de verdade: abra o site no seu aparelho. Nada substitui o toque real.
- Em mais de um aparelho: se possível, peça a amigos que abram o endereço no celular deles.
- Verificadores online: ferramentas gratuitas de análise de páginas apontam problemas de uso em dispositivos móveis.
Faça o teste também com o texto aumentado nas configurações do celular, porque muita gente usa fontes maiores.
Erros comuns
- Esquecer a meta tag viewport.
- Usar larguras fixas em pixels em contêineres principais.
- Esconder conteúdo importante no celular. O Google lê a versão mobile, então o que sumir lá pode sumir das buscas.
- Banners e pop-ups que cobrem a tela inteira e atrapalham a leitura.
- Testar só em um tamanho.
Seu plano de ação
Abra o seu site no celular agora. Se algo estiver fora do lugar, comece conferindo o viewport, depois as larguras fixas e as imagens. Quem está aprendendo pode treinar com uma página simples: veja como aprender HTML e CSS do zero e depois refaça o layout em modo mobile-first.