Design responsivo: como fazer sites que funcionam em telemóvel

Hoje, grande parte das pessoas abre sites no telemóvel. Se o teu site só funciona bem no computador, estás a perder visitantes e a prejudicar a tua posição no Google, que avalia a versão móvel das páginas. Design responsivo é a técnica de fazer uma única página adaptar-se a qualquer tamanho de ecrã.

A base: a meta viewport

Sem esta linha no <head>, o telemóvel mostra a página como se fosse um ecrã de computador, minúscula:

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

É obrigatória em qualquer site moderno.

Pensar primeiro no telemóvel (mobile first)

A abordagem recomendada é escrever o CSS para o ecrã mais pequeno e depois acrescentar regras para ecrãs maiores. O telemóvel recebe só o essencial, e o computador ganha melhorias.

.lista { display: grid; gap: 16px; grid-template-columns: 1fr; }

@media (min-width: 700px) {
  .lista { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .lista { grid-template-columns: repeat(3, 1fr); }
}

Uma coluna no telemóvel, duas em tablet, três no computador. As @media são as media queries: regras que só se aplicam a partir de certa largura.

Unidades flexíveis

Evita larguras fixas em pixéis para caixas grandes. Prefere:

• % e fr para larguras de colunas;
• max-width em vez de width fixo;
• rem para texto e espaçamentos;
• clamp() para tamanhos que crescem com o ecrã:

h1 { font-size: clamp(1.8rem, 5vw, 3rem); }

Imagens que se adaptam

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

E no HTML, indica width e height para o navegador reservar espaço e a página não "saltar" enquanto carrega. Para melhor velocidade, usa formatos modernos como WebP e loading="lazy" nas imagens abaixo da dobra.

Menus no telemóvel

Um menu horizontal com seis itens não cabe num ecrã estreito. Soluções comuns: um botão "☰" que abre e fecha o menu, ou uma lista vertical. Garante que os botões e ligações têm pelo menos 44 pixéis de altura, para o dedo acertar.

Flexbox e Grid, os teus aliados

Com display: flex; flex-wrap: wrap; os elementos quebram para a linha seguinte quando não cabem. Com grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) crias uma grelha que ajusta o número de colunas sozinha, sem media queries.

Como testar

1. No navegador, carrega em F12 e ativa a vista de dispositivo para simular telemóveis.
2. Redimensiona a janela e vê onde o layout parte.
3. Testa num telemóvel real, de preferência dois tamanhos.
4. Verifica a velocidade e a usabilidade móvel com as ferramentas gratuitas do Google (PageSpeed Insights e Lighthouse).

Erros comuns

• Texto demasiado pequeno (menos de 16 px no corpo).
• Botões muito juntos, difíceis de tocar.
• Tabelas largas que obrigam a deslizar para o lado (coloca-as num contentor com overflow-x: auto).
• Esquecer-se de testar com ligação lenta.

E o SEO?

O Google usa a versão móvel para indexar. Um site responsivo, rápido e legível no telemóvel é uma das bases de um bom posicionamento. Vê também SEO para pequenos negócios. Se precisas de um site já pronto para todos os ecrãs, a equipa pode fazer a criação do teu site.