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.

1. Responsive Web Design Workflow The state of RWD and a... JoomlaDay 2013
2. Definition
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
54. Yiannis Konstantakopoulos porcupinecolors.com twitter.com/yiannis_k