Criar um design responsivo pode ser intimidador. Existem muitas particularidades, as coisas podem ser dispostas de maneiras que você não esperava, e manter todas as várias viewports em mente ao definir um design pode ser assustador.
Mas com essas essas 9 dicas básicas de web design responsivo, seus projetos Web serão mais robustos e previsíveis e você saberá como criar um design responsivo de qualidade e fácil manutenção.
Dica #1: mantenha sua viewport simples
Quando a meta tag viewport foi introduzida pela primeira vez, era de conhecimento geral que era preciso adicionar todos os tipos de valores para impedir que os usuários redimensionassem e tivessem um tamanho mínimo e máximo de tela.
Acontece que fazer isso pode ser considerado hostil aos visitantes.
Na verdade, só são necessárias 2 coisas: definir a largura para o dispositivo em que o site é exibido e verificar se a escala inicial é 1 (o que significa que 1 pixel em seu CSS é igual a um pixel independente de dispositivo):
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
Portanto, dentre as melhores práticas para design responsivo, manter a meta tag da responsividade o mais simples possível é recomendado.
Claro que existem algumas exceções, mas, na imensa maioria dos casos, usar esse snippet é o suficiente.
Dica #2: mobile first
Muito provavelmente, você desenvolve sites em uma tela grande de laptop ou desktop e, não raramente, seu cliente pode estar mais interessado na interface de desktop do projeto.
Portanto, pode parecer natural começar com o design do site de desktop e seguir a partir daí. Mas usar a técnica de mobile first é realmente mais fácil e resultará em menos código.
Geralmente, as interfaces para dispositivos móveis são mais simples e, portanto, exigem menos CSS.
Elas quase sempre têm apenas uma coluna e não possuem muitos firulas adicionais para as quais você tem espaço em telas maiores.
Se você desenvolve no modo desktop first, já terá todo esse estilo mais complexo para escrever e, muito provavelmente, terá que “desfazer” muita coisa em seus estilos.
Adicionar CSS para “desfazer” ao invés de ir construindo aos poucos enquanto se adiciona código, definitivamente, não é interessante.
Então, você está escrevendo mais CSS e, se não está desfazendo todo o CSS com cuidado, acaba caindo em situações como overflowing, texto que não se comporta bem, necessidade de muitas media queries etc.
Com mobile first, você economiza bastante tempo (e ganha na eficiência e manutenção) simplesmente não precisando escrever, fazendo do código de qualquer projeto Web menor e mais simples de ser manutenido.
Isso traz efeitos colaterais benéficos, como ter uma base de códigos menor, consequentemente, a performance ser otimizada e por aí vai.
Dica #3: design a partir do conteúdo
Para determinar onde estarão seus breakpoints, você pode optar por usar valores como 320px, 375px, 768px e 1024px, todos mapeados para várias larguras reais de dispositivos.
Mas quando novos dispositivos se tornam mais populares, sua interface pode não parecer mais tão bom assim…
Uma dica geral para encontrar breakpoints específicos para determinado projeto é: comece a partir de telas pequenas (olha o mobile first aí de novo) e expanda até a coisa ficar ridiculamente feia e/ou sem usabilidade. Está aí uma excelente pista que é hora de adicionar um breakpoint. :)
Esse foco no conteúdo forçará você a pensar em projetos Web como inerentemente fluidos. O conceito de “pixel perfect” está obsoleto, então, para garantir a compatibilidade de suas interfaces em diferentes dispositivos, é bom procurar outras maneiras e, certamente, essa é uma boa dica para web design responsivo.
Dica #4: use a unidade em para media queries
Com larguras de dispositivos específicas que não importam mais, você também deve alternar as larguras de breakpoints em pixels para larguras em ems.
Segundo a dica anterior, suas media queries devem ser baseadas no conteúdo, portanto, isso permitirá que seu projeto Web tenha uma ótima aparência mesmo para pessoas que alteraram os tamanhos padrão de font-size de seus navegadores.
O restante do design se ajustará adequadamente a isso e tornará seu site/app mais robusto, ou seja, dê preferência em usar a unidade em para media queries por questões de compatibilidade e acessibilidade.
Dica #5: min-width ou max-width, escolha um
Web design responsivo cria um sistema de desenvolvimento incrivelmente complexo. Quando as media queries usam ambos, min-width e max-width, ou mesmo combinações delas, você aumenta enormemente a complexidade e o raciocínio necessário para entender como tudo se encaixa, tornando as coisas ainda mais difíceis.
Se todas as media queries do projeto funcionarem “para cima” ou “para baixo”, você sempre saberá onde procurar quando o projeto Web não estiver se comportando como o esperado em um determinado tamanho.
Além disso, o CSS nas novas media queries que você escreve nunca influenciará seus tamanhos anteriores.
Para ser coerente com as dicas de web design responsivo mostradas anteriormente, especialmente quanto ao mobile first, essa dica é que escolha min-width.
Mas, claro, não faz mal ter que abrir 1 ou 2 exceções a esta regrinha.
Dica #6: evite tamanhos fixos
Acredite, nós sabemos: pode ser muito tentador usar dimensões fixas para elementos.
Afinal, sua ferramenta favorita de prototipagem/interface provavelmente permite que você as copie com facilidade.
Mas, se você não tomar cuidado, elementos com larguras (ou margens) fixas podem facilmente quebrar seu layout e trazer problemas adicionais.
Algo muito comum de acontecer, aliás…
Dê preferência em estilizar os tamanhos dos elementos em relação ao “ambiente” em que se encontram. Use porcentagens ou unidades de viewport. Evite definir width e height, tentando usar suas contrapartes min- e max-.
E se você terminar com uma largura quebrando algo em algum lugar, uma max-width: 100% pode fazer maravilhas!
Dica #7: use tecnologias modernas para layout
Para expandir a regra anterior, tecnologias modernas de layout, como Flexbox e CSS Grid, são criados para serem inerentemente flexíveis e dimensionados de acordo com o ambiente.
Se você usar essas tecnologias modernas de layout, precisará de menos media queries para obter os mesmos resultados.
Menos media queries significa menos razões para ficar pensando a respeito, além de seu código ficar mais curto para inicializar.
Temos diversos tutoriais e conteúdos diversos sobre Flexbox e CSS Grid aqui no blog, e materiais a respeito dessas tecnologias não faltam pelas webs à fora — por exemplo, nosso curso completo de Flexbox e curso completos de CSS Grid no YouTube.
E também confira nosso projeto Layouts com 1 linha de CSS, com diversos exemplos de interfaces que mostram o quão impactante uma única linha de código CSS pode ser, permitindo se chegar a layouts incríveis sem o uso de media queries.
Dica #8: deixe espaço para as diferenças de renderização de texto
É tentador criar breakpoints no local em que ocorre uma quebra de linha desfavorável. Para obter aquele “pixel perfect” que o cliente faz tanta questao, claro. Mas sabemos que a Web não é pixel perfect (nem nunca foi).
Se seus breakpoints estiverem muito próximos das quebras de linha legíveis, tudo poderá funcionar bem em seu navegador, mas navegadores diferentes e sistemas operacionais diferentes têm maneiras diferentes de renderizar texto.
Em vez disso, tente não deixar as media queries tão rígidas; deixe um pouco de espaço para que algumas coisas desapareçam alguns pixels antes de grandes mudanças no design.
Via de regra, mesmo havendo determinadas quebras de texto, elas (geralmente) são um problema somente para clientes que não entendem muito bem como interfaces para a Web funcionam.
Mas, caso se depare com alguém realmente inflexível, essa dica de web design responsivo vem a calhar.
Dica #9: decida no browser
Para seguir essas dicas e melhores práticas de design responsivo, não faz sentido criar todos os seus breakpoints em uma ferramenta de criação de interfaces.
Por outro lado, também é difícil projetar um site inteiro no navegador (embora haja corajosos que façam isso).
Então, qual pode ser o meio-termo feliz?
Crie suas interfaces em uma ferramenta própria, com algumas variantes responsivas aproximadas, mas mantenha a opção de quando mudar para outro design para quando você estiver realmente trabalhando no navegador.
A artboard do Sketch pode ter 750px de largura, mas se você estiver no navegador e o layout já fizer mais sentido em 44em (ou seja, 704 pixels), use 44em em seu CSS.
E se algum “criativo” reclamar de sua decisão, exigindo o mais alto rigo do pixel perfect, agora você já sabe como justificar sua decisão. De nada.
Conclusão
Recapitulando, as 9 dicas básicas de web design responsivo são:
- Mantenha sua viewport simples
- Mobile first
- Design a partir do conteúdo
- Use a unidade em para media queries
-
min-widthoumax-width, escolha um - Evite tamanhos fixos
- Use tecnologias modernas para layout
- Deixe espaço para as diferenças de renderização de texto
- Decida no browser
Responsive web design, desde o dia em que foi “criado” (descoberto seria mais adequado), trouxe consigo novos e variados desafios.
Mas, como foi visto, há algumas dicas (ou regras?) que, se seguidas, podem deixar as coisas mais fáceis.
E você, tem mais alguma dica de web design responsivo que gostaria de compartilhar? Deixe sua dica nos comentários!