Responsive Web Design Workflow

  • View
    826

  • Download
    0

Embed Size (px)

DESCRIPTION

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.

Text of Responsive Web Design Workflow

  • 1. Responsive WebDesign WorkowThe state of RWD and a...JoomlaDay 2013
  • 2. Denition
  • 3. DenitionThe practice consists of a mix of exible gridsand layouts, images and an intelligent use ofCSS media queries.-bit.ly/m3ap1L
  • 4. Where we are
  • 5. Where we are5,210,000 - June 2012
  • 6. Where we are46,610,000 - June 2013
  • 7. Where we are
  • 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. Browser SupportWhere we are~83% - June 2012-bit.ly/GsHMm
  • 18. Browser SupportWhere we are~91% - June 2013-bit.ly/GsHMm
  • 19. 7 8(Far from) Browser SupportKill these agent(s)XWhere we are
  • 20. Where we areDont forget:+ RWD =-bit.ly/LsYjA6
  • 21. Workow
  • 22. Philosophy ofbreakpoints
  • 23. Workow > Philosophy of breakpointsJeremy KeithI dont think its desirable to have a standardhandful of screen widths, any more than itsdesirable to have a single rendering engine inevery browser-bit.ly/IyLnvL
  • 24. Workow > Philosophy of breakpointsStephen HayWe do have to start somewhere-bit.ly/1aZVILN
  • 25. Workow > Philosophy of breakpoints-bit.ly/12BjSsO
  • 26. SASSSyntactically Awesome Stylesheets.scss > .css-bit.ly/3wRpzR
  • 27. Workow > 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. Workow > 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. Workow > SASSNestingtable.hl {margin: 2em 0;td.ln {text-align: right;}}li {font: {family: serif;weight: bold;size: 1.2em;}}
  • 30. Zen Grids-bit.ly/AoG8vG
  • 31. Workow > Zen Grids
    The main content. We like semantic HTML ordering.An aside.Another aside.A footer.Another footer.
  • 32. Workow > 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. Workow > 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. Media
  • 35. Workow > Mediaimg{width:auto; */ IE8 and below */max-width: 100%;height:auto; */ if you specify image width & height in your HTML */}
  • 36. -bit.ly/nid1yzWorkow > MediaChris Coyer & Paravel: FitVid.js
  • 37. Workow > MediaAlmost there...
  • 38. -bit.ly/yvfcXmWorkow > Responsive TablesScott Jehl: picturefill.js
  • 39. Responsive Typography
  • 40. -bit.ly/ZzkdOZWorkow > Responsive Typography
  • 41. -bit.ly/ZCE2nh-Photo by Wilson MinerWorkow > Responsive Typography100% is NOT big
  • 42. Workow > 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. @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 */} */Workow > Responsive Typography
  • 44. -bit.ly/Vr0RbLWorkow > Responsive Typography
  • 45.