Design Responsivo

Olá galerê! Aproveitando que ontem (05/11) foi dia do Designer (Parabéns para mim e para quem trabalha nessa área!!!) e também aproveitando a deixa no post anterior sobre Acessibilidade, hoje falarei sobre Design Responsivo, destacando sua necessidade, características e um breve "tutorial" para tornar um site de design fixo (feito para desktops) em responsivo. So, let's begin!

O que é?

Há pouco tempo atrás, quando o uso da Internet em dispositivos mobile era pouco ou quase inexistente, era muito comum o desenvolvimento de websites pensando apenas em desktops, com medidas fixas baseadas nas resoluções comuns entre os monitores (800x600 ou 1024x768), porém quando ocorreu o BOOM dos smartphones e consequentemente o aumento de acesso à web proveniente destes, e também o surgimento de uma variedade de resoluções de tela, uma nova forma de layout teve de ser criada. Esta forma é o que chamamos de design responsivo, que não deve ser confundido com design fluído, já explico o porquê.

Um design fluído é aquele cujo tamanho da página web e todos elementos que a compõe podem aumentar ou diminuir proporcionalmente à tela, isto é, independente do dispositivo que estejamos utilizando, o conteúdo será redimensionado. Essa forma já é melhor do que um design fixo, porém não soluciona todos os problemas, pois se diminuirmos o conteúdo para caber numa tela de 320x480 ele ficará ilegível para o usuário. E dessa dificuldade é que surge o design responsivo, que além de ter essas características do fluído, também é responsável por adaptar o conteúdo ao dispositivo, isto é, algumas alterações nos elementos são feitas para que o usuário consiga navegar, sem que tenha de dar zoom na tela.

Bom agora que sabemos o que é um design responsivo (também chamado de adaptativo), vamos para a parte legal do assunto: trabalhar!

"Tudo bem moço, entendi o que é, mas como eu faço isso?" É só seguir as dicas abaixo e testar, testar e testar, até que dê certo!

Tutorial

Minha intenção aqui não é dar um bolo pronto, mas a receita de como fazê-lo e os ingredientes: uma página HTML já com os elementos, uma folha de estilo (de preferência externa) e força de vontade. Tendo os ingredientes, podemos começar!

1º - Nada absoluto!

Sempre que falarmos de responsividade, esqueça de unidades absolutas! Como nosso objetivo é deixar tudo proporcional, a primeira coisa que devemos fazer é converter tudo o que for fixo para relativo, como fontes e dimensões (width e height):

Fontes: Geralmente declarávamos nossas fontes em pt ou px, porém essas unidades não se adaptam ao conteúdo e tamanho da tela, portanto devemos convertê-las para em, pois essa unidade assume um valor proporcional ao contexto em que está inserida. "Como assim?" Suponhamos que declaramos o tamanho padrão da fonte de todos os parágrafos como 18px, esse valor corresponderá a 1em, seu dobro (36px) corresponderá a 2em, sua metade (9px) será igual a 0.5em, e assim por diante. Mas caso não declaremos um tamanho padrão, o próprio navegador o definirá como 16px. Nesse caso, para cada 16px teremos 1em, e disso surge a seguinte fórmula de conversão:

TAMANHO EM EM = TAMANHO EM PX / CONTEXTO

Exemplo:

Xem = 20px/16px 1.25em = 20px/16px
Obs.: Caso tenhamos um elemento dentro de outro, o valor do contexto será diferente, portanto temos de nos atentar à hierarquia e valores de cada elemento cuja fonte será convertida.

Dimensões: Assim como nas fontes, também devemos converter nossas larguras e alturas para valores proporcionais, porém aqui usaremos porcentagem. Essa conversão deve ser aplicada a todas propriedades que utilizem width e height, esteja o elemento renderizado de forma inline ou block. Alguns exemplos de propriedades em que a conversão se aplica: margin, padding, border, line-height, além é claro de width e height.

Para a conversão, a fórmula mantém-se, porém assumiremos o valor em px como 100% e o dividiremos pelo contexto. Veja um exemplo a seguir:

TAMANHO EM % = TAMANHO EM PX / CONTEXTO
X% = 300px/1000px 33.3% = 300px/1000px
Obs.: Quando não se define uma largura ou altura padrão para o body da página, é assumido o valor default igual a auto, ou seja, as dimensões serão de acordo com o conteúdo inserido.

2º - Imagens de tamanho fixo, não mais!

Isso mesmo, assim como nas dimensões dos elementos, também temos de deixar nossas imagens proporcionais ao conteúdo e ao display. Para isto, basta definir uma regra CSS às imagens que faça com que suas dimensões deixem de ser absolutas, ou seja, vamos definir a largura máxima das imagens como 100% (max-width:100%). Isso fará com que a altura se ajuste automaticamente a largura da imagem independente das dimensões da tela.

3º - Quebras de Layout, Media Queries e Meta Tags

Até aqui tudo está indo muito bem, convertemos tudo para valores proporcionais, nossas imagens já são automaticamente ajustáveis, porém há alguns problemas que ainda precisamos resolver: as quebras de layout. Geralmente ocorrem quando o conteúdo é fluído, porém ainda não foi adaptado, isto é, conforme é redimensionado, alguns elementos acabam invadindo espaços de outros elementos. Isso pode ser resolvido adicionando media queries na formatação CSS, além das meta tags, que além de adicionarem semântica, também define estilos específicos para cada dispositivo.

Por meio da meta tag, podemos definir informações referentes a largura inicial, orientação e escala da tela do dispositivo. Isso já é um grande passo para atingir o layout responsivo, porém ainda precisamos realizar as adaptações no conteúdo, e é aí que entram as media queries.

Como dito antes, elas são definidas na folha de estilos CSS, e sua principal e essencial função, é nos permitir definir formatações específicas para os elementos de nossa página de forma condicional, ou seja, permite-nos ter mais de uma formatação para a mesma página, porém em resoluções diferentes. O truque é basicamente: definir as larguras máximas para os dispositivos atuais mais usados (smartphones e tablets) e então criar regras para o conteúdo que será alterado/ adaptado ao atingir essas resoluções, isso inclui: diminuir/ aumentar espaçamentos e dimensões, exibir ou ocultar determinado elemento, entre outros.

Bom, com a faca e o queijo na mão, agora resta-nos aplicar esses conceitos na prática e sair fazendo sites responsivos e bem estruturados. Com essas dicas já dá pra fazer bastante coisa, porém é necessário testar, testar e testar, até que se atinja o objetivo. Agradeço pela atenção até aqui, até o próximo post! :)