Page 247 - DCAP109_GRAPHIC_TOOLS

Graphic Tools

Notes 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).
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 called 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.

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.
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 the 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.
Questions:

1. Study and analyze the case.
2. Write down the case facts.
3. What do you infer from it?

Source: http://abduzeedo.com/responsive-web-design-case-study-zee

240 LOVELY PROFESSIONAL UNIVERSITY