Responsive Design Decisions

84eac3a27d1acf0ef0d835d92c999b0d?s=47 Matt Shwery
February 28, 2013

Responsive Design Decisions

Tips & tricks for achieving device-agnosticism. Unfortunately it's really tricky to make layout work for you. Css has a lot of promise in W3C proposals, but we're not quite there yet.

In the meantime, here are some good guidelines to help you with design decisions.

84eac3a27d1acf0ef0d835d92c999b0d?s=128

Matt Shwery

February 28, 2013
Tweet

Transcript

  1. 1.
  2. 3.
  3. 6.
  4. 7.
  5. 8.

    .clearfix:after { visibility: hidden; display: block; font-size: 0; content: “

    ”; clear: both; height: 0; } .clearfix { display: inline-block; } *html .clearfix { height: 1%; } .clearfix { display: block; }
  6. 11.

    CSS3 Regions * supported in WebKit Nightly using -webkit-flow-into: flow_name;

    and -webkit-from-flow: flow_name;. * can enable in Chrome 19+ using a runtime flag (see about:flags)
  7. 18.

    = 212px { width: 200px; padding: 0 5px; border: 1px;

    } Border box box-sizing: border-box
  8. 19.

    ? { width: 200px; padding: 0 5px; border: 1px; }

    Border box box-sizing: border-box
  9. 20.

    Border box box-sizing: border-box (IE8+ and all major browsers) {

    width: 188px; padding: 0 5px; border: 1px; } { box-sizing: border-box; width: 200px; padding: 0 5px; border: 1px; } Requires math No math
  10. 24.
  11. 26.

    Media Queries @media only screen and (max-device-width: 480px) {} Breakpoints

    by content/layout, not by device. max-width: 600px
  12. 28.
  13. 30.
  14. 35.

    Label alignment Do your forms have to use horizontally-aligned labels?

    http://www.lukew.com/ff/entry.asp?504 http://uxmovement.com/forms/another-case-for-using-top-aligned-form-labels/
  15. 39.

    Responsive images? Lots of conflicting W3C proposals. Detect max−device−width to

    conditionally load media sizes. http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/
  16. 40.

    Conditional Stylesheets? Nope. · conditional stylesheets mean 1 or 2

    extra HTTP requests · they are blocking (page render waits until load completes) · deviates from the rest of your well-organized code · media-specific stylesheets have poor browser support http://css-tricks.com/resolution-specific-stylesheets/ http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
  17. 41.

    Conditional Stylesheets? Nope. Check out Paul Irish's solution (ships with

    HTML5 boilerplate): <!--[if lt IE 7]> <html class="ie6"> <![endif]--> <!--[if IE 7]> <html class="ie7"> <![endif]--> <!--[if IE 8]> <html class="ie8"> <![endif]--> <!--[if gt IE 8]><!--> <html> <!--<![endif]--> http://css-tricks.com/resolution-specific-stylesheets/ http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/