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

Build Responsively, 2013, Artifact, Providence, RI

Ben Callahan
November 06, 2013

Build Responsively, 2013, Artifact, Providence, RI

The deck from Drew Clemens and I’s Build Responsively full-day workshop at Artifact East on November 6, 2013.

Ben Callahan

November 06, 2013
Tweet

More Decks by Ben Callahan

Other Decks in Design

Transcript

  1. @bencallahan @drewtclemens
    Friday, November 8, 13

    View full-size slide

  2. Friday, November 8, 13

    View full-size slide

  3. @hearsparkbox @brworkshop
    @bencallahan @drewtclemens
    Friday, November 8, 13

    View full-size slide

  4. #artifactconf
    #brworkshop
    Friday, November 8, 13

    View full-size slide

  5. Internets:
    ?
    ?
    Friday, November 8, 13

    View full-size slide

  6. Please, turn off Dropbox sync.
    Friday, November 8, 13

    View full-size slide

  7. And, stop streaming
    Game of Thrones.
    Friday, November 8, 13

    View full-size slide

  8. Friday, November 8, 13

    View full-size slide

  9. Collaborative note-taking:
    http://bit.ly/1hgBSEv
    Friday, November 8, 13

    View full-size slide

  10. About Us
    Friday, November 8, 13

    View full-size slide

  11. About You
    Friday, November 8, 13

    View full-size slide

  12. AN INTRODUCTION TO RESPONSIVE WEB DESIGN
    RWD 101
    Friday, November 8, 13

    View full-size slide

  13. September 9, 2007
    6:30am
    Friday, November 8, 13

    View full-size slide

  14. 177%
    increase in tablet
    ownership since last year
    In the US...
    http://bit.ly/YFW4Ai
    Friday, November 8, 13

    View full-size slide

  15. 80%
    of consumers multi-task
    with other devices while
    watching TV
    In the US...
    http://bit.ly/YFW4Ai
    Friday, November 8, 13

    View full-size slide

  16. 26%
    of consumers own a
    laptop, tablet &
    smartphone
    http://bit.ly/YFW4Ai
    In the US...
    Friday, November 8, 13

    View full-size slide

  17. The web is not fixed width
    Friday, November 8, 13

    View full-size slide

  18. The penetration of
    desktop & laptop
    ownership is the same
    today as it was in 2007.
    http://bit.ly/zE1zgp
    In the US...
    Friday, November 8, 13

    View full-size slide

  19. Mobile vs Desktop Browsing
    0
    500
    1000
    1500
    2000
    2007 2008 2009 2010 2011 2012 2013 2014 2015
    Mobile Users Desktop Users
    http://bit.ly/L5cqiO
    Friday, November 8, 13

    View full-size slide

  20. Not that far away
    0
    500
    1000
    1500
    2000
    2007 2008 2009 2010 2011 2012 2013 2014 2015
    Mobile Users Desktop Users
    http://bit.ly/L5cqiO
    Friday, November 8, 13

    View full-size slide

  21. Q1 2013
    conversions on tablets
    surpassed conversions on
    traditional desktops
    http://bit.ly/sNpLte
    In the US...
    Friday, November 8, 13

    View full-size slide

  22. Flexibility is the new norm
    Friday, November 8, 13

    View full-size slide

  23. People are trying to
    browse your sites on these
    devices, today
    Friday, November 8, 13

    View full-size slide

  24. Responsive web design
    Friday, November 8, 13

    View full-size slide

  25. Ethan Marcotte
    Article on ALA
    (http://bit.ly/Wi0xvw)
    Book via ABA
    (http://bit.ly/f6TPB7)
    Friday, November 8, 13

    View full-size slide

  26. Friday, November 8, 13

    View full-size slide

  27. RWD 101
    ‣ Three Core Techniques
    - A Fluid Foundation
    - Flexible Content
    - Media Queries
    Friday, November 8, 13

    View full-size slide

  28. A Fluid Foundation
    Honor the proportions of
    the design by creating
    percentage-based layout
    instead of fixed-width,
    pixel-based layout.
    Friday, November 8, 13

    View full-size slide

  29. A Fluid Foundation
    Browser Window
    1000px
    600px 400px
    Friday, November 8, 13

    View full-size slide

  30. Browser Window
    A Fluid Foundation
    1000px
    600px 400px
    Friday, November 8, 13

    View full-size slide

  31. A Fluid Foundation
    Browser Window
    100%
    60% 40%
    Friday, November 8, 13

    View full-size slide

  32. A Fluid Foundation
    Browser Window
    100%
    60% 40%
    Friday, November 8, 13

    View full-size slide

  33. Flexible Content
    Once we have a layout
    which is based on
    proportions, the content
    must also respond.
    Friday, November 8, 13

    View full-size slide

  34. Browser Window
    We the People of the United States, in Order
    to form a more perfect Union, establish
    Justice, insure domestic Tranquility, provide
    for the common defence, promote the general
    Welfare, and secure the Blessings of Liberty to
    ourselves and our Posterity, do ordain and
    establish this Constitution for the United
    States of America.
    Flexible Content
    Friday, November 8, 13

    View full-size slide

  35. Browser Window
    We the People of
    the United States, in
    Order to form a
    more perfect Union,
    establish Justice,
    insure domestic
    Tranquility, provide
    for the common
    defence, promote
    the general Welfare,
    and secure the
    Blessings of Liberty
    to ourselves and
    Flexible Content
    Friday, November 8, 13

    View full-size slide

  36. Browser Window
    We the People of the United States, in Order
    to form a more perfect Union, establish
    Justice, insure domestic Tranquility, provide
    for the common defence, promote the general
    Flexible Content
    (Image)
    600px
    Friday, November 8, 13

    View full-size slide

  37. Browser Window
    We the People of
    the United States, in
    Order to form a
    Flexible Content
    (Image)
    600px
    Friday, November 8, 13

    View full-size slide

  38. Browser Window
    We the People of
    the United States, in
    Order to form a
    Flexible Content
    (Image)
    600px
    http://bit.ly/ZdC8pH
    Friday, November 8, 13

    View full-size slide

  39. Browser Window
    We the People of
    the United States, in
    Order to form a
    more perfect Union,
    establish Justice,
    insure domestic
    Tranquility, provide
    for the common
    Flexible Content
    (Image)
    100%
    Friday, November 8, 13

    View full-size slide

  40. Media Queries
    When our content and our
    design are no longer
    working in harmony, we
    need to make a larger shift
    in layout.
    Friday, November 8, 13

    View full-size slide

  41. Browser Window
    100%
    60% 40%
    Media Queries
    Friday, November 8, 13

    View full-size slide

  42. Browser Window
    A
    100%
    B
    100%
    C
    100%
    Media Queries
    Browser Window
    A
    100%
    B
    60%
    C
    40%
    Friday, November 8, 13

    View full-size slide

  43. Browser Window
    A
    100%
    B
    60%
    C
    40%
    Media Queries
    Browser Window
    A
    100%
    B
    100%
    C
    100%
    Friday, November 8, 13

    View full-size slide

  44. [live examples]
    Friday, November 8, 13

    View full-size slide

  45. RWD 101
    ‣ Three Core Techniques
    - A Fluid Foundation
    - Flexible Content
    - Media Queries
    Friday, November 8, 13

    View full-size slide

  46. [code example]
    Friday, November 8, 13

    View full-size slide

  47. DISSECTING DESIGN
    RWD WORKFLOW
    Friday, November 8, 13

    View full-size slide

  48. We used to pretend like
    things were pretty simple.
    Friday, November 8, 13

    View full-size slide

  49. 1024ish
    768ish
    fixed width
    Friday, November 8, 13

    View full-size slide

  50. DESIGN FRONT-END BACK-END LAUNCH!
    Linear Workflow
    Friday, November 8, 13

    View full-size slide

  51. DESIGN FRONT-END BACK-END LAUNCH!
    THINK ABOUT
    USERS
    Linear Workflow
    Friday, November 8, 13

    View full-size slide

  52. DESIGN FRONT-END BACK-END LAUNCH!
    Linear Workflow
    THINK ABOUT
    USERS
    THROW IN
    SOME CONTENT
    Friday, November 8, 13

    View full-size slide

  53. Slightly Better
    Linear Workflow
    CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
    Friday, November 8, 13

    View full-size slide

  54. Why hello,
    RWD.
    Friday, November 8, 13

    View full-size slide

  55. Why hello,
    tiny browsers.
    Friday, November 8, 13

    View full-size slide

  56. Why hello,
    reality.
    Friday, November 8, 13

    View full-size slide

  57. THIS IS AWESOME,
    LET’S JUMP IN!
    Friday, November 8, 13

    View full-size slide

  58. Linear Workflow
    Now with
    RWD!
    CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
    Friday, November 8, 13

    View full-size slide

  59. Ditto!
    Now with
    RWD!
    Linear Workflow
    CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
    Me too!
    Friday, November 8, 13

    View full-size slide

  60. This doesn’t work.
    Friday, November 8, 13

    View full-size slide

  61. We need to invite others
    into the process.
    Friday, November 8, 13

    View full-size slide

  62. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow
    Friday, November 8, 13

    View full-size slide

  63. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow
    Friday, November 8, 13

    View full-size slide

  64. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow
    Friday, November 8, 13

    View full-size slide

  65. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “Almost no one who makes websites works
    in their company or organization’s web
    division. That’s because almost no
    company or organization has a web
    division. And that void on the org chart is
    one reason we have so many bloated,
    unusable failures where we should be
    producing great user experiences.”
    @zeldman, 2007
    Friday, November 8, 13

    View full-size slide

  66. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow
    Friday, November 8, 13

    View full-size slide

  67. LAUNCH
    DESIGN
    FRONT
    END
    BACK
    END
    CONTENT
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    Friday, November 8, 13

    View full-size slide

  68. LAUNCH
    DESIGN
    FRONT
    END
    BACK
    END
    CONTENT
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    UX
    FRONT-END
    DESIGN
    LAUNCH
    DESIGN
    FRONT
    END
    BACK
    END
    CONTENT
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    Friday, November 8, 13

    View full-size slide

  69. ND
    DESIGN
    So, how do
    we advance
    design through
    a “1 deliverable”
    workflow?
    Friday, November 8, 13

    View full-size slide

  70. Dissecting Design
    PRODUCTIVITY
    TIME
    Friday, November 8, 13

    View full-size slide

  71. Dissecting Design
    PRODUCTIVITY
    TIME
    Friday, November 8, 13

    View full-size slide

  72. Dissecting Design
    PRODUCTIVITY
    TIME
    Friday, November 8, 13

    View full-size slide

  73. Establish the Aesthetic
    DISSECTING DESIGN
    Friday, November 8, 13

    View full-size slide

  74. Solve the Problem
    DISSECTING DESIGN
    Friday, November 8, 13

    View full-size slide

  75. Refine the Solution
    DISSECTING DESIGN
    Friday, November 8, 13

    View full-size slide

  76. Friday, November 8, 13

    View full-size slide

  77. Establish the Aesthetic
    DISSECTING DESIGN
    Friday, November 8, 13

    View full-size slide

  78. DISSECTING DESIGN
    ‣ Style Comparisons
    ‣ Style Tiles
    ‣ Style Prototypes
    Establish the Aesthetic
    Friday, November 8, 13

    View full-size slide

  79. Style Comparisons
    ESTABLISH THE AESTHETIC
    “I could create an illustration or a 3D
    rendering of what I want my new office to
    look like, but that doesn’t take advantage
    of his great ideas. It’s dictation, not
    collaboration. Instead, I show him a
    Pinterest board my wife and I created.”
    @danielmall
    http://danielmall.com/articles/the-post-psd-era/
    Friday, November 8, 13

    View full-size slide

  80. Style Comparisons
    ESTABLISH THE AESTHETIC
    Light vs Dark
    Friday, November 8, 13

    View full-size slide

  81. Style Comparisons
    ESTABLISH THE AESTHETIC
    Flat vs Textured
    Friday, November 8, 13

    View full-size slide

  82. Style Comparisons
    ESTABLISH THE AESTHETIC
    Illustration vs Photography
    Friday, November 8, 13

    View full-size slide

  83. Style Tiles
    ESTABLISH THE AESTHETIC
    Friday, November 8, 13

    View full-size slide

  84. Style Tiles
    ESTABLISH THE AESTHETIC
    Friday, November 8, 13

    View full-size slide

  85. Style Tiles
    ESTABLISH THE AESTHETIC
    Friday, November 8, 13

    View full-size slide

  86. Style Prototypes
    ESTABLISH THE AESTHETIC
    Friday, November 8, 13

    View full-size slide

  87. USE TOOLS YOU ARE
    COMFORTABLE WITH
    TO ESTABLISH THE
    AESTHETIC
    HOW TO DECIDE
    Friday, November 8, 13

    View full-size slide

  88. Cool, so what
    happens next?
    Friday, November 8, 13

    View full-size slide

  89. Solve the Problem
    DISSECTING DESIGN
    Friday, November 8, 13

    View full-size slide

  90. DISSECTING DESIGN
    ‣ Static Design Tools
    ‣ Responsive Design Tools
    ‣ HTML/CSS
    Solve the Problem
    Friday, November 8, 13

    View full-size slide

  91. Static Design Tools
    SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  92. Static Design Tools
    SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  93. Static Design Tools
    SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  94. Responsive Design Tools
    SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  95. SOLVE THE PROBLEM
    Responsive Design Tools
    Friday, November 8, 13

    View full-size slide

  96. SOLVE THE PROBLEM
    Responsive Design Tools
    Friday, November 8, 13

    View full-size slide

  97. HTML/CSS
    SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  98. HTML/CSS
    SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  99. HTML/CSS
    SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  100. Layout vs Modules
    SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  101. Layout vs Modules
    SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  102. Layout vs Modules
    SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  103. YOU BEST SOLVE
    PROBLEMS USING
    TOOLS YOU ARE
    FLUENT WITH
    HOW TO DECIDE
    Friday, November 8, 13

    View full-size slide

  104. Refine the Solution
    DISSECTING DESIGN
    Friday, November 8, 13

    View full-size slide

  105. DISSECTING DESIGN
    ‣ Static Design Tools
    ‣ Design Pairing
    Refine the Solution
    Friday, November 8, 13

    View full-size slide

  106. Don’t Use Static Design Tools
    REFINE THE SOLUTION
    LAUNCH
    DESIGN
    FRONT
    END
    BACK
    END
    CONTENT
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    Friday, November 8, 13

    View full-size slide

  107. Don’t Use Static Design Tools
    REFINE THE SOLUTION
    Friday, November 8, 13

    View full-size slide

  108. Instead of static design
    hand-offs, consider
    design pairing
    REFINE THE SOLUTION
    Friday, November 8, 13

    View full-size slide

  109. Design Pairing
    REFINE THE SOLUTION
    Friday, November 8, 13

    View full-size slide

  110. Design Pairing
    REFINE THE SOLUTION
    Friday, November 8, 13

    View full-size slide

  111. Design Pairing
    REFINE THE SOLUTION
    Friday, November 8, 13

    View full-size slide

  112. Design Pairing
    REFINE THE SOLUTION
    Friday, November 8, 13

    View full-size slide

  113. Friday, November 8, 13

    View full-size slide

  114. You don’t want to do the long
    tail more than once
    REFINE THE SOLUTION
    Friday, November 8, 13

    View full-size slide

  115. The Switching Point
    REFINE THE SOLUTION
    Friday, November 8, 13

    View full-size slide

  116. EFFICIENCY IS KEY
    WHEN REFINING A
    DESIGN SOLUTION
    HOW TO DECIDE
    Friday, November 8, 13

    View full-size slide

  117. Establish
    Solve
    Refine
    ................. Comfort
    ....................... Fluency
    ................... Efficiency
    Guidelines for Selecting Tools
    Friday, November 8, 13

    View full-size slide

  118. Establish
    Solve
    Refine
    ..... Style Prototype
    ......... Sketching + PSD
    .... In-Browser Pairing
    Tools we use at Sparkbox
    Friday, November 8, 13

    View full-size slide

  119. Photo Credit: Jay Maisel
    Friday, November 8, 13

    View full-size slide

  120. Photo Credit: Jay Maisel
    Friday, November 8, 13

    View full-size slide

  121. Photo Credit: Jay Maisel
    Friday, November 8, 13

    View full-size slide

  122. Group improvisation is a challenge.
    Aside from the weighty technical
    problem of collective coherent
    thinking, there is the very human,
    even social need for sympathy from
    all members to bend for the
    common result.
    Bill Evans
    Friday, November 8, 13

    View full-size slide

  123. Group improvisation is a challenge.
    Aside from the weighty technical
    problem of collective coherent
    thinking, there is the very human,
    even social need for sympathy from
    all members to bend for the
    common result.
    Bill Evans
    Friday, November 8, 13

    View full-size slide

  124. Group improvisation is a challenge.
    Aside from the weighty technical
    problem of collective coherent
    thinking, there is the very human,
    even social need for sympathy from
    all members to bend for the
    common result.
    Bill Evans
    Friday, November 8, 13

    View full-size slide

  125. Group Improvisation
    Friday, November 8, 13

    View full-size slide

  126. Group improvisation requires
    individuals on a team to...
    be skilled
    Friday, November 8, 13

    View full-size slide

  127. Group improvisation requires
    individuals on a team to...
    be humble
    Friday, November 8, 13

    View full-size slide

  128. Group improvisation requires
    individuals on a team to...
    be empathetic
    Friday, November 8, 13

    View full-size slide

  129. Skill
    Humility
    Empathy
    Friday, November 8, 13

    View full-size slide

  130. Friday, November 8, 13

    View full-size slide

  131. Friday, November 8, 13

    View full-size slide

  132. Friday, November 8, 13

    View full-size slide

  133. Friday, November 8, 13

    View full-size slide

  134. Friday, November 8, 13

    View full-size slide

  135. Create guidelines instead
    of rigid process
    Friday, November 8, 13

    View full-size slide

  136. The amount of process
    required is inversely
    proportionate to the
    skill and experience of
    your team.
    Friday, November 8, 13

    View full-size slide

  137. Create the perfect, fully-
    documented, all-encompassing web
    design and development process.
    Or...
    Friday, November 8, 13

    View full-size slide

  138. Chill out and develop our people.
    Friday, November 8, 13

    View full-size slide

  139. Invest in people
    over process
    Friday, November 8, 13

    View full-size slide

  140. Discussion
    ‣ What happens next in this
    process?
    ‣ How are you handling RWD
    deliverables now?
    ‣ What are you struggling with?
    Friday, November 8, 13

    View full-size slide

  141. CODE AND PROJECT STRUCTURE
    SERVING
    RWD STYLES
    Friday, November 8, 13

    View full-size slide

  142. SERVING RWD STYLES
    Major Approaches
    ‣ Single CSS File
    ‣ Multiple CSS Files
    ‣ Breakpoint Based Partials
    ‣ Module Based Partials
    Friday, November 8, 13

    View full-size slide

  143. SERVING RWD STYLES
    Major Approaches
    ‣ Single CSS File
    ‣ Multiple CSS Files
    ‣ Breakpoint Based Partials
    ‣ Module Based Partials
    CSS PREPROCESSING FTW!
    Friday, November 8, 13

    View full-size slide

  144. Before any of this stuff will
    work, you need to do this:

    content="width=device-width;
    initial-scale=1.0;">
    Friday, November 8, 13

    View full-size slide

  145. And, you should
    also do this:
    /* CSS */
    @-webkit-viewport { width:device-width; }
    @-moz-viewport { width:device-width; }
    @-ms-viewport { width:device-width; }
    @-o-viewport { width:device-width; }
    @viewport { width:device-width; }
    Friday, November 8, 13

    View full-size slide

  146. The Example
    100%
    50% 30%
    Friday, November 8, 13

    View full-size slide

  147. SERVING RWD STYLES
    Major Approaches
    ‣ Single CSS File
    ‣ Multiple CSS Files
    ‣ Breakpoint Based Partials
    ‣ Module Based Partials
    Friday, November 8, 13

    View full-size slide

  148. Single CSS File
    HTML

    CSS
    Start with styles applied
    to all
    Styles scoped to a
    media query
    Styles scoped to another
    media query
    Friday, November 8, 13

    View full-size slide

  149. /* styles.css */
    aside { color: #333; width: 100%; }
    Single CSS File
    Friday, November 8, 13

    View full-size slide

  150. /* styles.css */
    aside { color: #333; width: 100%; }
    /* if the viewport width is 40em or greater */
    Single CSS File
    Friday, November 8, 13

    View full-size slide

  151. PAUSE:
    MEDIA QUERIES
    Friday, November 8, 13

    View full-size slide


  152. /* In your CSS */
    @media (min-width: 30em) { ... }
    @media screen and (max-width: 80em) { ... }
    Media Queries
    Friday, November 8, 13

    View full-size slide


  153. /* In your CSS */
    @media (min-width: 30em) { ... }
    @media screen and (max-width: 80em) { ... }
    Media Types
    Friday, November 8, 13

    View full-size slide

  154. Media Types
    all
    braille, embossed, speech
    handheld, projection, screen, tv
    print
    tty
    http://www.w3.org/TR/CSS21/media.html#media-types
    Friday, November 8, 13

    View full-size slide


  155. /* In your CSS */
    @media (orientation: portrait) { ... }
    @media screen and (color) { ... }
    Media Features
    Friday, November 8, 13

    View full-size slide

  156. Media Features
    width, height
    device-width, device-height
    orientation
    aspect-ratio, device-aspect-ratio
    color, color-index, monochrome
    resolution, scan, grid
    http://www.w3.org/TR/css3-mediaqueries
    Friday, November 8, 13

    View full-size slide

  157. Single CSS File
    HTML

    CSS
    Start with styles applied
    to all
    Styles scoped to a
    media query
    Styles scoped to another
    media query
    Friday, November 8, 13

    View full-size slide

  158. Small Viewport Width First
    HTML

    CSS
    Smallest styles
    Wider styles (mq)
    Even wider styles (mq)
    Super wide styles (mq)
    Friday, November 8, 13

    View full-size slide

  159. Large Viewport Width First
    HTML

    CSS
    Widest styles
    Wide styles (mq)
    Narrow styles (mq)
    Very narrow styles (mq)
    Friday, November 8, 13

    View full-size slide

  160. /* styles.css */
    aside { color: #333; width: 100%; }
    /* if the viewport width is 40em or greater */
    Single CSS File
    Friday, November 8, 13

    View full-size slide

  161. /* styles.css */
    aside { color: #333; width: 100%; }
    /* if the viewport width is 40em or greater */
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    Single CSS File
    Friday, November 8, 13

    View full-size slide

  162. /* styles.css */
    aside { color: #333; width: 100%; }
    /* if the viewport width is 40em or greater */
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    Single CSS File
    Friday, November 8, 13

    View full-size slide

  163. /* styles.css */
    aside { color: #333; width: 100%; }
    /* if the viewport width is 40em or greater */
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    /* if the viewport width is 60em or greater */
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    Single CSS File
    Friday, November 8, 13

    View full-size slide

  164. Single CSS File
    /* styles.css */
    aside { color: #333; width: 100%; }
    /* if the viewport width is 40em or greater */
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    /* if the viewport width is 60em or greater */
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    Small Viewport
    Width First
    Friday, November 8, 13

    View full-size slide

  165. /* styles.css */
    aside { color: #333; width: 30%; }
    /* if the viewport width is 60em or less */
    @media (max-width: 60em) {
    aside { width: 50%; }
    }
    /* if the viewport width is 40em or less */
    @media (max-width: 40em) {
    aside { width: 100%; }
    }
    Single CSS File
    Large Viewport
    Width First
    Friday, November 8, 13

    View full-size slide

  166. SERVING RWD STYLES
    Single CSS File
    ‣ Simple to implement
    ‣ Single request
    ‣ Doesn’t require a preprocessor
    ‣ Requires JS to serve large layout to
    old IE if starting with small layouts
    ‣ Large sites can be difficult to
    maintain because of the size of
    the single file
    Friday, November 8, 13

    View full-size slide

  167. SERVING RWD STYLES
    Major Approaches
    ‣ Single CSS File
    ‣ Multiple CSS Files
    ‣ Breakpoint Based Partials
    ‣ Module Based Partials
    Friday, November 8, 13

    View full-size slide

  168. Multiple CSS Files
    HTML

    If this browser is less than IE9...
    and it’s not IE Mobile...
    and viewport width is at least 40em...

    global.css
    all styles
    linear layout
    layout.css
    only styles for layout
    http://adactio.com/journal/4494/
    Friday, November 8, 13

    View full-size slide

  169. Multiple CSS Files
    index.html

    media=”(min-width: 40em)”
    rel=”stylesheet”>

    Friday, November 8, 13

    View full-size slide

  170. Multiple CSS Files
    index.html

    media=”(min-width: 40em)”
    rel=”stylesheet”>

    Friday, November 8, 13

    View full-size slide

  171. Multiple CSS Files
    index.html

    media=”(min-width: 40em)”
    rel=”stylesheet”>

    Friday, November 8, 13

    View full-size slide

  172. Multiple CSS Files
    index.html

    media=”(min-width: 40em)”
    rel=”stylesheet”>

    Friday, November 8, 13

    View full-size slide

  173. Multiple CSS Files
    index.html

    media=”(min-width: 40em)”
    rel=”stylesheet”>

    Friday, November 8, 13

    View full-size slide

  174. Multiple CSS Files
    global.css
    aside {
    color: #333;
    width: 100%;
    }
    layout.css
    aside { width: 50%; }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    Friday, November 8, 13

    View full-size slide

  175. Multiple CSS Files
    global.css
    aside {
    color: #333;
    width: 100%;
    }
    layout.css
    aside { width: 50%; }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    Friday, November 8, 13

    View full-size slide

  176. SERVING RWD STYLES
    Multiple CSS Files
    ‣ Doesn’t require a preprocessor
    ‣ At least two requests
    ‣ Requires you to separate layout from
    other styles
    ‣ Allows you to start with small layouts
    and serve a single large layout to old
    IE without JS
    - Requests go up if you use multiple MQs
    Friday, November 8, 13

    View full-size slide

  177. SERVING RWD STYLES
    Major Approaches
    ‣ Single CSS File
    ‣ Multiple CSS Files
    ‣ Breakpoint Based Partials
    ‣ Module Based Partials
    Friday, November 8, 13

    View full-size slide

  178. Breakpoint Based Partials
    HTML

    If this browser is less than IE9...
    and it’s not IE Mobile...

    base.css
    all styles/MQ blocks
    no-mq.css
    MQ styles from base
    without the MQs
    http://nicolasgallagher.com/mobile-first-css-sass-and-ie/
    Friday, November 8, 13

    View full-size slide

  179. Breakpoint Based Partials
    index.html


    Friday, November 8, 13

    View full-size slide

  180. Breakpoint Based Partials
    base.css
    aside { color: #333; width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { width: 50%; }
    aside { width: 30%; }
    Friday, November 8, 13

    View full-size slide

  181. Breakpoint Based Partials
    base.css
    aside { color: #333; width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { width: 50%; }
    aside { width: 30%; }
    Friday, November 8, 13

    View full-size slide

  182. Breakpoint Based Partials
    base.css
    aside { color: #333; width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { width: 50%; }
    aside { width: 30%; }
    Friday, November 8, 13

    View full-size slide

  183. Breakpoint Based Partials
    base.css
    aside { color: #333; width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { width: 50%; }
    aside { width: 30%; }
    Friday, November 8, 13

    View full-size slide

  184. Breakpoint Based Partials
    base.css
    aside { color: #333; width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { width: 50%; }
    aside { width: 30%; }
    Friday, November 8, 13

    View full-size slide

  185. Breakpoint Based Partials
    base.css
    aside { color: #333; width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { width: 50%; }
    aside { width: 30%; }
    Friday, November 8, 13

    View full-size slide

  186. Breakpoint Based Partials
    base.css
    aside { color: #333; width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { width: 50%; }
    aside { width: 30%; }
    Friday, November 8, 13

    View full-size slide

  187. Breakpoint Based Partials
    base.css
    aside { color: #333; width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { width: 50%; }
    aside { width: 30%; }
    Friday, November 8, 13

    View full-size slide

  188. PAUSE:
    CSS PREPROCESSORS
    Friday, November 8, 13

    View full-size slide

  189. styles.scss styles.css
    We write SASS
    (or LESS, Stylus, etc.)
    Browser gets CSS
    (like it always has)
    PREPROCESSING
    What is CSS Preprocessing?
    Friday, November 8, 13

    View full-size slide

  190. The Big Three:
    LESS, SASS, and Stylus
    Friday, November 8, 13

    View full-size slide

  191. LESS
    ‣ Runs on Node.js
    ‣ Very similar syntax to SASS
    ‣ http://lesscss.org/
    Friday, November 8, 13

    View full-size slide

  192. Variables are
    specified with @
    symbol
    /* .less */
    @top-variable: 20px;
    ! #header-shadow {
    ! position: absolute;
    ! ! top: @top-variable;
    ! }
    LESS syntax
    Friday, November 8, 13

    View full-size slide

  193. Stylus
    ‣ Runs on Node.js
    ‣ Has a flexible syntax
    - You can omit semi-colons, colons,
    and braces
    ‣ http://learnboost.github.com/
    stylus/
    Friday, November 8, 13

    View full-size slide

  194. /* .styl */
    top-variable = 20px
    !
    #main-header
    ! position absolute
    ! ! top top-variable
    #footer {
    ! background: blue
    ! ! border 1px solid #00f;
    }
    Notice the terse,
    forgiving syntax.
    Stylus Syntax
    Friday, November 8, 13

    View full-size slide

  195. SASS
    ‣ Runs on Ruby
    ‣ Has two syntax flavors
    - .scss & .sass
    ‣ http://sass-lang.com/
    Friday, November 8, 13

    View full-size slide

  196. $main-color: blue
    /* .scss */
    #main {
    color: $main-color;
    font-size: 0.3em;
    }
    /* .sass */
    #main
    color: $main-color
    font-size: 0.3em
    SASS Sytax
    Friday, November 8, 13

    View full-size slide

  197. What’s so cool about
    preprocessors, anyway?
    Friday, November 8, 13

    View full-size slide

  198. /* .scss */
    .food-list {
    list-style: none;
    li {
    font-size: 1rem;
    a {
    color: red;
    }
    }
    }
    Nesting
    /* .css */
    .food-list {
    list-style: none;
    }
    .food-list li {
    font-size: 1rem;
    }
    .food-list li a {
    color: red;
    }
    Friday, November 8, 13

    View full-size slide

  199. Nesting can be abused.
    /* This is bad. Don’t do it. */
    html body #main div.primary .big-header {
    font-size: 2em;
    }
    !
    Friday, November 8, 13

    View full-size slide

  200. /*.scss*/
    $white: rgba(255,255,255,1);
    /*.less*/
    @white: rgba(255,255,255,1);
    /*.styl*/
    white = rgba(255,255,255,1);
    $black = rgba(0,0,0,1);
    Variables
    Friday, November 8, 13

    View full-size slide

  201. /*.scss*/
    @mixin border-radius( $value : 10px ) {
    ! -webkit-border-radius: $value;
    ! -moz-border-radius: $value;
    ! ! ! border-radius: $value;
    }
    Mixins
    .btn{
    @include border-radius(25px);
    }
    Friday, November 8, 13

    View full-size slide

  202. Mixins
    ‣ SASS and Stylus both support
    basic programming like loops, if/
    else, etc. in mixins.
    ‣ LESS only offers “guarded
    mixins.”
    - I hear this is better with the *new*
    version...
    Friday, November 8, 13

    View full-size slide

  203. Sparkbox REM Mixin
    Friday, November 8, 13

    View full-size slide

  204. /*.scss*/
    @include rem(padding, 0.5, 1, 4, 3);
    @include rem(font-size, 1.2, large);
    Sparkbox REM Mixin
    Friday, November 8, 13

    View full-size slide

  205. Compass & Bourbon
    ‣ Compass and Bourbon are mixin
    libraries for SASS
    ‣ Takes care of vendor prefixes with
    mixins
    ‣ Compass has an ecosystem of
    plugins built on top of Compass
    ‣ With config.rb, Compass lets you
    check the preprocessor config
    into source control
    Friday, November 8, 13

    View full-size slide

  206. Compass & Bourbon
    Friday, November 8, 13

    View full-size slide

  207. Importing
    ‣ Allows you to break up your
    styles across files
    - variables, mixins, reset, all
    separated
    ‣ Better than a standard css import
    Friday, November 8, 13

    View full-size slide

  208. this file will
    compile to
    base.css
    /* base.scss */
    @import "compass";
    @import "variables";
    @import "reset";
    @import "mixins";
    @import "header";
    @import "hero";
    @import "whatever";
    Importing
    Friday, November 8, 13

    View full-size slide

  209. Google Chrome Developer
    Tools & SASS
    Friday, November 8, 13

    View full-size slide

  210. Source Maps
    ‣ Using pre-processors does
    present some new challenges.
    ‣ Line-numbers are no longer
    representative of where the code
    is.
    Friday, November 8, 13

    View full-size slide

  211. Source Maps
    ‣ Source maps let Chrome know the
    source of the generated CSS.
    Friday, November 8, 13

    View full-size slide

  212. Setup Chrome for SASS
    Source Maps Support
    ‣ head over to chrome://flags
    - Enable Developer Tools
    Experiments
    Friday, November 8, 13

    View full-size slide

  213. Setup Chrome for SASS
    Source Maps Support
    ‣ Enable Support for SASS in the
    Dev Tools options
    Friday, November 8, 13

    View full-size slide

  214. Setup Chrome for SASS
    Source Maps Support
    ‣ Enable support for Source maps
    Friday, November 8, 13

    View full-size slide

  215. The last step is to
    turn on debug
    info in our CSS
    /* config.rb */
    sass_options = { :debug_info => true }
    or
    /* command line */
    sass --watch -g scss/:css/
    Setup Chrome for SASS
    Source Maps Support
    Friday, November 8, 13

    View full-size slide

  216. CSS PREPROCESSORS
    Resources
    Codekit
    http://incident57.com/codekit/
    Friday, November 8, 13

    View full-size slide

  217. CSS PREPROCESSORS
    Resources
    Scout
    http://mhs.github.com/scout-app/
    Friday, November 8, 13

    View full-size slide

  218. CSS PREPROCESSORS
    Resources
    Compass
    http://compass-style.org/
    Friday, November 8, 13

    View full-size slide

  219. CSS PREPROCESSORS
    Resources
    SASS Primer
    http://thesassway.com/beginner/getting-
    started-with-sass-and-compass
    Friday, November 8, 13

    View full-size slide

  220. Breakpoint Based Partials
    base.css
    aside { color: #333; width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { width: 50%; }
    aside { width: 30%; }
    Friday, November 8, 13

    View full-size slide

  221. _40em.scss
    aside { width: 50%; }
    Breakpoint Based Partials
    base.scss
    @import “smallest”;
    @media (min-width: 40em) {
    @import “40em”;
    }
    @media (min-width: 60em) {
    @import “60em”;
    }
    no-mq.scss
    @import “40em”;
    @import “60em”;
    _60em.scss
    aside { width: 30%; }
    _smallest.scss
    aside { color: #333;
    width: 100%;}
    Friday, November 8, 13

    View full-size slide

  222. SERVING RWD STYLES
    Breakpoint Based Partials
    ‣ Allows you to start with small
    layouts and serve large layout to
    old IE without JS
    ‣ Only 1 or 2 requests
    ‣ Requires preprocessor
    ‣ Maintenance can be complex
    Friday, November 8, 13

    View full-size slide

  223. SERVING RWD STYLES
    Major Approaches
    ‣ Single CSS File
    ‣ Multiple CSS Files
    ‣ Breakpoint Based Partials
    ‣ Module Based Partials
    Friday, November 8, 13

    View full-size slide

  224. HTML
    If < IE9 and not IE Mobile

    If >= IE9 or IE Mobile or not IE

    Module Based Partials
    no-mq.css
    All styles with no MQs
    mq.css
    All styles with MQs
    http://seesparkbox.com/foundry/
    structuring_and_serving_styles_for_older_browsers
    Friday, November 8, 13

    View full-size slide

  225. Module Based Partials
    index.html




    Friday, November 8, 13

    View full-size slide

  226. Module Based Partials
    index.html




    Friday, November 8, 13

    View full-size slide

  227. Module Based Partials
    index.html




    Friday, November 8, 13

    View full-size slide

  228. Module Based Partials
    index.html




    Friday, November 8, 13

    View full-size slide

  229. Module Based Partials
    index.html




    Friday, November 8, 13

    View full-size slide

  230. Module Based Partials
    index.html




    Friday, November 8, 13

    View full-size slide

  231. Module Based Partials
    mq.css
    aside { color: #333;
    width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { color: #333;
    width: 100%;
    width: 50%;
    width: 30%; }
    Friday, November 8, 13

    View full-size slide

  232. Module Based Partials
    mq.css
    aside { color: #333;
    width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { color: #333;
    width: 100%;
    width: 50%;
    width: 30%; }
    Friday, November 8, 13

    View full-size slide

  233. Module Based Partials
    mq.css
    aside { color: #333;
    width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { color: #333;
    width: 100%;
    width: 50%;
    width: 30%; }
    Friday, November 8, 13

    View full-size slide

  234. Module Based Partials
    mq.css
    aside { color: #333;
    width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { color: #333;
    width: 100%;
    width: 50%;
    width: 30%; }
    Friday, November 8, 13

    View full-size slide

  235. Module Based Partials
    mq.css
    aside { color: #333;
    width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { color: #333;
    width: 100%;
    width: 50%;
    width: 30%; }
    Friday, November 8, 13

    View full-size slide

  236. Module Based Partials
    mq.css
    aside { color: #333;
    width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { color: #333;
    width: 100%;
    width: 50%;
    width: 30%; }
    Friday, November 8, 13

    View full-size slide

  237. Module Based Partials
    mq.css
    aside { color: #333;
    width: 100%; }
    @media (min-width: 40em) {
    aside { width: 50%; }
    }
    @media (min-width: 60em) {
    aside { width: 30%; }
    }
    no-mq.css
    aside { color: #333;
    width: 100%;
    width: 50%;
    width: 30%; }
    Friday, November 8, 13

    View full-size slide

  238. Module Based Partials
    mq.scss
    @import “compass”;
    @import “sb-media”;
    @import “aside”;
    @import “nav”;
    @import “footer”;
    ...
    no-mq.scss
    @import “compass”;
    @import “sb-media”;
    $sb-no-mq-support: true;
    @import “aside”;
    @import “nav”;
    @import “footer”;
    ...
    Friday, November 8, 13

    View full-size slide

  239. Module Based Partials
    mq.scss
    @import “compass”;
    @import “sb-media”;
    @import “aside”;
    @import “nav”;
    @import “footer”;
    ...
    no-mq.scss
    @import “compass”;
    @import “sb-media”;
    $sb-no-mq-support: true;
    @import “aside”;
    @import “nav”;
    @import “footer”;
    ...
    Friday, November 8, 13

    View full-size slide

  240. Module Based Partials
    mq.scss
    @import “compass”;
    @import “sb-media”;
    @import “aside”;
    @import “nav”;
    @import “footer”;
    ...
    no-mq.scss
    @import “compass”;
    @import “sb-media”;
    $sb-no-mq-support: true;
    @import “aside”;
    @import “nav”;
    @import “footer”;
    ...
    Friday, November 8, 13

    View full-size slide

  241. Module Based Partials
    mq.scss
    @import “compass”;
    @import “sb-media”;
    @import “aside”;
    @import “nav”;
    @import “footer”;
    ...
    no-mq.scss
    @import “compass”;
    @import “sb-media”;
    $sb-no-mq-support: true;
    @import “aside”;
    @import “nav”;
    @import “footer”;
    ...
    Friday, November 8, 13

    View full-size slide

  242. Module Based Partials
    _aside.scss
    aside {
    color: #333; width: 100%;
    @include sb-media(40em) {
    width: 50%; }
    @include sb-media(60em) {
    width: 30%; }
    }
    Friday, November 8, 13

    View full-size slide

  243. Module Based Partials
    _aside.scss
    aside {
    color: #333; width: 100%;
    @include sb-media(40em) {
    width: 50%; }
    @include sb-media(60em) {
    width: 30%; }
    }
    Friday, November 8, 13

    View full-size slide

  244. Module Based Partials
    _aside.scss
    aside {
    color: #333; width: 100%;
    @include sb-media(40em) {
    width: 50%; }
    @include sb-media(60em) {
    width: 30%; }
    }
    $sb-no-mq-support: true;
    aside { color: #333;
    width: 100%;
    width: 50%;
    width: 30%; }
    Friday, November 8, 13

    View full-size slide

  245. Module Based Partials
    $no-­‐mq-­‐support:  false  !default;
    $serve-­‐to-­‐nomq-­‐max-­‐width:60em;
    @mixin  sb-­‐media($query)  {
       @if  $no-­‐mq-­‐support{
           @if  $query  <  $serve-­‐to-­‐nomq-­‐max-­‐width  {
               @content;
           }
       }  @else  {
           @media  (  'min-­‐width:'  +  $query  )  {
               @content;
           }
       }
    }
    https://github.com/sparkbox/SB-Media
    Friday, November 8, 13

    View full-size slide

  246. https://github.com/sparkbox/SB-Media
    Friday, November 8, 13

    View full-size slide

  247. https://github.com/Team-Sass/
    breakpoint
    Friday, November 8, 13

    View full-size slide

  248. SERVING RWD STYLES
    Module Based Partials
    ‣ Single Request
    ‣ Easy Maintenance
    ‣ Allows you to start with small
    layouts and serve large layout to
    old IE without JS
    ‣ Requires Preprocessor
    Friday, November 8, 13

    View full-size slide

  249. This is so much
    more natural.
    Friday, November 8, 13

    View full-size slide

  250. THERE IS NO
    BREAKPOINT
    Friday, November 8, 13

    View full-size slide

  251. There is no Breakpoint
    aside {
    // general styles
    // major shift at 40em
    // major shift at 60em
    ...
    }
    aside {
    // general styles
    // major shift at 40em
    // minor tweak at 42em
    // minor tweak at 53.5em
    // minor tweak at 56em
    // major shift at 60em
    // minor tweak at 72.2em
    // minor tweak at 74em
    ...
    }
    Friday, November 8, 13

    View full-size slide

  252. There is no Breakpoint
    aside {
    // general styles
    // major shift at 40em
    // major shift at 60em
    ...
    }
    aside {
    // general styles
    // major shift at 40em
    // minor tweak at 42em
    // minor tweak at 53.5em
    // minor tweak at 56em
    // major shift at 60em
    // minor tweak at 72.2em
    // minor tweak at 74em
    ...
    }
    Friday, November 8, 13

    View full-size slide

  253. There is no Breakpoint
    Media Query
    Bookmarklet
    (by @robtarr)
    Friday, November 8, 13

    View full-size slide

  254. There is no Breakpoint
    Friday, November 8, 13

    View full-size slide

  255. Relax.
    Friday, November 8, 13

    View full-size slide

  256. Think more modularly.
    Try something like
    SMACSS (from @snookca).
    Friday, November 8, 13

    View full-size slide

  257. Element Queries
    http://www.xanthir.com/b4PR0
    Friday, November 8, 13

    View full-size slide

  258. Responsive Elements
    https://github.com/kumailht/responsive-elements
    Friday, November 8, 13

    View full-size slide

  259. http://seesparkbox.com/foundry/there_is_no_breakpoint
    There is no Breakpoint
    http://www.markboulton.co.uk/journal/theinbetween
    The In-Between
    http://www.jordanm.co.uk/post/43147197731/the-in-between
    The In-Between (2)
    Friday, November 8, 13

    View full-size slide

  260. Discussion
    ‣ How are you serving RWD styles
    today?
    ‣ How do you “support” older IE?
    Friday, November 8, 13

    View full-size slide

  261. MAKING EVERYTHING FLUID
    CREATING
    FLEXIBILITY
    Friday, November 8, 13

    View full-size slide

  262. CREATING FLEXIBILITY
    What Needs to Flex
    ‣ Grids
    ‣ Layout
    ‣ Typography
    ‣ Images
    ‣ Tables
    ‣ Video
    Friday, November 8, 13

    View full-size slide

  263. CREATING FLEXIBILITY
    What Needs to Flex
    ‣ Grids
    ‣ Layout
    ‣ Typography
    ‣ Images
    ‣ Tables
    ‣ Video
    Friday, November 8, 13

    View full-size slide

  264. It starts with the grid
    Friday, November 8, 13

    View full-size slide

  265. body {
    width: 1000px;
    }
    div.main {
    width: 700px;
    }
    aside {
    width: 280px;
    }
    It starts with the grid
    body {
    width: 100%;
    }
    div.main {
    width: 70%;
    }
    aside {
    width: 28%;
    }
    Friday, November 8, 13

    View full-size slide

  266. body {
    width: 1000px;
    }
    div.main {
    width: 700px;
    }
    It starts with the grid
    body {
    width: 100%;
    }
    div.main {
    width: 70%;
    }
    target / context = %
    700 / 1000 = .7
    .7 = 70%
    Friday, November 8, 13

    View full-size slide

  267. body {
    width: 1000px;
    }
    aside {
    width: 280px;
    }
    It starts with the grid
    body {
    width: 100%;
    }
    aside {
    width: 28%;
    }
    target / context = %
    280 / 1000 = .28
    .28 = 28%
    Friday, November 8, 13

    View full-size slide

  268. Responsive grid systems
    Friday, November 8, 13

    View full-size slide

  269. CREATING FLEXIBILITY
    RWD Grid Systems
    ‣ Foundation
    ‣ Bootstrap
    ‣ Skeleton
    ‣ Responsive.gs
    ‣ Columnal
    ‣ ...this list goes on, and on, and on
    Friday, November 8, 13

    View full-size slide

  270. CREATING FLEXIBILITY
    Semantic RWD Grid Systems
    ‣ Semantic.gs
    ‣ Susy
    ‣ Zen Grids
    Friday, November 8, 13

    View full-size slide

  271. @column-width: 60;
    @gutter-width: 20;
    @columns: 12;
    @total-width: 100%;
    header { @include column(12); }
    article { @include column(12); }
    aside { @include column(12); }
    @media (min-width: 38em) {
    article { @include column(8); }
    aside { @include column(4); }
    }
    Semantic.gs
    Friday, November 8, 13

    View full-size slide

  272. @column-width: 60;
    @gutter-width: 20;
    @columns: 12;
    @total-width: 100%;
    header { @include column(12); }
    article { @include column(12); }
    aside { @include column(12); }
    @media (min-width: 38em) {
    article { @include column(8); }
    aside { @include column(4); }
    }
    Semantic.gs
    Friday, November 8, 13

    View full-size slide

  273. Semantic.gs
    @column-width: 60;
    @gutter-width: 20;
    @columns: 12;
    @total-width: 100%;
    header { @include column(12); }
    article { @include column(12); }
    aside { @include column(12); }
    @media (min-width: 38em) {
    article { @include column(8); }
    aside { @include column(4); }
    }
    Friday, November 8, 13

    View full-size slide

  274. Semantic.gs
    @column-width: 60;
    @gutter-width: 20;
    @columns: 12;
    @total-width: 100%;
    header { @include column(12); }
    article { @include column(12); }
    aside { @include column(12); }
    @media (min-width: 38em) {
    article { @include column(8); }
    aside { @include column(4); }
    }
    Friday, November 8, 13

    View full-size slide

  275. Semantic.gs
    @column-width: 60;
    @gutter-width: 20;
    @columns: 12;
    @total-width: 100%;
    header { @include column(12); }
    article { @include column(12); }
    aside { @include column(12); }
    @media (min-width: 38em) {
    article { @include column(8); }
    aside { @include column(4); }
    }
    Friday, November 8, 13

    View full-size slide

  276. Or, just roll your own
    Friday, November 8, 13

    View full-size slide

  277. CREATING FLEXIBILITY
    What Needs to Flex
    ‣ Grids
    ‣ Layout
    ‣ Typography
    ‣ Images
    ‣ Tables
    ‣ Video
    Friday, November 8, 13

    View full-size slide

  278. CREATING FLEXIBILITY
    Responsive Layout Patterns
    ‣ Source order stacking
    ‣ Content choreography
    ‣ Off canvas
    Friday, November 8, 13

    View full-size slide

  279. CREATING FLEXIBILITY
    Responsive Layout Patterns
    ‣ Source order stacking
    ‣ Content choreography
    ‣ Off canvas
    Friday, November 8, 13

    View full-size slide

  280. Friday, November 8, 13

    View full-size slide

  281. CREATING FLEXIBILITY
    Responsive Layout Patterns
    ‣ Source order stacking
    ‣ Content choreography
    ‣ Off canvas
    Friday, November 8, 13

    View full-size slide

  282. Friday, November 8, 13

    View full-size slide

  283. Friday, November 8, 13

    View full-size slide

  284. [AppendAround Demo]
    Friday, November 8, 13

    View full-size slide

  285. CREATING FLEXIBILITY
    Responsive Layout Patterns
    ‣ Source order stacking
    ‣ Content choreography
    ‣ Off canvas
    Friday, November 8, 13

    View full-size slide

  286. Friday, November 8, 13

    View full-size slide

  287. Friday, November 8, 13

    View full-size slide

  288. Easiest to show
    a few examples:
    http://jasonweaver.name/lab/offcanvas/
    http://disney.com/
    http://www.lenovo.com/au/en/
    Friday, November 8, 13

    View full-size slide

  289. There are many, many
    combinations of these
    basic ideas
    http://bit.ly/U4N5qH
    (http://bradfrost.github.com/this-is-responsive/patterns.html)
    Friday, November 8, 13

    View full-size slide

  290. There are some really cool
    new layout modules
    coming...
    Friday, November 8, 13

    View full-size slide

  291. http://www.netmagazine.com/tutorials/
    master-new-css-layout-properties
    Friday, November 8, 13

    View full-size slide

  292. http://www.fivesimplesteps.com/
    products/css3-layout-modules
    Friday, November 8, 13

    View full-size slide

  293. CREATING FLEXIBILITY
    What Needs to Flex
    ‣ Grids
    ‣ Layout
    ‣ Typography
    ‣ Images
    ‣ Tables
    ‣ Video
    Friday, November 8, 13

    View full-size slide

  294. Type flexes by default
    Friday, November 8, 13

    View full-size slide

  295. We need to
    consider readability
    Friday, November 8, 13

    View full-size slide

  296. CREATING FLEXIBILITY
    Responsive Typography
    ‣ Small screen != small font-size
    ‣ Consider contrast
    ‣ If text has links, give adequate
    room to touch them
    ‣ Viewport-based type sizing
    Friday, November 8, 13

    View full-size slide

  297. CREATING FLEXIBILITY
    Responsive Typography
    ‣ Small screen != small font-size
    ‣ Consider contrast
    ‣ If text has links, give adequate
    room to touch them
    ‣ Viewport-based type sizing
    Friday, November 8, 13

    View full-size slide

  298. CREATING FLEXIBILITY
    Responsive Typography
    ‣ Small screen != small font-size
    ‣ Consider contrast
    ‣ If text has links, give adequate
    room to touch them
    ‣ Viewport-based type sizing
    Friday, November 8, 13

    View full-size slide

  299. @snookca
    http://snook.ca/technical/colour_contrast/
    colour.html
    @leaverou
    http://leaverou.github.com/contrast-ratio/
    Friday, November 8, 13

    View full-size slide

  300. CREATING FLEXIBILITY
    Responsive Typography
    ‣ Small screen != small font-size
    ‣ Consider contrast
    ‣ If text has links, give adequate
    room to touch them
    ‣ Viewport-based type sizing
    Friday, November 8, 13

    View full-size slide

  301. CREATING FLEXIBILITY
    Responsive Typography
    ‣ Small screen != small font-size
    ‣ Consider contrast
    ‣ If text has links, give adequate
    room to touch them
    ‣ Viewport-based type sizing
    Friday, November 8, 13

    View full-size slide

  302. vw & vh CSS Units
    Friday, November 8, 13

    View full-size slide

  303. JS Alternatives
    Friday, November 8, 13

    View full-size slide

  304. CREATING FLEXIBILITY
    What Needs to Flex
    ‣ Grids
    ‣ Layout
    ‣ Typography
    ‣ Images
    ‣ Tables
    ‣ Video
    Friday, November 8, 13

    View full-size slide

  305. img {
    max-width: 100%;
    }
    Flexible Images
    Friday, November 8, 13

    View full-size slide

  306. http://bit.ly/12TbTX4
    (http://codepen.io/bencallahan/pen/CtLDb)
    Friday, November 8, 13

    View full-size slide

  307. The image problem(s)
    Friday, November 8, 13

    View full-size slide

  308. CREATING FLEXIBILITY
    The image problem(s)
    ‣ Content
    ‣ Bandwidth
    ‣ Pixel density
    Friday, November 8, 13

    View full-size slide

  309. CREATING FLEXIBILITY
    Image: Content
    Friday, November 8, 13

    View full-size slide

  310. CREATING FLEXIBILITY
    Image: Content
    Friday, November 8, 13

    View full-size slide

  311. CREATING FLEXIBILITY
    Image: Content
    Friday, November 8, 13

    View full-size slide

  312. CREATING FLEXIBILITY
    Image: Content
    Friday, November 8, 13

    View full-size slide

  313. CREATING FLEXIBILITY
    Image: Bandwidth
    As of March of 2012, 86% of the sites on
    mediaqueri.es demonstrated the same
    weight and load time at resolutions from
    300ish to 1200ish.
    via @guypod
    http://www.guypo.com/mobile/performance-implications-of-
    responsive-design-book-contribution/
    Friday, November 8, 13

    View full-size slide

  314. CREATING FLEXIBILITY
    Image: Bandwidth
    Responsive & Responsible
    via @scotjehl
    https://speakerdeck.com/scottjehl/responsive-responsible
    http://www.lukew.com/ff/entry.asp?1565
    Friday, November 8, 13

    View full-size slide

  315. CREATING FLEXIBILITY
    Image: Pixel Density
    Most new mobile devices have high
    pixel density displays:
    Apple iPhone 4+: 326 PPI
    Amazon Kindle Fire HD 8.9: 254 PPI
    Nokia Lumia 920: 332 PPI
    BlackBerry Z10: 356 PPI
    Samsung Galaxy Note: 285 PPI
    Friday, November 8, 13

    View full-size slide

  316. CREATING FLEXIBILITY
    The image problem(s)
    ‣ Content
    ‣ Bandwidth
    ‣ Pixel density
    Friday, November 8, 13

    View full-size slide

  317. CREATING FLEXIBILITY
    The image solution(s)
    ‣ SVG
    ‣ Icon fonts
    ‣ Pixel-density media queries
    ‣ Compressive
    ‣ Picturefill
    ‣ User preference
    Friday, November 8, 13

    View full-size slide

  318. SVG (Scalable Vector
    Graphics)
    ‣ Allows the image to be resolution
    independent.
    ‣ Support isn’t very good for older
    browsers.
    ‣ We can use Modernizr to detect if
    the browser supports SVG and
    provide a .png fallback for those
    that do not.
    Friday, November 8, 13

    View full-size slide

  319. @dbushell wrote a great primer for SVG
    Friday, November 8, 13

    View full-size slide

  320. Icon Fonts
    ‣ Fonts by default are resolution
    independent, Icon fonts are no
    different.
    ‣ http://icomoon.io/app/ allows
    you to create your own icon fonts
    ‣ They do require a bit more
    markup, and JS for IE 7 and lower.
    Friday, November 8, 13

    View full-size slide



  321. data-icon="">
    Search

    Icon Font Markup
    /*.scss*/
    [data-icon]:before {
    content: attr(data-icon);
    font-family: 'icon-font-family';
    speak: none;
    }
    Friday, November 8, 13

    View full-size slide

  322. “Compressive” Images
    ‣ http://bit.ly/Sygdey
    ‣ Increase the image dimensions
    ‣ Add massive compression
    ‣ Scale the image in the browser
    Friday, November 8, 13

    View full-size slide

  323. Pixel Density MQs
    ‣ Detect the pixel ratio of the
    device and serve a second,
    higher-res image.
    ‣ Retina devices now have to make
    an additional request for the
    retina asset.
    Friday, November 8, 13

    View full-size slide

  324. /*.scss*/
    @media only all and
    (-webkit-min-device-pixel-ratio: 1.5) {
    .logo {
    background-image: url(/i/logo-2x.png);
    background-size: 100%;
    }
    }
    Pixel Density MQs
    Also need other
    browser prefixes
    Friday, November 8, 13

    View full-size slide

  325. New Markup
    ‣ Picture
    - http://www.w3.org/TR/html-picture-
    element/
    ‣ Srcset
    - http://www.w3.org/html/wg/drafts/
    srcset/w3c-srcset/
    ‣ SrcN
    - http://tabatkins.github.io/specs/
    respimg/Overview.html
    Friday, November 8, 13

    View full-size slide

  326. Picture Polyfill
    Friday, November 8, 13

    View full-size slide

  327. Srcset Polyfill
    Friday, November 8, 13

    View full-size slide

  328. SrcN Proposed Spec
    Friday, November 8, 13

    View full-size slide

  329. User Preference
    ‣ Allow the user to choose what
    experience they would like to
    have on their device: “HD” or
    “SD”.
    Friday, November 8, 13

    View full-size slide

  330. CREATING FLEXIBILITY
    What Needs to Flex
    ‣ Grids
    ‣ Layout
    ‣ Typography
    ‣ Images
    ‣ Tables
    ‣ Video
    Friday, November 8, 13

    View full-size slide

  331. RWD Table Patterns
    [demo]
    Friday, November 8, 13

    View full-size slide

  332. CREATING FLEXIBILITY
    What Needs to Flex
    ‣ Grids
    ‣ Layout
    ‣ Typography
    ‣ Images
    ‣ Tables
    ‣ Video
    Friday, November 8, 13

    View full-size slide

  333. CREATING FLEXIBILITY
    Video
    Friday, November 8, 13

    View full-size slide

  334. CREATING FLEXIBILITY
    Intrinsic Ratios
    http://codepen.io/bencallahan/pen/KICkl
    Friday, November 8, 13

    View full-size slide

  335. CREATING FLEXIBILITY
    Video
    Friday, November 8, 13

    View full-size slide

  336. Creating
    flexibility requires
    experimentation
    Friday, November 8, 13

    View full-size slide

  337. Creating
    flexibility requires
    Friday, November 8, 13

    View full-size slide

  338. Discussion
    ‣ What content types have we not
    addressed?
    ‣ What specific challenges are you
    facing in creating flexibility?
    Friday, November 8, 13

    View full-size slide

  339. UNIQUE CONSIDERATIONS AND CHALLENGES
    NAVIGATION
    AND RWD
    Friday, November 8, 13

    View full-size slide

  340. NAVIGATION AND RWD
    Major Issues
    ‣ Site Depth and Breadth
    ‣ Screen Real Estate
    ‣ Cross-width Consistency
    ‣ Design Patterns
    Friday, November 8, 13

    View full-size slide

  341. NAVIGATION AND RWD
    Major Issues
    ‣ Site Depth and Breadth
    ‣ Screen Real Estate
    ‣ Cross-width Consistency
    ‣ Design Patterns
    Friday, November 8, 13

    View full-size slide

  342. Small sites often allow
    simpler solutions.
    Friday, November 8, 13

    View full-size slide

  343. Simple Nav Examples
    ‣ Simple Row
    ‣ Jump to Content
    ‣ Jump to Footer
    ‣ Top Stacked Off Canvas
    Friday, November 8, 13

    View full-size slide

  344. Simple Nav Examples
    ‣ Simple Row
    ‣ Jump to Content
    ‣ Jump to Footer
    ‣ Top Stacked
    Off Canvas
    http://seesparkbox.com
    Friday, November 8, 13

    View full-size slide

  345. Simple Nav Examples
    ‣ Simple Row
    ‣ Jump to Content
    ‣ Jump to Footer
    ‣ Top Stacked
    Off Canvas
    http://forgeideas.com
    Friday, November 8, 13

    View full-size slide

  346. Simple Nav Examples
    ‣ Simple Row
    ‣ Jump to Content
    ‣ Jump to Footer
    ‣ Top Stacked
    Off Canvas
    http://contentsmagazine.com
    Friday, November 8, 13

    View full-size slide

  347. Simple Nav Examples
    ‣ Simple Row
    ‣ Jump to Content
    ‣ Jump to Footer
    ‣ Top Stacked
    Off Canvas
    http://2012.dconstruct.org/
    Friday, November 8, 13

    View full-size slide

  348. Most sites have to
    work a bit harder to
    accommodate their
    content.
    Friday, November 8, 13

    View full-size slide

  349. Complex Nav Causes
    ‣ Large volume of content
    - Legacy content
    - Dynamic content
    ‣ Broad architecture
    - Lots of content types/categories
    ‣ Deep architecture
    - Lots of children and nesting
    Friday, November 8, 13

    View full-size slide

  350. Complex Nav Causes
    ‣ Large volume of content
    - Legacy content
    - Dynamic content
    ‣ Broad architecture
    - Lots of content types/categories
    ‣ Deep architecture
    - Lots of children and nesting
    DON’T GIVE UP.
    Friday, November 8, 13

    View full-size slide

  351. Before accommodating all
    the things, it’s not a cop-
    out to question the things.
    Friday, November 8, 13

    View full-size slide

  352. Attack the right nav.
    Friday, November 8, 13

    View full-size slide

  353. Complex Nav Causes
    ‣ Poor Information Architecture
    - Unnecessarily broad or deep due
    to inefficiency or poor planning
    ‣ Poor Content Strategy
    - Unnecessarily large due to a lack of
    governance, ownership, or
    intentionality
    POSSIBLE ROOT
    Friday, November 8, 13

    View full-size slide

  354. NAVIGATION AND RWD
    Major Issues
    ‣ Site Depth and Breadth
    ‣ Screen Real Estate
    ‣ Cross-width Consistency
    ‣ Design Patterns
    Friday, November 8, 13

    View full-size slide

  355. Small screens aren’t just
    horizontally small.
    Friday, November 8, 13

    View full-size slide

  356. Landscape iPhone:
    320 px
    (~150px w/ keyboard:)
    Friday, November 8, 13

    View full-size slide

  357. Don’t make small screens
    smaller by eating up
    vertical space with nav.
    Friday, November 8, 13

    View full-size slide

  358. http://www.tuj.ac.jp/
    Friday, November 8, 13

    View full-size slide

  359. http://
    seesparkbox.com/
    foundry
    Friday, November 8, 13

    View full-size slide

  360. Take ALL the navigation
    into account.
    Friday, November 8, 13

    View full-size slide

  361. http://skinnyties.com/
    color/blue/
    Friday, November 8, 13

    View full-size slide

  362. NAVIGATION AND RWD
    Major Issues
    ‣ Site Depth and Breadth
    ‣ Screen Real Estate
    ‣ Cross-width Consistency
    ‣ Design Patterns
    Friday, November 8, 13

    View full-size slide

  363. “Users don’t resize their
    browser. That’s a
    developer behavior.”
    Friday, November 8, 13

    View full-size slide

  364. Our users are viewing our
    sites at multiple
    resolutions.
    Friday, November 8, 13

    View full-size slide

  365. Familiarity breeds
    usability.
    Friday, November 8, 13

    View full-size slide

  366. Are our off-canvas and
    other RWD-inspired
    patterns doing more harm
    than good?
    Friday, November 8, 13

    View full-size slide

  367. Pros & Cons
    from
    http://
    thenextweb.com/
    Friday, November 8, 13

    View full-size slide

  368. Do we need to change the
    user’s pattern at all?
    Friday, November 8, 13

    View full-size slide

  369. http://
    www.polygon.com/
    Friday, November 8, 13

    View full-size slide

  370. NAVIGATION AND RWD
    Major Issues
    ‣ Site Depth and Breadth
    ‣ Screen Real Estate
    ‣ Cross-width Consistency
    ‣ Design Patterns
    Friday, November 8, 13

    View full-size slide

  371. There is no right answer.
    Friday, November 8, 13

    View full-size slide

  372. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    http://bradfrost.github.com/this-is-responsive/patterns.html
    Friday, November 8, 13

    View full-size slide

  373. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  374. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  375. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  376. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  377. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  378. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  379. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  380. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  381. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  382. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  383. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  384. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  385. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  386. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  387. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  388. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  389. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  390. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  391. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  392. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  393. Patterns Galore
    ‣ Toggle
    ‣ Footer Anchor
    ‣ Select Menu
    ‣ Multi-Toggle
    ‣ Off Canvas
    ‣ Breadcrumbs
    ‣ More...
    Friday, November 8, 13

    View full-size slide

  394. Be open to combining
    patterns.
    Friday, November 8, 13

    View full-size slide

  395. Only try completely
    unique/novel patterns if
    you plan to fully test them.
    Friday, November 8, 13

    View full-size slide

  396. Discussion
    ‣ How are you handling navigation
    in your RWD projects?
    ‣ Have you been able to push back
    on IA?
    Friday, November 8, 13

    View full-size slide

  397. @BENCALLAHAN
    Retrofitting
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  398. @BENCALLAHAN
    What is a Retrofit?
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  399. @BENCALLAHAN
    What is a Retrofit?
    Finding the fastest and lowest-risk approach
    to creating a better experience on an existing
    site for users of any size screen.
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  400. @BENCALLAHAN
    What is a Retrofit?
    1. How to do it.
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  401. @BENCALLAHAN
    What is a Retrofit?
    1. How to do it.
    2. Managing your client.
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  402. @BENCALLAHAN
    @klayon
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  403. @BENCALLAHAN
    @klayon
    ...performance is important, but access is
    more important. Mobile later is better than
    mobile never.
    From “Responsive images for mobile: don’t sweat it” (http://tiny.cc/vr24gw)
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  404. @BENCALLAHAN
    Retrofitting Techniques
    http://github.com/bencallahan/rwd-retrofitting
    If you like, you can clone this repository:
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  405. @BENCALLAHAN
    Retrofitting Techniques: From Fixed to Fluid
    (demo of Twitter.com)
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  406. @BENCALLAHAN
    Retrofitting Techniques: From Fixed to Fluid
    ➡ Demo of Twitter.com
    http://www.alistapart.com/articles/fluidgrids/
    target  /  context  =  result
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  407. @BENCALLAHAN
    Retrofitting Techniques: From Fixed to Fluid
    ➡ Demo of Twitter.com
    http://www.alistapart.com/articles/fluidgrids/
    target  /  context  =  result
    302  /  837  =  36.08%
    522  /  837  =  62.37%
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  408. @BENCALLAHAN
    Retrofitting Techniques: From Fixed to Fluid
    ➡ Demo of Twitter.com
    http://paulirish.com/2012/box-sizing-border-box-ftw/
    *  {
         -­‐moz-­‐box-­‐sizing:  border-­‐box;
         -­‐webkit-­‐box-­‐sizing:  border-­‐box;
         box-­‐sizing:  border-­‐box;
    }
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  409. @BENCALLAHAN
    Retrofitting Techniques: From Fixed to Fluid
    ➡ Demo of Twitter.com
    /*  some  css  */
    @media  (max-­‐width:  500px)  {
         /*  css  for  500px  and  lower  */
    }
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  410. @BENCALLAHAN
    Retrofitting Techniques: Inline Image Styles
    (demo of /Images)
    http://github.com/bencallahan/rwd-retrofitting
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  411. @BENCALLAHAN
    Retrofitting Techniques: Inline Image Styles
    ➡ Support
    ‣ FireFox 5+ Win/Mac
    ‣ IE7+ (exception: IE8 & min-width)
    ‣ Chrome 14+ Win/Mac
    ‣ Safari 4+ Win, 5+ Mac
    ‣ Opera 10+ Win, 11+ Mac
    ‣ Mobile Safari (iOS 5)
    ‣ Android Browser 2.3+
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  412. @BENCALLAHAN
    Retrofitting Techniques: Background Images
    Tim Kadlec on timkadlec.com
    “Media Query & Asset Downloading Results”
    ‣ display: none on parent element
    ‣ specify all background images inside media queries
    http://timkadlec.com/2012/04/media-query-asset-downloading-results/
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  413. @BENCALLAHAN
    Retrofitting Techniques: Tables
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  414. @BENCALLAHAN
    Retrofitting Techniques: Tables
    (demo of /Tables)
    http://github.com/bencallahan/rwd-retrofitting
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  415. @BENCALLAHAN
    Retrofitting Techniques: Tables
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  416. @BENCALLAHAN
    Retrofitting Techniques: Media Queries
    ➡ Large Resolution First
    ➡ Small Resolution First, Capped
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  417. @BENCALLAHAN
    Retrofitting Techniques: Media Queries
    ➡ Large Resolution First
    /*  FILE:  main.css  */
    /*  all  your  original  styles  */
    @media  (max-­‐width:  53em)  {
       /*  styles  for  53em  and  lower  */
    }
    @media  (max-­‐width:  37em)  {
       /*  styles  for  37em  and  lower  */
    }
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  418. @BENCALLAHAN
    Retrofitting Techniques: Media Queries
    ➡ Small Resolution First, Capped
    ‣ Serve the original CSS to large viewports
    ‣ Serve mobile-first CSS to small viewports
    ‣ No changes to original CSS
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  419. @BENCALLAHAN
    Retrofitting Techniques: Media Queries
    ➡ Small Resolution First, Capped


       
       <br/>        yepnope({<br/>            test  :  Modernizr.mq(‘(min-­‐width:  0px)’),<br/>            yep    :  ‘base.css’,<br/>            nope  :  ‘original.css’<br/>        });  <br/>    
       
           
       

    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  420. @BENCALLAHAN
    Retrofitting Techniques: Media Queries
    ➡ Small Resolution First, Capped
    @media (max-width: 979px) {
    @import "small";
    }
    @media (min-width: 661px) and (max-width: 979px) {
    @import "medium";
    }
    @media (min-width: 980px) {
    @import "original";
    }
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  421. @BENCALLAHAN
    Client Interaction
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  422. @BENCALLAHAN
    Client Interaction: Great Need
    Big Companies
    + No Mobile Presence
    + Triple Digit Growth
    = Anxious Clients
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  423. @BENCALLAHAN
    Client Interaction: Great Need
    Less than Half the Cost
    + Less than Half the Time
    + Increased Conversions
    = Desperate Clients
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  424. @BENCALLAHAN
    Client Interaction: When It’s Right
    ➡ Evaluate the Project
    ‣ Solid UX at higher widths?
    ‣ Semantic markup?
    ‣ Immediate need?
    ‣ Real benefit for the user?
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  425. @BENCALLAHAN
    Client Interaction: Proceed Carefully
    Retrofitting is a step in
    the right direction.
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  426. @BENCALLAHAN
    Client Interaction: Proceed Carefully
    Make sure you’re
    capturing analytics.
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  427. @BENCALLAHAN
    Constantly remind them
    of the user.
    Client Interaction: Proceed Carefully
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  428. @BENCALLAHAN
    When you’re done and
    they ask for more...
    Client Interaction: Proceed Carefully
    ...push for even better
    experiences!
    RESPONSIVE RETROFITTING
    Friday, November 8, 13

    View full-size slide

  429. Discussion
    ‣ Have you used responsive
    techniques on older sites?
    ‣ Does retrofitting seem like a good
    idea for your situation?
    Friday, November 8, 13

    View full-size slide

  430. LEARN FROM OUR MISTAKES
    LESSONS
    LEARNED
    Friday, November 8, 13

    View full-size slide

  431. Testing
    Friday, November 8, 13

    View full-size slide

  432. LESSONS LEARNED
    Testing
    ‣ You must test on real devices
    ‣ Do your development in a webkit
    browser
    ‣ Bulid libraries of your patterns
    Friday, November 8, 13

    View full-size slide

  433. Pricing
    Friday, November 8, 13

    View full-size slide

  434. LESSONS LEARNED
    Pricing
    ‣ As much as 100% more, initially
    ‣ Likely to be 50% more, soon after
    ‣ Probably never less than 25% more
    Friday, November 8, 13

    View full-size slide

  435. LESSONS LEARNED
    Pricing
    ‣ As much as 100% more, initially
    ‣ Likely to be 50% more, soon after
    ‣ Probably never less than 25% more
    COMPARED TO
    WHAT?
    Friday, November 8, 13

    View full-size slide

  436. LESSONS LEARNED
    Pricing
    ‣ Testing (labs & time)
    ‣ Fewer patterns
    ‣ Project management
    ‣ Learning curve
    ‣ Maintenance
    ‣ Content strategy
    Friday, November 8, 13

    View full-size slide

  437. Prioritization
    Friday, November 8, 13

    View full-size slide

  438. LESSONS LEARNED
    Prioritization
    Friday, November 8, 13

    View full-size slide

  439. LESSONS LEARNED
    Prioritization
    Friday, November 8, 13

    View full-size slide

  440. LESSONS LEARNED
    Prioritization
    Friday, November 8, 13

    View full-size slide

  441. LESSONS LEARNED
    Prioritization
    Friday, November 8, 13

    View full-size slide

  442. LESSONS LEARNED
    Prioritization
    Friday, November 8, 13

    View full-size slide

  443. Performance
    Friday, November 8, 13

    View full-size slide

  444. LESSONS LEARNED
    Performance
    ‣ Optimize or cut out images
    ‣ Decrease the number of requests
    ‣ Gzip if you can
    ‣ Concat and minify CSS/JS
    ‣ Load CSS at the top
    ‣ Load JS at the bottom
    ‣ Follow @souders on Twitter
    Friday, November 8, 13

    View full-size slide

  445. Barriers
    Friday, November 8, 13

    View full-size slide

  446. LESSONS LEARNED
    Barriers
    ‣ Organization barriers block
    collaboration
    ‣ Must have buy in from upper
    management
    ‣ Must have buy in from those doing
    the work
    ‣ It’s not easy, we’re still
    figuring it out
    Friday, November 8, 13

    View full-size slide

  447. SOME THOUGHTS ON WHAT’S NEXT IN RWD
    WHERE
    WE’RE GOING
    Friday, November 8, 13

    View full-size slide

  448. Friday, November 8, 13

    View full-size slide

  449. SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  450. Unconscious
    Incompetence
    SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  451. Unconscious
    Incompetence
    Conscious
    Incompetence
    SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  452. Unconscious
    Incompetence
    Conscious
    Incompetence Conscious
    Competence
    SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  453. Unconscious
    Incompetence
    Conscious
    Incompetence Conscious
    Competence
    Unconscious
    Competence
    SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  454. Fluency
    SOLVE THE PROBLEM
    Friday, November 8, 13

    View full-size slide

  455. Jakob Nielsen Says...
    ‣ Build a separate mobile site
    ‣ Cut features
    ‣ Cut content
    http://www.nngroup.com/articles/mobile-site-vs-full-site/
    Friday, November 8, 13

    View full-size slide

  456. Jakob Nielsen Says...
    ‣ Build a separate mobile site
    ‣ Cut features
    ‣ Cut content
    http://www.nngroup.com/articles/mobile-site-vs-full-site/
    PLEASE, NO.
    Friday, November 8, 13

    View full-size slide

  457. The Responsive Dip
    http://bit.ly/MasqBk
    Friday, November 8, 13

    View full-size slide

  458. The Responsive Mindset
    “The truly responsive design web
    designer wasn’t born until after the
    launch of the iPhone. We haven’t seen his
    or her work yet.”
    Andy Clarke
    http://the-pastry-box-project.net/andy-clarke/2012-april-8/
    Friday, November 8, 13

    View full-size slide

  459. There are many
    problems left to solve.
    We’ll solve them much faster if we
    solve them together.
    Friday, November 8, 13

    View full-size slide

  460. THANKS!
    @bencallahan @drewtclemens
    Friday, November 8, 13

    View full-size slide