9 regras para web design responsivo

Criar web design responsivo pode ser intimidante, mas com essas 9 regras básicas para web design responsivo, seus projetos responsivos ficarão muito mais robustos e previsíveis.

Regra Nº 1: mantenha a viewport simples

Quando a meta tag viewport foi introduzida pela primeira vez, o que se dizia era que você tinha que adicionar todos os tipos de valores para evitar que as pessoas redimensionassem e para ter um tamanho de tela mínimo e máximo.

Acontece que fazer isso não é recomendado.

Só 2 coisas básicas são necessárias: definir a largura para o dispositivo em que o site será exibido e se certificar que a escala inicial seja 1 — o que significa que 1 pixel no CSS é igual a 1 pixel independentemente do dispositivo (e também evita comportamentos estranhos de zoom quando a orientação de dispositivos móveis é mudada).

Isso pode ser alcançado com um snippet simples assim:

Regra Nº 2: mobile first

É comum desenvolvedores web trabalharmos com um notebook de tela maior ou um PC com monitor de tamanho considerável e, geralmente, o cliente está mais interessado no design desktop de um projeto web.

Isso dá a impressão que é mais “natural” começar com o design do site/app para desktop e depois ir diminuindo. Mas iniciar com o design mobile primeiro (técnica conhecida como Mobile First) torna as coisas realmente mais fáceis.

Ao optar por Mobile First, isso significa que, à medida que estilos são adicionados em media queries com breakpoints cada vez maiores, coisas são adicionadas ao layout, o que é muito mais lógico.

Se você iniciar com desktop first, já começa com o estilo “cheio”, e isso significa que mais CSS terá que ser escrito para “desfazer” as coisas de desktop nos breakpoints relacionados a mobile.

Isso acarreta em escrita de mais CSS e, se você não fizer as coisas com muito cuidado, pode acontecer overflow horizontal ou texto que não cabe direito (só para citar exemplos simples).

Com mobile first, você economiza uma grande quantidade de CSS ao, simplesmente, não precisar escrevê-lo, tornando o peso total dos estilos mais leve e, consequentemente, tornando o site/app mais rápido.

Regra Nº 3: design a partir do conteúdo

Para determinar o valor de um breakpoint, você pode optar por usar valores como 320px, 768px, 1366px etc., que são mapeados para várias larguras de dispositivos reais. Basicamente, web design responsivo para dispositivos específicos.

Mas quando novos dispositivos se tornam mais populares (#375ÉONovo320), seu design pode não parecer tão bom nesses dispositivos.

Muitos desenvolvedores aconselham o uso da técnica “expanda até ficar uma merd*, aí você saberá que é hora de um breakpoint”.

Esse foco no conteúdo forçará você a pensar em sites/apps como inerentemente fluidos — o que realmente são.

Não se pode projetar para apenas larguras perfeitas de pixel, simplesmente porque elas não existem.

Regra Nº 4: use a unidade em em media queries

É aconselhado que os valores dos breakpoints sejam com a unidade em ao invés de px. Dessa maneira, as media queries ficam baseadas no conteúdo e o site tende a ficar com uma aparência melhor.

Fazer isso traz um benefício adicional, que é manter uma boa visualização mesmo para quem aumenta ou diminui o tamanho de font-size nas configurações do navegador e/ou ajusta o zoom da página.

Talvez você esteja se perguntando: e por que não rem?

A nível de media queries, rems e ems são mais ou menos a mesma coisa, então, não importa muito qual você escolha, exceto que “em” é mais rápido de escrever que “rem” — e breakpoints com rem podem apresentar alguns problemas de renderização no Safari.

Regra Nº 5: min-width ou max-width, escolha um

Web design responsivo cria um sistema incrivelmente complexo, por si só. Quando as media queries usam min-width e max-width ao mesmo tempo, ou mesmo combinações delas, aumenta-se enormemente essa complexidade e o raciocínio sobre o layout se torna ainda mais difícil.

Se todas as media queries funcionarem “para cima” ou “para baixo”, você sempre saberá onde procurar quando algo der errado e o site/app não estiver com a aparência esperada em um determinado tamanho.

Em função da Regra Nº 2, sobre mobile first, fora exceções bem pontuais, é melhor optar por min-width.

Regra Nº 6: evite dimensões fixas

Pode ser muito tentador usar dimensões fixas em elementos/componentes. Afinal, a maioria das ferramentas de design usadas atualmente (Figma, XD etc.) permitem copiar esses valores com facilidade.

Mas elementos/componentes com larguras fixas (ou margens) podem facilmente quebrar o layout quando não se toma cuidado.

Tente estilizar os tamanhos dos elementos em relação aos seus “arredores”, dando preferência a usar porcentagens ou unidades de viewport.

A não ser quando realmente necessário, evite usar width e height.

Esse vídeo pode dar uma luz à questão:

Dica rápida: caso se você acabe com uma largura quebrando o layout em algum lugar, um max-width: 100% pode fazer maravilhas. :)

Regra Nº 7: use tecnologias modernas de layout

Tecnologias modernas de layout, como Flexbox e CSS Grid, foram feitas para serem inerentemente flexíveis e dimensionados de acordo com o “ambiente”.

Se você fizer uso dessas tecnologias de layout, vai precisar de menos media queries para obter o mesmo resultado de layout. Menos media queries significa menos chance de erros e o código fica menor, mais rápido e menos complexo.

Conheça o projeto Layouts com 1 linha de CSS para (re)aprender a construir layouts comuns com Flexbox e CSS Grid e ver o quão impactante uma única linha de código CSS pode ser.

Regra Nº 8: deixe espaço para diferenças de renderização de texto

É tentador criar breakpoints exatamente no local onde ocorre uma quebra de linha desfavorável para obter aquele “pixel perfect”. Mas a Web não é (e nunca foi) pixel perfect.

Se os breakpoints estiverem muito próximos de quebras de linha legíveis, até poderão funcionar no seu navegador, mas navegadores e sistemas operacionais diferentes têm maneiras diferentes de renderizar texto — o que significa que a linha de texto pode ser alguns pixels mais larga ou menor e o layout pode quebrar.

Em vez disso, tente ser um pouco mais “solto” na definição de media queries, deixando um pouco de espaço antes de grandes mudanças no layout.

Regra Nº 9: decida direto no browser

Para seguir essas regras básicas de web design responsivo, pode não fazer sentido criar todos os breakpoints em uma ferramenta de design; por outro lado, projetar todo o site/app em navegador também é complicado.

Será que existe um meio termo ideal?

Alguns estão experimentando criar layouts em ferramenta de design com variações menos precisas de responsividade para deixar a escolha de quando colocar um breakpoint diretamente no navegador.

Por exemplo, um canvas de uma dessas ferramentas pode ter 750px de largura, mas, se no navegador, o layout já fizer sentido em 44em (ou seja, 704px), usa-se 44em no CSS.

Conclusão

Essas regras básicas de web design responsivo com certeza ajudarão você a controlar a responsividade de seus projetos Web.

Evidentemente, podem existir outras, mas, ao seguir essas 9 regras básicas de web design responsivo, com certeza você já estará apto a desenvolver layouts responsivos com muito mais facilidade e profissionalismo.

E você, acrescentaria mais quais regras/dicas de web design responsivo na lista? Comentaí.