9 dicas básicas de web design responsivo

Web design responsivo já surgiu trazendo novas questões e desafios. Conheça 9 dicas básicas de web design responsivo para ajudar.

Ir para o artigo

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 regras básicas de web design responsivo, seus projetos Web responsivos serão mais robustos e previsíveis.

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 é realmente hostil aos visitantes.

Realmente 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):

Dica #2: mobile first

Muito provavelmente, você desenvolve sites em uma tela grande de laptop ou desktop e, geralmente, seu cliente está mais interessado no design de desktop de um site; 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 views para dispositivos móveis são muito 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.

Uma das dicas para web design responsivo é usar mobile first.

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. 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 etc.

Com mobile first, você economiza um grande pedaço de CSS simplesmente não precisando escrever, tornando-o menor e mais simples de ser manutenido — além de efeitos colaterais benéficos, como seu projeto Web ficar mais rápido.

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, seu design 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 (mobile first) e expanda até a coisa ficar ridiculamente feia e/ou sem usabilidade. Eis o ponto para adicionar um breakpoint.

Esse foco no conteúdo forçará você a pensar em projetos Web como inerentemente fluidos. Você não pode pensar em projetar apenas com larguras “pixel perfect” mente, simplesmente porque elas não existem!

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.

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 suas media queries 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 mostradas anteriormente, especialmente quanto ao mobile first — e a experiência do dia-a-dia também ajuda a corroborar –, nossa dica é que escolha min-width — e não fique tão chateado se tiver 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 layout/prototipagem 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.

Tente 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.

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, o que significa que a linha de texto pode ter um pixel de largura maior ou menor e seu design pode quebrar.

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.

Dica #9: decida no browser

Para seguir essas dicas, não faz sentido criar todos os seus breakpoints em uma ferramenta de design. Por outro lado, também é difícil projetar o site inteiro em um navegador (embora haja corajosos que façam isso). Então, qual pode ser o meio-termo feliz?

Crie seus designs em uma ferramenta de design, 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:

  1. Mantenha sua viewport simples
  2. Mobile first
  3. Design a partir do conteúdo
  4. Use a unidade em para media queries
  5. min-width ou max-width, escolha um
  6. Evite tamanhos fixos
  7. Use tecnologias modernas para layout
  8. Deixe espaço para as diferenças de renderização de texto
  9. 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!

E-book com 10 dicas para montar seu portfolio altamente eficiente e conseguir muito mais clientes e projetos!

Download GRÁTIS