Responsive web design case study: Zee

Last week we launched the new Zee website - Zee is my company here in Brazil. We did the site in a single page, presenting the company, our works and keeping the focus on content and in a simple design. I decided to write this case study because the main challenge we faced was to develop a totally responsive site, and since lately this is a strong web subject, I decided to show how was the creative process of the new Zee layout. I know this matter is all around the web, but a definition about responsive design always come handy: 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 Summarizing: 1 code, 1 CSS and a fluid and optimized layout to all devices. This is not a tutorial about developing a responsive project, is a case study. But there are a lot of articles and books about this, so here are a few references: 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 The first thing we did was to set the breakpoints, the amount of changes in the layout. It is almost impossible to do a different design to all resolutions and devices available today, so we decided the resolutions that would be the base of the design and kept a fluid design between these resolutions. In our case we are using the following breakpoints: 640px, 1024px e 1280px (remembering that 1280 is the width limit). Wireframes showing the 3 base resoluções Mobile first As we will have 3 base resolutions, we will have 3 different layouts. With this comes a common question: which layout I should pick to start? Starting with mobile is much more interesting and recommended, because this way we can keep the focus on important things so we can add other elements as the resolutions increase. There are a lot of articles about this issue and I suggest a really good book from A Book Apart callled Mobile First, Luke Wroblewksi. Layouts Now that we created the information architecture it is time to create the layouts. This part depends on your methodology, I like to do wireframes on paper, because this way I can correct and try things faster. After defining the base of the architecture is time to go to the layout. A lot of things change in the moment we create the layout so I don't see a productivity advantage in investing time on detailed wireframes. Layout for 640px resolution Layout for 1024px resolution Layout for 1280px resolution Media queries Layouts are ready, time to work to make some magic happen. In terms of code I used HTML5 Boilerplate and jQuery. But what actually make the layouts break between resolutions is the media querie. CSS3 has this fantastic property and the documentations about this is huge on w3c.org, but to simplify the explanation, here I used basically the width definition to do the breakpoints. Use of CSS3 media queries Widths in "%". Texts in "em". The big thing here is, apart from the media queries, to work with the widths in % because this keep the fluidity between breakpoints. (Be prepared because in this part math will take over your brain!). And the texts too, always in "em" instead of pixels. Result You can check the result on ou website: zee.com.br. In case you can't test in other devices use this link: responsive.is. And remember that Abduzeedo is also responsive! You can try it on iPhone, iPad, Android or even on this link I shared to see how the site behaves ;)