Responsive Web Design Workflow

1,091 views

Published on

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.

Published in: Design, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,091
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
15
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Responsive Web Design Workflow

  1. 1. Responsive WebDesign WorkflowThe state of RWD and a...JoomlaDay 2013
  2. 2. Definition
  3. 3. Definition“The practice consists of a mix of flexible gridsand layouts, images and an intelligent use ofCSS media queries.“-bit.ly/m3ap1L
  4. 4. Where we are
  5. 5. Where we are5,210,000 - June 2012
  6. 6. Where we are46,610,000 - June 2013
  7. 7. Where we are
  8. 8. Where we are
  9. 9. Where we are
  10. 10. Where we are
  11. 11. Where we are
  12. 12. Where we are
  13. 13. Where we are
  14. 14. Where we are
  15. 15. Where we are
  16. 16. Where we are
  17. 17. Browser SupportWhere we are~83% - June 2012-bit.ly/GsHMm
  18. 18. Browser SupportWhere we are~91% - June 2013-bit.ly/GsHMm
  19. 19. 7 8(Far from) Browser SupportKill these agent(s)XWhere we are
  20. 20. Where we areDon’t forget:+ RWD =-bit.ly/LsYjA6
  21. 21. Workflow
  22. 22. Philosophy ofbreakpoints
  23. 23. Workflow > Philosophy of breakpointsJeremy Keith“I don’t think it’s desirable to have a “standard”handful of screen widths, any more than it’sdesirable to have a single rendering engine inevery browser“-bit.ly/IyLnvL
  24. 24. Workflow > Philosophy of breakpointsStephen Hay“We do have to start somewhere“-bit.ly/1aZVILN
  25. 25. Workflow > Philosophy of breakpoints-bit.ly/12BjSsO
  26. 26. SASSSyntactically Awesome Stylesheets.scss > .css-bit.ly/3wRpzR
  27. 27. 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
  28. 28. Workflow > SASSMixins@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}
  29. 29. Workflow > SASSNestingtable.hl {margin: 2em 0;td.ln {text-align: right;}}li {font: {family: serif;weight: bold;size: 1.2em;}}
  30. 30. Zen Grids-bit.ly/AoG8vG
  31. 31. 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>
  32. 32. 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); }
  33. 33. Workflow > Zen Grids@include zen-grid-item(2, 1) @include zen-grid-item(4, 3)@includezen-grid-item(1, 7)@include zen-grid-item(3, 5)@include zen-grid-item(4, 1)
  34. 34. Media
  35. 35. Workflow > Mediaimg{width:auto; */ IE8 and below */max-width: 100%;height:auto; */ if you specify image width & height in your HTML */}
  36. 36. -bit.ly/nid1yzWorkflow > MediaChris Coyer & Paravel: FitVid.js
  37. 37. Workflow > MediaAlmost there...
  38. 38. -bit.ly/yvfcXmWorkflow > 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
  39. 39. Responsive Typography
  40. 40. -bit.ly/ZzkdOZWorkflow > Responsive Typography
  41. 41. -bit.ly/ZCE2nh-Photo by Wilson MinerWorkflow > Responsive Typography100% is NOT big
  42. 42. Workflow > Responsive Typographyhtml {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 */}
  43. 43. @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
  44. 44. -bit.ly/Vr0RbLWorkflow > Responsive Typography
  45. 45. Responsive Navigation
  46. 46. -bit.ly/MSO7oLWorkflow > Responsive Navigation>1024px<1024px
  47. 47. -bit.ly/MSO7oLWorkflow > Responsive NavigationJason 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>
  48. 48. Responsive Tables
  49. 49. 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
  50. 50. Workflow > Responsive Tables
  51. 51. Workflow-Philosophy of breakpoints-SASS-Zen Grids-Media (images & video)-Responsive Typography-Navigation-Tables 
  52. 52. Yiannis Konstantakopoulosporcupinecolors.comtwitter.com/yiannis_k

×