Guia para Designers: Website Responsivo


Primeiramente gostaria de informar que eu não sou designer. Estou criando esse post para esclarecer as principais dúvidas que os designers costumam ter em relação à websites responsivos.

O que são Frameworks?

Sempre me perguntam o que é esse tal de Framework que eu sempre falo. Framework nada mais é do que um conjunto de elementos pré-definidos que ajudam a nós desenvolvedores não ficarmos reinventando a roda.

Nesse post trabalharei com o Bootstrap do Twitter. Há vários outros, porém a ideia desse post não é ensinar a usar frameworks front-end e sim exemplificar os conceitos de um website responsivo.

Grids

Acredito que esse seja o ponto mais importante quando estamos falando de website responsivo. Os grids são o que mandam na forma que o seu conteúdo irá aparecer.

A primeira coisa a se considerar é qual vai ser a largura do site. Por padrão o Bootstrap trabalha com 1170px de largura no modo responsivo, caso a tela seja menor que 1170px ele passa a assumir 940px, depois 724px, após isso o site fica fluido, ou seja, todos os elementos assumem 100% da página.
Temos 12 tamanhos de colunas diferentes que se encaixam perfeitamente e serão dentro dessas colunas que você colocará o conteúdo do seu site.

Veja um exemplos de colunas aqui: http://maniero.tk/bootstrap/grids.html

Mostrando e ocutando elementos

Uma prática necessária na criação de layouts responsivos é a de mostrar e ocultar elementos na página dependendo do dispositivo que está acessando o site. Um exemplo de utilização dessa prática na criação de Menus. Dificilmente um menu localizado no Header fica bom na navegação mobile, então deve ser criado uma versão para os dispositivos mobile.

Bootstrap em PSD

O Bootstrap possui diversos outros elementos que podem ser aproveitados também no layout, assim como botões icones, navbars, etc. Você pode baixar os elementos do Bootstrap em PSD aqui: http://www.bentdesignstudio.com/v2/2012/03/twitter-bootstrap-2-photoshop-template-psd/

Conclusão

Espero que esse artigo possam ajudar a vocês "amigos designers" (se é que existe amizade entre programadores e designers, hehe) a esclarecer dúvidas básicas de como funciona um website responsivo. Se surgirem dúvidas eu atualizarei essa postagem.