Design web

Guia para um site verdadeiramente responsivo

Responsividade é adaptar prioridades, leitura e interação — não apenas encolher um layout de computador.

Atualizado em 19 de junho de 20266 min de leitura

Comece pelo conteúdo

Um ecrã pequeno obriga a decidir o que aparece primeiro. Organize a página para que o título, a proposta principal e a ação mais importante não dependam de uma largura específica.

Use dimensões flexíveis

Grelhas com colunas flexíveis, limites máximos de largura e espaçamento fluido evitam linhas demasiado longas e margens apertadas. Imagens devem respeitar a largura disponível.

Escolha pontos de quebra pelo layout

Não crie regras apenas para modelos de telemóvel conhecidos. Reduza colunas quando o conteúdo deixa de caber confortavelmente; esse é o ponto de quebra certo.

Pense no toque

Links e botões precisam de área suficiente e distância entre si. Um menu que funciona com rato também deve funcionar por toque e teclado.

Mantenha a leitura confortável

Evite texto minúsculo e parágrafos que ocupam toda a largura num monitor grande. Contraste, tamanho de letra e comprimento de linha devem trabalhar em conjunto.

Teste o que pode falhar

Verifique orientação horizontal, zoom, nomes longos, mensagens de erro, teclados móveis e conteúdos sem imagem. Um layout robusto aceita variação sem se desfazer.