Responsive Webdesing and the little dirty secret behind fluid-grids

Get a small overview about responsive Webdesign, dive into the problem of rounding errors in browsers, and see the dirt behind fluid-grids.

Transcript

1. Responsive WebDesign and the dirty little secret behind fluid-grids Liip AG, Marcel Hauri twitter.com/mhauri
2. Let‘s talk about ... • Responsive webdesign, a short introduction / refreshment. • The dirty little secret behind fluid-grids* * http://palantir.net/blog/responsive-design-s-dirty-little-secret
3. What is it? Responsive web design* is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices. * http://en.wikipedia.org/wiki/Responsive_web_design
4. What not? • It‘s not a special site/subdomain for mobile devices like m.domain.com • Responsive webdesign is not mobile design. • That means: It loads more content than necessary
5. How does it work? • It‘s based on... • ... a flexible, grid layout get rid of pixel percise layouts, use percentages instead, like fluid grids • ... flexible images and media img, video, object {max-width:100%}; • ... Media Queries @media all and (min-width:500px) { ... your css code ... } • Depends on the Viewport. Definition of Responsive Webdesign by Ethan Marcotte
6. Media Queries • A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. <link rel="stylesheet" media="screen and (min-width:500px)" href="mobile.css" /> • A media query is a logical expression that is either true or false. • More information: http://www.w3.org/TR/ css3-mediaqueries/
7. The Viewport Meta Tag <meta name="viewport" content="...=..."> width Enter a number (pixels assumed), or the keyword "device-width" to set the viewport to the physical width of the device's screen. height Enter a number (pixels assumed), or the keyword "device-height" to set the viewport to the physical height of the device's screen. initial-scale The initial zoom of the webpage, where a value of 1.0 means no zoom. minimum-scale The minimum level the user is able to zoom out of a webpage, where a value of 1.0 means the user isn't able to at all. maximum-scale The maximum level the user is able to zoom in on a webpage, where a value of 1.0 means the user isn't able to at all. user-scalable Sets whether the user can zoom in and out of a webpage. Set to yes or no. To fix orientation changes on Apple devices
8. The Viewport Meta Tag • Is the key to prepare a page for mobile devices optimization. • If you forget it, your mobile browser still thinks it's a desktop browser.
10. The dirty little secret ... Do you remind this sentence: „get rid of pixel percise layouts, use percentages instead, like fluid grids“ This makes sense right? Yes, but...
11. The dirty little secret ... The truth is that fluid grids are broken. Because fluid grids have a dirty little secret rounding errors
12. Let‘s do some math An Example: On a 6 column grid, each column is 100% ÷ 6 = 16.666667% wide. Means on a 1000px wide viewport a column is equal to 166.66667px per column. Sounds correct, but where is the problem?
13. The problem Now, there are no guidelines and browser vendors are free to make their own rules. If a browser were to round to the nearest pixel, we’d arrive at 167px. But 167 x 6 = 1002px If he does the opposite and rounded down to 166px we are 4px away of a perfect fitting all columns into our viewport.
14. The problem Now, there are no guidelines and browser vendors are free to make their own rules. If a browser were to round to the nearest pixel, we’d arrive at 167px. But 167 x 6 = 1002px If he does the opposite and rounded down to 166px we are 4px away of a perfect fitting all columns into our viewport. IE 6, 7 & 8 Safari, “Chrome“ & Opera
15. What‘s about... .. Firefox? Firefox implemented a innovative solution called sub-pixel rendering. This will retain the sub-pixel values for all CSS properties. When an element's positioning depends on the properties of previous elements, the sub-pixel values will be used in the calculations.
16. Examples Safari 6 Chrome 21 Opera 12 IE 8 Firefox 13 the rounding errors in different browsers Thx to: http://johnalbin.github.com/fluid-grid-rounding-errors/
17. 6 columns example CSS HTML .container { *position: relative; *zoom: 1; width: 100%; overflow: hidden; } .column { width: 16.66667%; float: left; } <div class="container"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> <div class="column">5</div> <div class="column">6</div> </div> The normal “float:left“ method
18. 6 columns example The normal “float:left“ method Safari 6.0.2 - still rounded down and let 4px away at the end
19. 6 columns example The normal “float:left“ method Same for Opera 12 and Chrome 21
20. 6 columns example The normal “float:left“ method Same for Opera 12 and Chrome 21 Fixed in Chrome 23
21. 6 columns example The normal “float:left“ method completely worse in IE 6, 7 & 8 thx to round up
22. 6 columns example CSS HTML .container { ... same as before ... } .column { ... same as before ... } .z1 { margin-left: 0; margin-right: -16.6666666666667%; } .z2 { margin-left: 16.6666666666667%; margin-right: -33.3333333333333%; } .z3 { margin-left: 33.3333333333333%; margin-right: -50%; } etc..... <div class="container"> <div class="column z1">1</div> <div class="column z2">2</div> <div class="column z3">3</div> <div class="column z4">4</div> <div class="column z5">5</div> <div class="column z6">6</div> </div> “Fix it“ with the Zen method
23. 6 columns example The Zen method Safari 6.0.2 - split the pixels between columns which is less worse than before
24. 6 columns example The Zen method Same for Opera 12, Chrome 21 & IE 6, 7 & 8
25. and Firefox Works also in Chrome 23
26. Conclusion If you have to be “pixel precise“ in a responsive webdesign (mostly thx to designers) don‘t forget this rounding error in browsers and how you can solve it. If you start a new project and you have the option to use a Framework like Twitter‘s Bootstrap, Foundation, CSS grid etc. use it! It already solves these kind of problems for you.
27. Questions?