Design responsivo: guia prático
Design responsivo deixou de ser uma técnica especial para ser o modo normal de construir. O que continua a distinguir bons resultados é a ordem de trabalho e o teste em dispositivos reais.
Este guia cobre a abordagem, as decisões técnicas e os problemas que só se veem num telemóvel a sério.
Móvel primeiro, e porquê#
Desenhar primeiro para o ecrã pequeno não é uma preferência estética: é uma restrição que produz decisões melhores.
- Cabe menos, por isso é obrigatório decidir o que é essencial.
- O que sobreviver ao ecrã pequeno é o que realmente importa na página.
- Acrescentar espaço para ecrãs maiores é fácil; retirar conteúdo é doloroso.
- A maior parte do tráfego chega de telemóvel na maioria dos setores — verifique a sua análise.
- O desempenho fica melhor por consequência, porque se carrega menos por omissão.
- A navegação simplificada em móvel costuma revelar-se melhor também em desktop.
O padrão inverso — desenhar em desktop e «adaptar» no fim — produz o móvel improvisado que se reconhece imediatamente.
Pontos de rutura e disposição#
Os pontos de rutura devem seguir o conteúdo, não modelos de dispositivos que mudam todos os anos.
| Decisão | Recomendação |
|---|---|
| Onde colocar pontos de rutura | Onde a disposição parte, não em larguras de dispositivos |
| Quantos | Três a quatro chegam para a maioria dos sites |
| Sistema de grelha | CSS Grid para a página, flexbox para componentes |
| Larguras | Relativas com máximo, não valores fixos |
| Tipografia | Fluida com clamp entre um mínimo e um máximo |
| Espaçamento | Escala consistente, não valores avulsos |
| Contentores | Largura máxima para o texto não esticar em ecrãs largos |
Os elementos que costumam partir#
Estes são responsáveis pela maioria dos problemas visuais em ecrãs pequenos.
- Tabelas. Não encolhem. Ou fazem scroll horizontal no seu contentor, ou viram cartões.
- Imagens. Precisam de srcset e sizes para que o telemóvel não descarregue a versão de desktop.
- Títulos longos. Teste com o título mais comprido que existirá, não com o do exemplo.
- Formulários. Campos a toda a largura, teclado correto por tipo de campo, rótulos visíveis.
- Navegação. O menu compactado tem de fechar-se e ser navegável por teclado.
- Modais e sobreposições. Devem caber no ecrã e permitir scroll interno.
- Elementos fixos. Uma barra fixa num ecrã baixo pode ocupar metade da área útil.
- Vídeos e mapas incorporados. Precisam de contentor com proporção definida.
Testar como deve ser#
O simulador do navegador apanha problemas de disposição e esconde tudo o resto.
- Teste em telemóveis reais, incluindo um aparelho antigo e lento.
- Teste com ligação limitada, não com a rede do escritório.
- Teste em modo horizontal — é onde as barras fixas costumam falhar.
- Teste com o texto aumentado nas definições do sistema.
- Teste o toque com o polegar, não com o rato num ecrã simulado.
- Verifique se algo provoca scroll horizontal; é o defeito mais visível que existe.
- Verifique os alvos de toque: 44 px mínimos, com espaço entre eles.
O scroll horizontal é o defeito que os visitantes notam de imediato e que os simuladores escondem com facilidade.
Perguntas frequentes
Quantos pontos de rutura preciso?
Três a quatro chegam para a maioria dos sites. O critério é onde a disposição deixa de funcionar, não a largura de um telemóvel específico. Larguras de dispositivos mudam todos os anos; o conteúdo, não. Redimensione a janela lentamente e coloque um ponto de rutura onde algo começar a ficar mau.
Devo ter um site móvel separado?
Não. Sites móveis separados exigem manutenção dupla, dividem sinais de pesquisa e são uma abordagem praticamente abandonada. Um site responsivo serve todos os ecrãs a partir dos mesmos URL, que é também o que os motores de busca esperam encontrar hoje.
Como trato tabelas em ecrãs pequenos?
Duas opções funcionam: scroll horizontal dentro do próprio contentor da tabela, que preserva a comparação entre colunas, ou transformar cada linha num cartão empilhado. A escolha depende de se as pessoas precisam de comparar valores entre colunas. O que nunca funciona é deixar a tabela empurrar a página para o lado.
Design responsivo torna o site mais lento?
Não por si. Torna se enviar as imagens de desktop para telemóveis, o que acontece quando falta srcset. Com imagens servidas no tamanho certo e CSS bem organizado, um site responsivo é mais leve em móvel do que uma versão separada mal mantida.
design responsivomobile firstpontos de rutura csssite telemóvelimagens responsivastipografia fluida
