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
   

   View Slide

2. Definition
   

   View Slide

3. View Slide

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
   

   View Slide

5. Where we are
   

   View Slide

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

   View Slide

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

   View Slide

8. Where we are
   

   View Slide

9. Where we are
   

   View Slide

10. Where we are
    

    View Slide

11. Where we are
    

    View Slide

12. Where we are
    

    View Slide

13. Where we are
    

    View Slide

14. Where we are
    

    View Slide

15. Where we are
    

    View Slide

16. Where we are
    

    View Slide

17. Where we are
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. Workflow
    

    View Slide

23. Philosophy of
    breakpoints
    

    View Slide

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
    

    View Slide

25. Workflow > Philosophy of breakpoints
    Stephen Hay
    “We do have to start somewhere“
    -bit.ly/1aZVILN
    

    View Slide

26. Workflow > Philosophy of breakpoints
    -bit.ly/12BjSsO
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    }
    

    View Slide

30. Workflow > SASS
    Nesting
    table.hl {
    margin: 2em 0;
    td.ln {
    text-align: right;
    }
    }
    li {
    font: {
    family: serif;
    weight: bold;
    size: 1.2em;
    }
    }
    

    View Slide

31. Zen Grids
    -bit.ly/AoG8vG
    

    View Slide

32. Workflow > Zen Grids
    
    
    The main content. We like semantic HTML ordering.
    
    
    An aside.
    
    
    Another aside.
    
    
    A footer.
    
    
    Another footer.
    
    
    

    View Slide

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); }
    

    View Slide

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)
    

    View Slide

35. Media
    

    View Slide

36. Workflow > Media
    img{
    width:auto; */ IE8 and below */
    max-width: 100%;
    height:auto; */ if you specify image width & height in your HTML */
    }
    

    View Slide

37. -bit.ly/nid1yz
    Workflow > Media
    Chris Coyer & Paravel: FitVid.js
    

    View Slide

38. Workflow > Media
    Almost there...
    

    View Slide

39. -bit.ly/yvfcXm
    Workflow > Responsive Tables
    
    
    
    
    
    
    Scott Jehl: picturefill.js
    

    View Slide

40. Responsive Typography
    

    View Slide

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

    View Slide

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

    View Slide

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 */
    }
    

    View Slide

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
    

    View Slide

45. -bit.ly/Vr0RbL
    Workflow > Responsive Typography
    

    View Slide

46. Responsive Navigation
    

    View Slide

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

    View Slide

48. -bit.ly/MSO7oL
    Workflow > Responsive Navigation
    Jason Weaver: flexnav.js
    Navigation
    
    
    ...
    ...
    ...
    
    
    

    View Slide

49. Responsive Tables
    

    View Slide

50. Workflow > Responsive Tables
    /* Attach the Table CSS and Javascript */
    
    <br/>...<br/>...<br/>...<br/><table class=”responsive”><br/><tr>...<br/>ZURB: responsive-tables.js<br/>

    View Slide

51. Workflow > Responsive Tables
    

    View Slide

52. Workflow
    -Philosophy of breakpoints
    -SASS
    -Zen Grids
    -Media (images & video)
    -Responsive Typography
    -Navigation
    -Tables
    

    View Slide

53. View Slide

54. Yiannis Konstantakopoulos
    porcupinecolors.com
    twitter.com/yiannis_k
    

    View Slide