Design Responsivo: Grids e Texto

body {
font-size: 62.5%;
}

Bem, a lógica é simples: se 16 pixels = 100%, 10 pixels é igual a 62.5%. (16 x 0.625 = 10). Então é só definir este valor como padrão para todo o documento. Utilizando esta regrinha 1em passa a ser equivalente a 10px, o que torna bem mais fácil calcular os valores a partir de uma base decimal. É só pegar o seu valor em pixels, andar uma casa para a esquerda e colocar um ponto. Um texto de 14px, por exemplo, seria equivalente a 1.4em. Já um header com 36px seria equivalente a 3.6em. Também existe a calculadora px to em, caso você queria trabalhar diretamente com a medida EM.

O que é um grid?

Se você ainda não sabe, nós recomendamos a leitura do livro da coleção Design Básico, volume 6, dos autores Gavin Ambrose e Paul Harris. Mas basicamente um grid é um conjunto de linhas bases que fornecem uma estrutura para o seu layout (ou qualquer outro tipo de peça gráfica). A seguir vamos explicar como transformar um grid fixo de 960px em um grid flexível.

Do fixo ao relativo

Vamos supor que você recebeu do designer que trabalha com você o seguinte mock-up no Photoshop:

É um layout bem simples. Uma sidebar de 300px e uma área de conteúdo de 660px. Tudo isso dentro de um wrap de 960px. Se fossemos construir usando o método de layout fixo o CSS ficaria assim:

.wrap {
width:960px;
margin: 0 auto;
}
 
.sidebar {
width: 300px;
float: left;
}
 
.principal {
width: 660px;
float: right;
}

Para a maior parte das coisas na vida não existe uma fórmula mágica. Felizmente para construir um grid flexível existe: objeto ÷ contexto = resultado. Parece meio difícil, mas é fácil de pegar o jeito.

Vamos voltar ao nosso layout. Precisamos calcular o valor em porcentagem da sidebar e da área de conteúdo em relação ao valor total do site (960px). Esse wrap seria, neste caso, nosso contexto. Vamos começar pela sidebar. Nosso primeiro objeto alvo! Seguindo a fórmula a conta ficaria assim: sidebar ÷ wrap = resultado. Para descobrir a porcentagem é necessário multiplicar o resultado por 100. Vamos começar pela largura da sidebar. 300 ÷ 960 = 0.3125. Não arredonde esse número… Apenas coloque o ponto duas casas para a direita e acrescente o sinal de porcentagem. Ou seja: 31.25%.

.sidebar {
width: 31.25%; /* 300px / 960px */float: left;
}

Bem, para descobrir o tamanho relativo da div .principal a mecânica é a mesma. Objeto ÷ contexto = resultado. 660 ÷ 960 = 0.6875. Andando duas casas pro lado chegamos em 68.75%. E essa é a largura da nossa div .principal.

.principal {
width: 68.75%; /* 660px / 960px */float: right;
}

Você deve ter notado que deixamos os valores originais em pixel comentados. Isto não é obrigatório, mas é um bom recurso para facilitar no caso de alguma alteração no futuro.

Como lidar com o texto

Você recebe um novo arquivo com as seguintes especificações: tamanho da fonte 16px, entrelinha 24px e 40px de margem. Ok, vamos converter isto para medidas relativas. Como definimos o font-size lá no começo para 62.5% a medida do texto é o mais fácil: 1.6em.

p {
font-size: 1.6em; /*16 pixels*/}

Uma coisa meio óbvia mas que é importante lembrar sobre a relatividade é que ela é, bem, relativa. Se o contexto muda, o objeto alvo também muda. Como o nosso font-size é 1.6em o espaçamento entre as linhas tem que ser calculado com base neste novo número. Lembra da fórmula objeto ÷ contexto = resultado? Ela também vai servir para o texto. 2.4 ÷ 1.6 = 1.5. Ou seja, 1.5em. Como não estamos trabalhando com porcentagem não é necessário multiplicar por 100.

p {
font-size: 1.6em; /*16 pixels*/line-height: 1.5em; /*24 pixels*/}

Vamos ao espaçamento. Você poderia perfeitamente indicar padding como 40px. Mas não usamos nenhum pixel até agora… Pra que estragar, né? Sem contar que talvez um espaçamento de 40px fique grande demais em um celular com a tela pequena como o Blackberry. Então vamos continuar com as medidas proporcionais!

Sobre margins e paddings

Isso parece repetitivo, mas lembre-se que o contexto sempre muda. E esta é uma regrinha importante de se lembrar:

1. Quando você utilizar o parâmetro margin pra definir um elemento o seu contexto é a largura do container pai (neste caso a div .principal).
2. Quando você utilizar o parâmetro padding para definir um elemento o contexto é o tamanho do próprio elemento.

Com isso em mente vamos especificar o padding do nosso texto. Como o parágrafo está na medida EM, vamos deixar o padding como EM também! 40 ÷ 16 = 2.5em

p {
font-size: 1.6em; /*16 pixels*/line-height: 1.5em; /*24 pixels*/padding: 2.5em; /*40 pixels*/}

Alguns sistemas prontos

Antes de apelar tente fazer na prática. É mais fácil do que parece! Mas se você absolutamente não consegue fazer contas ou precisa de muita agilidade no seu projeto dá para utilizar um sistema de grid adaptável pré desenvolvido…

1140 CSS Grid

Um sistema simples e fácil de usar é o 1140 CSS Grid System desenvolvido por Andy Taylor. É um grid de 12 colunas considerando um container máximo 1140 pixels. Cada coluna tem uma classe formada pelo seu número em inglês + o sufixo col. Exemplo: .onecol, .twocol, .threecol e assim por diante. Estas colunas podem ser utilizadas em qualquer combinação que some 12 no final. Posso usar 6 vezes em uma fileira a classe .twocol, em outra posso usar três vezes a .fourcol, doze vezes a .onecol e assim por diante. O legal é que você não precisa se preocupar com contas ou com margem. Tudo se adapta elasticamente.

Skeleton

Skeleton é um boilerplate responsivo com um “esqueleto” básico de CSS para os seus layouts.

Golden Grid System

Um grid dobrável de 18 colunas. O Golden Grid acompanha um script muito útil com linhas guias para você visualizar a estrutura do grid no browser enquanto desenvolve.

Tiny fluid Grid

Um grid super leve! O Tiny Fluid Grid é legal por que você pode customizar (dentre as opções do site) o número de colunas, o tamanho das margens e a largura mínima e máxima do container.

Inuit.css

Um framework super completo. O inuit.css combina webstandarts, um ótimo reset para o CSS e um grid responsivo. É necessário instalar um plugin para gerar o grid.

Less Framework

O Lessframework contém de grid mais adaptável. Existem quatro estados estáticos do layout: 320, 480, 768, e 992 pixels. O grid perde ou ganha colunas de acordo com as mudanças da tela, mas o tamanho das colunas sempre fica o mesmo.

FrameLESS

O FrameLESS é um grid responsivo sem ser fluído. Funciona assim: o grid “cresce” para os lados coluna por coluna ao invés de pixel por pixel. Um conceito muito legal, mas para usar você precisa conhecer LESS – uma linguagem de folhas de estilo dinâmica.

the SEMANTIC grid

Isso mesmo! Um grid semântico para quem odeia sujar o código com classes como .onecol. É necessário saber usar LESS, SASS ou Stylus.

GuideGuide

Quem é designer sabe que lidar com grids no Photoshop é um pé no saco. Esse plugin facilita MUITO a sua vida. Você pode criar um grid super personalizando especificando exatamente onde você quer cada linha guia. Muito útil! Só lembrando que se você usa OSX é necessário fazer esta atualização para oAdobe Extension Manager.

Design fluído ou design responsivo?

Muita gente confunde os dois conceitos! Design fluído, ou design liquido, é uma técnica de desenvolvimento web que também utiliza medidas relativas para que o layout de um site possa aumentar ou diminuir de tamanho de acordo com o tamanho da área de visualização. Bem, nesse sentido é muito semelhante ao design responsivo. Mas as semelhanças acabam por aqui. No caso do design responsivo, não se trata apenas de esticar ou encolher os elementos visuais do site, e sim de adaptar a experiência de navegação de acordo com as necessidades de cada tipo de mídia. E estas mudanças vão muito além do tamanho do grid.

Vamos imaginar, por exemplo, que você está no meio da rua e precisa descobrir o endereço ou telefone de um restaurante. Você saca o seu smartphone do bolso e tem uma péssima surpresa: a recepção da área é horrível! O sinal da internet só pega em modo EDGE (conexão mais lenta que a 3G). Depois de alguns minutos, que pareceram séculos, o site do restaurante até abre no seu celular… mas como ele é liquido a sidebar ocupa 30% da tela. Os links do menu são tão pequenos que você não consegue nem clicar! A experiência é tão frustrante que você até desiste de encontrar o endereço e decide comer em outro lugar!

Mas, se o site do nosso restaurante imaginário fosse responsivo, o menu lateral poderia ser transplantado para o topo do site, com os links com um tamanho maior pensando em uma interface touch! Ou, para aproveitar ainda mais o espaço, o menu poderia ser um campo de formulário tipo select. Super prático! Alguns elementos como imagens grandes meramente decorativas poderiam ser substituídos por versões menores e mais leves (ou nem existir). Isto tudo sem a necessidade de um novo html em uma versão mobile.

Dica para estudos

Lembra o Ethan Marcotte, o cara que inventou o design responsivo? Então, ele tem um livro muito completo sobre esse assunto: A Book Apart, Responsive Web Design.