Estudo de caso Web Design Responsivo: Zee

Semana passada lançamos o novo site da Zee (minha empresa aqui no Brasil). Uma única página, apresentando os trabalhos, a empresa, foco no conteúdo e design simples. Mas resolvi escrever este estudo de caso pois o principal desafio foi desenvolver o site totalmente responsivo. E como este é um assunto muito forte em web hoje, vou mostrar como foi o processo de criação dele.

Mesmo sendo um assunto bastante falado, vale deixar ao menos uma definição aqui sobre o que é responsive web design:

Responsive Web Design (RWD) essentially indicates that a web site is crafted to use CSS3 media queries, an extension of the @media rule, with fluid proportion-based grids (which use percentages and EMs instead of pixels), to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling. - Wikipedia

Resumindo: 1 único código, 1 único CSS e o layout fluído e otimizado para todos os dispositivos.

Não vou aqui mostrar um tutorial sobre desenvolver um projeto responsive, existem diversos artigos e livros ótimos sobre isso. Abaixo segue minhas referências de estudo sobre o assunto:

• Livro: Responsive Web Design, de Ethan Marcotte
• Build a responsive site in a week: designing responsively - .net magazine
• Responsive Web Design: What It Is and How To Use It - Smashing Magazine
• Responsive Web Design Techniques, Tools and Design Strategies - Smashing Magazine
• A Primer on Responsive Design : From Content to Development - UX Magazine

Responsive Web Design, by Ethan Marcotte

Breakpoints

A primeira coisa feita no projeto foi definir os breakpoints, a quantidade de mudanças de layout que ocorrerão. É praticamente impossível se fazer um design diferente para todas as resoluções e dispositivos existentes hoje, então estipulamos as resoluções que serão os base de design e mantemos o layout totalmente fluído entre elas. Neste caso foram utilizados os seguintes breakpoints: 640px, 1024px e 1280px (sendo que 1280 é o limite de width).

Wireframes apresentando as 3 resoluções base

Mobile first

Como teremos 3 resoluções bases, teremos 3 layouts diferentes. Surge então a dúvida: por qual resolução começo layout? Iniciar por mobile é muito mais interessante e recomendado, pois conseguimos focar no que é realmente importante e ir incrementando na medida que as resoluções aumentam. Existem diversos artigos também sobre esta questão, e aconselho muito outro livro do A Book Apart, que se chama Mobile Firts, de Luke Wroblewksi.

Layouts

Agora que estamos com a arquitetura de informação criada é o momento de inciar os layouts. Neste ponto vai da metodologia de cada um, eu prefiro fazer wireframes no papel, pois é rápido de propor e corrigir, e após definida a base da arquitetura já partir para layout. Muita coisa muda no momento do layout e não vejo vantagem em questão de produtividade em se investir mais tempo em um wireframe detalhado.

Layout para resolução até 640px

Layout para resolução até 1024px

Layout para resolução até 1280px

Media queries

Layouts prontos, hora de botar a mão na massa e fazer a mágica acontecer. Em questão de código utilizo aqui o HTML5 Boilerplate e jQuery. Mas o que realmente faz a quebra dos layouts entre as resoluções é media querie. CSS3 tem essa propriedade que é fantástica, a documentação sobre isso é extensa no w3c.org, mas para simplificar a explicação aqui, utilizo basicamente as definições de width para fazer os breakpoints.

Uso de media queries em CSS3

Widths em "%". Textos em "em".

A grande sacada além dos media queries é trabalhar todos os widths em % pois isso mantém ele fluído entre os breakpoints. (Aqui pode se preparar que a matemática vai fazer pegar fumaça no cérebro!). E os textos também, sempre "em" ao invés de pixels.

Resultado

O resultado pode ser visto direto no site zee.com.br. Se não puder testar em outros dispositivos, confere nesse link: responsive.is.

Lembrando, o Abduzeedo também é responsivo! Pode testar ele no iPhone, iPad, Android ou até mesmo neste link aí de cima para ver como se comparta ;)