Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. None
  2. Hello. I’m @mshwery

  3. None
  4. Make it work on all the things

  5. The web is responsive by default. Layout is a hack.

  6. None
  7. None
  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; }
  9. Don’t despair. There is hope.

  10. CSS3 Regions

  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)
  12. CSS3 Columns

  13. CSS3 Columns

  14. Flexbox display: flex FIXED FIXED

  15. Flexbox display: flex

  16. Content Folding AD AD AD AD http://css-tricks.com/content-folding/

  17. Content Folding http://css-tricks.com/content-folding/ AD AD AD AD AD AD AD

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

    } Border box box-sizing: border-box
  19. ? { width: 200px; padding: 0 5px; border: 1px; }

    Border box box-sizing: border-box
  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
  21. Collapsible Columns display: inline-block;

  22. Collapsible Columns display: inline-block;

  23. percents/ems/rems http://ux.saggezza.com/articles/root-element-sizing-in-css/

  24. percents/ems/rems http://ux.saggezza.com/articles/root-element-sizing-in-css/ "root em" html { font-size: 62.5% } body

    { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */
  25. Media Queries @media only screen and (max-device-width: 480px) {} Breakpoints

    by content/layout, not by device.
  26. Media Queries @media only screen and (max-device-width: 480px) {} Breakpoints

    by content/layout, not by device. max-width: 600px
  27. Media Queries @media only screen and (max-width: 600px) {} http://mediaqueri.es/

  28. One thumb, one eyeball What’s the method of input? Purpose

    of interaction? - Luke Wroblewski
  29. Finger vs Mouse what are people using to interact?

  30. Tap Area

  31. Tap Area http://go.microsoft.com/fwlink/?LinkID=183218 http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf Microsoft says: 34x34px Apple says: 44x44px

    8px+ between
  32. Beyond the Viewport Can you use space outside the view?

  33. Beyond the Viewport Can you use space outside the view?

    http://disney.com
  34. Beyond the Viewport Can you use space outside the view?

    http://disney.com
  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/
  36. Design for good content hierarchy. Forget about the fold.

  37. If it’s not needed on the "mobile version" Is it

    needed on larger displays?
  38. Don’t just hide stuff. Strategically load stuff (or not).

  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/
  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/
  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/
  42. Don’t radically change without reason. Consistency is a Good Idea.

  43. http://clearleft.com

  44. http://clearleft.com consistent nav

  45. http://bradfrostweb.com/blog/web/responsive-nav-patterns/ http://bradfrostweb.com/blog/web/responsive-nav-patterns/

  46. Resources christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/ bradfrost.github.com/this-is-responsive/ bradfrostweb.com/blog/web/responsive-nav-patterns/ andmag.se/2012/10/responsive-images-lazy-load-and-multiserve-images/ jordanm.co.uk/lab/responsiveroulette adobe.com/devnet/html5/articles/css3-regions.html snook.ca/archives/html_and_css/font-size-with-rem ux.saggezza.com/articles/root-element-sizing-in-css/ css-tricks.com/content-folding/

    css-tricks.com/resolution-specific-stylesheets/ paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ lukew.com/ff/entry.asp?504 uxmovement.com/forms/another-case-for-using-top-aligned-form-labels/
  47. Thanks! @mshwery