Responsive Web Design Workflow

Responsive Web Design Workflow

A short intro to the state of Responsive Web Design and a list of tools and techniques that can help us develop decent responsive websites.

Transcript

  1. Responsive Web Design Workflow The state of RWD and a...

    JoomlaDay 2013
  2. Definition

  3. None
  4. Definition “The practice consists of a mix of flexible grids

    and layouts, images and an intelligent use of CSS media queries.“ -bit.ly/m3ap1L
  5. Where we are

  6. Where we are 5,210,000 - June 2012

  7. Where we are 46,610,000 - June 2013

  8. Where we are

  9. Where we are

  10. Where we are

  11. Where we are

  12. Where we are

  13. Where we are

  14. Where we are

  15. Where we are

  16. Where we are

  17. Where we are

  18. Browser Support Where we are ~83% - June 2012 -bit.ly/GsHMm

  19. Browser Support Where we are ~91% - June 2013 -bit.ly/GsHMm

  20. 7 8 (Far from) Browser Support Kill these agent(s) X

    Where we are
  21. Where we are Don’t forget: + RWD = -bit.ly/LsYjA6

  22. Workflow

  23. Philosophy of breakpoints

  24. Workflow > Philosophy of breakpoints Jeremy Keith “I don’t think

    it’s desirable to have a “standard” handful of screen widths, any more than it’s desirable to have a single rendering engine in every browser“ -bit.ly/IyLnvL
  25. Workflow > Philosophy of breakpoints Stephen Hay “We do have

    to start somewhere“ -bit.ly/1aZVILN
  26. Workflow > Philosophy of breakpoints -bit.ly/12BjSsO

  27. SASS Syntactically Awesome Stylesheets .scss > .css -bit.ly/3wRpzR

  28. Workflow > SASS $radius: 1px; $golden: 1.618rem; $shadow: 0 1px

    12px rgba(0, 0, 0, 0.1); a.call { margin: $golden*2 auto; -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } Variables
  29. Workflow > SASS Mixins @mixin rounded-shadowed{ -webkit-border-radius: $radius; -moz-border-radius: $radius;

    border-radius: $radius; -webkit-box-shadow: $shadow; -moz-box-shadow: $shadow; box-shadow: $shadow; } body.work figure img{ margin: $golden auto; @include rounded-shadowed }
  30. Workflow > SASS Nesting table.hl { margin: 2em 0; td.ln

    { text-align: right; } } li { font: { family: serif; weight: bold; size: 1.2em; } }
  31. Zen Grids -bit.ly/AoG8vG

  32. Workflow > Zen Grids <div class="container"> <article class="content"> The main

    content. We like semantic HTML ordering. </article> <aside class="aside1"> An aside. </aside> <aside class="aside2"> Another aside. </aside> <footer class="footer1"> A footer. </footer> <footer class="footer2"> Another footer. </footer> </div>
  33. Workflow > Zen Grids .container { @include zen-grid-container; $zen-column-count: 7;

    $zen-gutter-width: 10px; width: 80%; max-width: 1240px; } .aside1 { @include zen-grid-item(2, 1); } .content { @include zen-grid-item(4, 3); } .aside2 { @include zen-grid-item(1, 7); } .footer1 { @include zen-grid-item(3, 5); } .footer2 { @include zen-grid-item(4, 1); }
  34. Workflow > Zen Grids @include zen-grid-item(2, 1) @include zen-grid-item(4, 3)

    @include zen-grid-item(1, 7) @include zen-grid-item(3, 5) @include zen-grid-item(4, 1)
  35. Media

  36. Workflow > Media img{ width:auto; */ IE8 and below */

    max-width: 100%; height:auto; */ if you specify image width & height in your HTML */ }
  37. -bit.ly/nid1yz Workflow > Media Chris Coyer & Paravel: FitVid.js

  38. Workflow > Media Almost there...

  39. -bit.ly/yvfcXm Workflow > Responsive Tables <div data-picture data-alt="Look ma, many

    images!"> <div data-src="small.jpg"></div> <div data-src="medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="large.jpg" data-media="(min-width: 800px)"></div> <div data-src="largeX2.jpg" data-media="(min-width: 1000px) and (min- device-pixel-ratio: 2.0)"></div> </div> Scott Jehl: picturefill.js
  40. Responsive Typography

  41. -bit.ly/ZzkdOZ Workflow > Responsive Typography

  42. -bit.ly/ZCE2nh -Photo by Wilson Miner Workflow > Responsive Typography 100%

    is NOT big
  43. Workflow > Responsive Typography html { font-size: 62.5%; */ 16px*0.625=10px=1em

    */ line-height: 1.5; } p{ font-size: 16px; */ IE8 and below */ font-size: 1.6rem; */ rem=RootEM - 1.6*10px=16px */ }
  44. @media all and (max-width: 768px) { html { font-size: 58%;

    */ 16px*0.58=9px */ } } */ p{ font-size: 16px; font-size: 1.6rem; */ 9*1.6=14.4px */ } */ Workflow > Responsive Typography
  45. -bit.ly/Vr0RbL Workflow > Responsive Typography

  46. Responsive Navigation

  47. -bit.ly/MSO7oL Workflow > Responsive Navigation >1024px <1024px

  48. -bit.ly/MSO7oL Workflow > Responsive Navigation Jason Weaver: flexnav.js <div class="menu-button">Navigation</div>

    <nav role="navigation"> <ul data-breakpoint="1024" class="flexnav"> <li>...</li> <li>...</li> <li>...</li> </ul> </nav>
  49. Responsive Tables

  50. Workflow > Responsive Tables /* Attach the Table CSS and

    Javascript */ <link rel="stylesheet" href="responsive-tables.css"> <script src="stylesheet" href="responsive-tables.js"</script> ... ... ... <table class=”responsive”> <tr>... ZURB: responsive-tables.js
  51. Workflow > Responsive Tables

  52. Workflow -Philosophy of breakpoints -SASS -Zen Grids -Media (images &

    video) -Responsive Typography -Navigation -Tables
  53. None
  54. Yiannis Konstantakopoulos porcupinecolors.com twitter.com/yiannis_k