Responsive Webdesing and the little dirty secret behind fluid-grids

961dfec60de2d5e3338cc85f65f43391?s=47 Marcel Hauri
November 15, 2012

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.

961dfec60de2d5e3338cc85f65f43391?s=128

Marcel Hauri

November 15, 2012
Tweet

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.
  9. None
  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?