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:

Responsive Web Design, by Ethan Marcotte
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).

Responsive website case study: Zee
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.

Responsive website case study: Zee
Layout para resolução até 640px

Responsive website case study: Zee
Layout para resolução até 1024px

Responsive website case study: Zee
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.

Responsive website case study: Zee
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 ;)


Responsive website case study: Zee

About the author of this post

I’m a UX / Web designer and manage business and projects at Zee. Also I love to spend some hours on our main projects Openjobs and as a writer and contributor here on Abduzeedo..

Also, you can take a look on my personal website.