9 princípios básicos do design responsivo

Design responsivo é a técnica em que um único site, com um único endereço e um único código, reorganiza o layout conforme a largura da tela. No celular o conteúdo aparece em uma coluna, no notebook em três, e ninguém precisa dar zoom para ler. Como a maior parte dos acessos da maioria dos sites vem do celular, esse é o jeito padrão de construir páginas, e os nove princípios abaixo são a base dele. A lista original é do designer Sandijs Ruluks. As explicações foram atualizadas com as técnicas de CSS que usamos hoje.

Os nove princípios

1. Responsivo e adaptativo são coisas diferentes

No design responsivo, o layout é fluido: as larguras são proporcionais e o conteúdo se ajusta a qualquer tamanho de janela. No adaptativo, existem alguns layouts de largura fixa, um para cada faixa de tela, e o site troca de um para outro. O adaptativo dá mais controle sobre cada versão, mas exige desenhar e manter várias, e fica estranho nos tamanhos intermediários. Na prática, os sites atuais misturam os dois: base fluida, com ajustes pontuais em certas larguras.

2. O fluxo

Quando a tela estreita, o que estava lado a lado passa a ficar empilhado, e a página cresce para baixo. Isso é o fluxo. O problema aparece quando algum elemento tem altura ou posição fixa: o texto ao redor cresce, o bloco fixo não acompanha, e um passa por cima do outro. Deixe a altura dos blocos ser definida pelo conteúdo.

3. Unidades relativas

Um bloco de 1.000 pixels de largura não cabe em um celular com 390. Um bloco com 100% de largura cabe em qualquer tela. Por isso o layout responsivo usa unidades relativas: porcentagem para larguras, rem para fontes e espaçamentos (o que respeita o tamanho de letra que o usuário configurou no aparelho), vw e vh para medidas ligadas ao tamanho da janela. Os sistemas de layout do CSS, flexbox e grid, já trabalham com proporções e dispensam boa parte das contas.

4. Breakpoints

Breakpoint é a largura em que o layout muda de arranjo, definida no CSS por uma media query. Por exemplo: acima de 900 pixels, três colunas; abaixo, uma. O erro clássico é escolher os pontos pelo tamanho de aparelhos específicos, que mudam todo ano. Estreite a janela do navegador devagar e crie o breakpoint onde o conteúdo começa a ficar apertado. Um recurso mais recente, as container queries, permite que um componente mude conforme o espaço da caixa onde está, e não conforme a tela inteira. Assim, o mesmo cartão de produto funciona na barra lateral e na área principal.

5. Valores mínimos e máximos

Um texto ocupando 100% da largura fica ótimo no celular e ilegível em um monitor grande, com linhas de duzentos caracteres. A propriedade max-width limita o crescimento, e min-width impede que um botão ou uma coluna encolha além do aceitável. Para fontes, a função clamp() define de uma vez o tamanho mínimo, o ideal e o máximo, e o título cresce com a tela sem passar do ponto.

6. Objetos aninhados

Controlar dezenas de elementos soltos, cada um com a própria regra, vira bagunça. Agrupe o que anda junto dentro de um contêiner: o logotipo e o menu no cabeçalho, a foto, o nome e o preço dentro do cartão do produto. O contêiner se ajusta à tela, e os itens dentro dele se organizam em relação a ele. Para peças que não devem mudar de tamanho, como ícones e o logotipo, medidas fixas dentro do contêiner continuam sendo boa escolha.

7. Mobile ou desktop primeiro

Dá para desenhar a versão grande e ir cortando, ou começar pela pequena e ir acrescentando. A gente prefere começar pelo celular. A tela pequena obriga a decidir o que é essencial na página, e ampliar um layout enxuto é mais fácil do que espremer um carregado. Há um motivo técnico também: o Google usa a versão para celular das páginas como referência para indexar e classificar o site. Conteúdo que só existe na versão desktop corre o risco de não ser considerado.

8. Fontes web ou fontes do sistema

Fontes do sistema já estão no aparelho e não custam nada para carregar. Fontes web dão identidade à marca, mas são arquivos a baixar. O meio-termo que costuma funcionar: uma ou duas famílias, só nos pesos realmente usados, em formato WOFF2, com a propriedade font-display: swap para o texto aparecer na fonte do sistema enquanto a outra carrega. Site com cinco famílias tipográficas fica lento no 4G sem ganhar nada em leitura.

9. Imagens bitmap ou vetores

Fotografia é bitmap. Logotipo, ícone e ilustração simples ficam melhores em vetor, no formato SVG, que todos os navegadores atuais exibem e que mantém a nitidez em qualquer tamanho. Para fotos, use formatos modernos como WebP ou AVIF e ofereça a mesma imagem em várias larguras com o atributo srcset. O navegador escolhe a versão adequada, e o celular deixa de baixar a foto de 2.000 pixels feita para o monitor. Imagem fora de medida é a causa mais comum de site lento que encontramos.

Design responsivo e SEO

O layout responsivo ajuda no posicionamento por três caminhos. Com um endereço só para todos os aparelhos, os links recebidos se concentram em uma página, em vez de se dividirem entre a versão comum e uma versão "m." separada. Como a indexação do Google parte da versão para celular, o que o robô lê é o mesmo que o visitante vê. E os indicadores de experiência que o Google acompanha, como tempo de carregamento e estabilidade do layout, dependem diretamente das decisões de imagem e fonte dos princípios 8 e 9.

Quem ainda está decidindo entre as abordagens encontra a comparação em site responsivo ou site mobile.

Como testar o seu site hoje

Abra o site no seu celular, usando a rede móvel em vez do Wi-Fi, e percorra esta lista:

• A página pede zoom ou rola para os lados? Se sim, falta a tag viewport ou há algum elemento com largura fixa.
• Os botões e links dão para tocar com o polegar sem acertar o vizinho? A referência das diretrizes do Google é uma área de toque em torno de 48 pixels de lado.
• O formulário abre o teclado certo, numérico para telefone e com arroba para e-mail?
• Algum conteúdo importante some no celular? Esconder blocos para caber na tela costuma tirar justamente o que o visitante procurava.
• Vire o aparelho de lado. O layout continua usável na horizontal?
• A primeira tela aparece em poucos segundos? O PageSpeed Insights, do Google, mostra o que está pesando.

No computador, as ferramentas de desenvolvedor do navegador simulam várias larguras, o que ajuda a achar o ponto exato em que o layout quebra. Se o seu site falhar em dois ou três itens da lista, o conserto costuma estar no CSS e nas imagens, sem necessidade de refazer tudo. Quando a página nem tem a tag viewport, o tema é antigo demais, e reconstruir sai mais barato do que remendar. Nosso artigo com dicas para fazer um site responsivo cobre essa etapa.