Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

More Decks by Yiannis Konstantakopoulos

Other Decks in Design

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