$30 off During Our Annual Pro Sale. View Details »

Build Right: Build Responsively 2014

Build Right
February 24, 2014

Build Right: Build Responsively 2014

The deck from the full day Build Right: Build Responsively workshop in Dayton, Ohio on February 24, 2014.

Build Right

February 24, 2014
Tweet

More Decks by Build Right

Other Decks in Design

Transcript

  1. @bencallahan @jeremyloyd

    View Slide

  2. @hearsparkbox @brworkshop
    !
    @bencallahan @jeremyloyd

    View Slide

  3. #brworkshop

    View Slide

  4. Collaborative note-taking:
    !
    http://bit.ly/1fmWbsG

    View Slide

  5. AN INTRODUCTION TO RESPONSIVE WEB DESIGN
    RWD 101

    View Slide

  6. September 9, 2007
    6:30am

    View Slide

  7. 177%
    increase in tablet
    ownership since last year
    In the US...
    http://bit.ly/YFW4Ai

    View Slide

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

    View Slide

  9. 26%
    of consumers own a
    laptop, tablet &
    smartphone
    http://bit.ly/YFW4Ai
    In the US...

    View Slide

  10. The web is not fixed width.

    View Slide

  11. The penetration of desktop
    & laptop ownership is the
    same today as it was in
    2007.
    http://bit.ly/zE1zgp
    In the US...

    View Slide

  12. 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

    View Slide

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

    View Slide

  14. Q1 2013
    conversions on tablets
    surpassed conversions on
    traditional desktops
    http://bit.ly/sNpLte
    In the US...

    View Slide

  15. Flexibility is the new norm.

    View Slide

  16. People are trying to
    browse your sites on these
    devices, today.

    View Slide

  17. Responsive web design

    View Slide

  18. Ethan Marcotte
    !
    Article on ALA
    (http://bit.ly/Wi0xvw)
    !
    Book via ABA
    (http://bit.ly/f6TPB7)

    View Slide

  19. View Slide

  20. RWD 101
    ‣ Three Core Techniques
    - A Fluid Foundation
    - Flexible Content
    - Media Queries

    View Slide

  21. A Fluid Foundation
    Honor the proportions of
    the design by creating
    percentage-based layout
    instead of fixed-width,
    pixel-based layout.

    View Slide

  22. 1000px
    400px
    600px
    A Fluid Foundation

    View Slide

  23. 1000px
    600px
    A Fluid Foundation

    View Slide

  24. 100%
    40%
    60%
    A Fluid Foundation

    View Slide

  25. 100%
    40%
    60%
    A Fluid Foundation

    View Slide

  26. Flexible Content
    Once we have a layout
    which is based on
    proportions, the content
    must also respond.

    View Slide

  27. We the People of the United States, in
    Order to form a more perfect Union,
    establish Justice, insure domestic
    Tranquility, provide for the common
    defense, 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

    View Slide

  28. We the People of
    the United States, in
    Order to form a
    more perfect Union,
    establish Justice,
    insure domestic
    Tranquility, provide
    for the common
    defense, promote
    the general Welfare,
    and secure the
    Blessings of Liberty
    to ourselves and our
    Posterity, do ordain
    Flexible Content

    View Slide

  29. We the People of the United States, in
    Order to form a more perfect Union,
    establish Justice, insure domestic
    Tranquility, provide for the common
    (Image)
    600px
    Flexible Content

    View Slide

  30. We the People of
    the United States, in
    Order to form a
    more perfect Union,
    (Image)
    600px
    Flexible Content

    View Slide

  31. Flexible Content
    http://bit.ly/ZdC8pH
    We the People of
    the United States, in
    Order to form a
    more perfect Union,
    (Image)
    600px

    View Slide

  32. We the People of
    the United States, in
    Order to form a
    more perfect Union,
    establish Justice,
    insure domestic
    Tranquility, provide
    for the common
    defense, promote
    (Image)
    100%
    Flexible Content

    View Slide

  33. Media Queries
    When our content and our
    design are no longer
    working in harmony, we
    need to make a larger shift
    in layout.

    View Slide

  34. Media Queries
    100%
    40%
    60%

    View Slide

  35. A
    100%
    C
    100%
    B
    100%
    C
    40%
    B
    60%
    A
    100%
    Media Queries

    View Slide

  36. Media Queries
    A
    100%
    C
    100%
    B
    100%
    C
    40%
    B
    60%
    A
    100%

    View Slide

  37. Checkout:
    http://microsoft.com
    http://skinnyties.com

    View Slide

  38. RWD 101
    ‣ Three Core Techniques
    - A Fluid Foundation
    - Flexible Content
    - Media Queries

    View Slide

  39. http://codepen.io/
    bencallahan/details/gsCdL

    View Slide

  40. HOW RWD HAS CHANGED PROCESS
    RWD WORKFLOW

    View Slide

  41. We used to pretend like
    things were pretty simple.

    View Slide

  42. fixed width
    1024ish
    768ish

    View Slide

  43. DESIGN FRONT-END BACK-END LAUNCH!
    Linear Workflow
    THINK ABOUT 

    USERS
    THROW IN
    SOME CONTENT

    View Slide

  44. Slightly Better 

    Linear Workflow
    CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!

    View Slide

  45. Why hello,
    RWD.

    View Slide

  46. Why hello,
    tiny browsers.

    View Slide

  47. Why hello,
    reality.

    View Slide

  48. THIS IS AWESOME,
    LET’S JUMP IN!

    View Slide

  49. Me too!
    Ditto!
    Old Linear Workflow
    Now with
    RWD!
    CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!

    View Slide

  50. This doesn’t work.

    View Slide

  51. We need to invite others
    into the process.

    View Slide

  52. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow

    View Slide

  53. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow

    View Slide

  54. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow

    View Slide

  55. LAUNCH
    DESIGN
    FRONT
    END
    BACK
    END
    CONTENT
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    CONTENT UX
    FRONT-END
    DESIGN
    BACK-END

    View Slide

  56. 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

    View Slide

  57. CONTENT UX
    Content, Planning & UX Tools

    View Slide

  58. Content & Planning
    ‣ Content Audit
    ‣ Information Architecture
    ‣ Content Priority Guides
    ‣ Content Prototypes
    ‣ Static Wireframes
    ‣ Interactive Wireframes

    View Slide

  59. CONTENT & PLANNING
    Content Audit

    View Slide

  60. CONTENT & PLANNING
    Information Architecture

    View Slide

  61. CONTENT & PLANNING
    Content Priority Guides

    View Slide

  62. Write the Content

    View Slide

  63. CONTENT & PLANNING
    Content Prototypes

    View Slide

  64. CONTENT & PLANNING
    Static Wireframes

    View Slide

  65. CONTENT & PLANNING
    Interactive Wireframes

    View Slide

  66. FRONT-END
    DESIGN
    ND
    !
    Design in the 

    “1 deliverable”
    workflow

    View Slide

  67. Dissecting Design
    PRODUCTIVITY
    TIME

    View Slide

  68. Dissecting Design
    PRODUCTIVITY
    TIME

    View Slide

  69. Establish the Aesthetic
    DISSECTING DESIGN

    View Slide

  70. Solve the Problem
    DISSECTING DESIGN

    View Slide

  71. “I’ve been amazed at how often those
    outside the discipline of design
    assume that what designers do is
    decoration. Good design is problem
    solving.”
    !
    @veen

    View Slide

  72. Refine the Solution
    DISSECTING DESIGN

    View Slide

  73. View Slide

  74. Establish the Aesthetic
    DISSECTING DESIGN

    View Slide

  75. DISSECTING DESIGN
    ‣ Style Comparisons
    ‣ Style Tiles
    ‣ Style Prototypes
    Establish the Aesthetic

    View Slide

  76. 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/

    View Slide

  77. Style Comparisons
    ESTABLISH THE AESTHETIC
    Light vs Dark

    View Slide

  78. Style Comparisons
    ESTABLISH THE AESTHETIC
    Flat vs Textured

    View Slide

  79. Style Comparisons
    ESTABLISH THE AESTHETIC
    Illustration vs Photography

    View Slide

  80. Style Tiles
    ESTABLISH THE AESTHETIC

    View Slide

  81. Style Tiles
    ESTABLISH THE AESTHETIC

    View Slide

  82. Style Tiles
    ESTABLISH THE AESTHETIC

    View Slide

  83. Style Prototypes
    ESTABLISH THE AESTHETIC

    View Slide

  84. USE TOOLS YOU ARE
    COMFORTABLE WITH
    TO ESTABLISH THE
    AESTHETIC
    HOW TO DECIDE

    View Slide

  85. Cool, so what
    happens next?

    View Slide

  86. Solve the Problem
    DISSECTING DESIGN

    View Slide

  87. DISSECTING DESIGN
    ‣ Static Design Tools
    ‣ Responsive Design Tools
    ‣ HTML/CSS
    Solve the Problem

    View Slide

  88. Static Design Tools
    SOLVE THE PROBLEM

    View Slide

  89. Static Design Tools
    SOLVE THE PROBLEM

    View Slide

  90. Static Design Tools
    SOLVE THE PROBLEM

    View Slide

  91. Responsive Design Tools
    SOLVE THE PROBLEM

    View Slide

  92. SOLVE THE PROBLEM
    Responsive Design Tools

    View Slide

  93. SOLVE THE PROBLEM
    Responsive Design Tools

    View Slide

  94. SOLVE THE PROBLEM
    Responsive Design Tools

    View Slide

  95. HTML/CSS
    SOLVE THE PROBLEM

    View Slide

  96. HTML/CSS
    SOLVE THE PROBLEM

    View Slide

  97. HTML/CSS
    SOLVE THE PROBLEM

    View Slide

  98. Layout vs Modules
    SOLVE THE PROBLEM

    View Slide

  99. Layout vs Modules
    SOLVE THE PROBLEM

    View Slide

  100. SOLVE THE PROBLEM
    Atomic Design

    View Slide

  101. View Slide

  102. View Slide

  103. YOU BEST SOLVE
    PROBLEMS USING
    TOOLS YOU ARE
    FLUENT WITH
    HOW TO DECIDE

    View Slide

  104. Refine the Solution
    DISSECTING DESIGN

    View Slide

  105. DISSECTING DESIGN
    ‣ Static Design Tools
    ‣ Design Pairing
    Refine the Solution

    View Slide

  106. DISSECTING DESIGN
    Don’t Use Static Design
    Tools to Refine
    LAUNCH
    DESIGN
    FRONT
    END
    BACK
    END
    CONTENT
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE

    View Slide

  107. Don’t Use Static Design Tools
    REFINE THE SOLUTION

    View Slide

  108. Instead of static design 

    hand-offs, consider

    design pairing
    REFINE THE SOLUTION

    View Slide

  109. REFINE THE SOLUTION
    Design Pairing

    View Slide

  110. REFINE THE SOLUTION
    Design Pairing

    View Slide

  111. Design Pairing
    REFINE THE SOLUTION

    View Slide

  112. Design Pairing
    REFINE THE SOLUTION

    View Slide

  113. You don’t want to do the long
    tail more than once
    REFINE THE SOLUTION

    View Slide

  114. The Switching Point
    REFINE THE SOLUTION

    View Slide

  115. EFFICIENCY IS KEY
    WHEN REFINING A
    DESIGN SOLUTION
    HOW TO DECIDE

    View Slide

  116. Establish
    !
    Solve
    !
    Refine
    ................. Comfort
    !
    ....................... Fluency
    !
    ................... Efficiency
    Guidelines for Selecting Tools

    View Slide

  117. Photo Credit: Jay Maisel

    View Slide

  118. 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

    View Slide

  119. 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
    The Problem of the Team

    View Slide

  120. 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
    The Problem of the Individual

    View Slide

  121. Group Improvisation

    View Slide

  122. Individuals

    View Slide

  123. Group improvisation requires
    individuals on a team to...
    !
    be fluent

    View Slide

  124. View Slide

  125. SOLVE THE PROBLEM

    View Slide

  126. Unconscious
    Incompetence
    SOLVE THE PROBLEM

    View Slide

  127. Unconscious
    Incompetence
    Conscious
    Incompetence
    SOLVE THE PROBLEM

    View Slide

  128. Unconscious
    Incompetence
    Conscious
    Incompetence Conscious
    Competence
    SOLVE THE PROBLEM

    View Slide

  129. Unconscious
    Incompetence
    Conscious
    Incompetence Conscious
    Competence
    Unconscious
    Competence
    SOLVE THE PROBLEM

    View Slide

  130. Fluency
    SOLVE THE PROBLEM

    View Slide

  131. Group improvisation requires
    individuals on a team to...
    !
    be humble

    View Slide

  132. Group improvisation requires
    individuals on a team to...
    !
    be empathetic

    View Slide

  133. Fluency
    Humility
    Empathy

    View Slide

  134. Teams

    View Slide

  135. View Slide

  136. View Slide

  137. View Slide

  138. View Slide

  139. View Slide

  140. View Slide

  141. Create guidelines instead
    of rigid process

    View Slide

  142. The amount of process
    required is inversely
    proportionate to the
    skill and experience of
    your team.

    View Slide

  143. Create the perfect, fully-documented,
    all-encompassing web design and
    development process.
    !
    Or...

    View Slide

  144. Chill out and develop our people.

    View Slide

  145. Invest in people
    over process

    View Slide

  146. CODE AND PROJECT STRUCTURE
    SERVING
    RWD STYLES

    View Slide

  147. SERVING RWD STYLES
    Major Approaches
    ‣ Single CSS File
    ‣ Multiple CSS Files
    ‣ Breakpoint Based Partials
    ‣ Module Based Partials

    View Slide

  148. SERVING RWD STYLES
    Major Approaches
    ‣ Single CSS File
    ‣ Multiple CSS Files
    ‣ Breakpoint Based Partials
    ‣ Module Based Partials
    CSS PREPROCESSING FTW!

    View Slide

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

    content="width=device-width; 

    initial-scale=1.0;">

    View Slide

  150. 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; }"

    View Slide

  151. 30%
    50%
    100%
    The Example

    View Slide

  152. SERVING RWD STYLES
    Major Approaches
    ‣ Single CSS File
    ‣ Multiple CSS Files
    ‣ Breakpoint Based Partials
    ‣ Module Based Partials

    View Slide

  153. Single CSS File
    HTML

    CSS
    !
    Start with styles 

    applied to all
    !
    Styles scoped to 

    a media query
    !
    Styles scoped to 

    another media query

    View Slide

  154. Single CSS File
    /* styles.css */"
    !
    aside { color: #333; width: 100%; }"

    View Slide

  155. Single CSS File
    /* styles.css */"
    !
    aside { color: #333; width: 100%; }"
    !
    /* if the viewport width is 40em or greater */"

    View Slide

  156. PAUSE:
    MEDIA QUERIES

    View Slide

  157. Media Queries
    "
    !
    !
    !
    !
    !
    /* In your CSS */"
    !
    @media (min-width: 30em) { ... }"
    !
    @media screen and (max-width: 80em) { ... }

    View Slide

  158. Media Types
    "
    !
    !
    !
    !
    !
    /* In your CSS */"
    !
    @media (min-width: 30em) { ... }"
    !
    @media screen and (max-width: 80em) { ... }

    View Slide

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

    View Slide

  160. Media Features
    "
    !
    !
    !
    !
    !
    /* In your CSS */"
    !
    @media (orientation: portrait) { ... }"
    !
    @media screen and (color) { ... }

    View Slide

  161. 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

    View Slide

  162. Single CSS File
    HTML

    CSS
    !
    Start with styles 

    applied to all
    !
    Styles scoped to a

    media query
    !
    Styles scoped to 

    another media query

    View Slide

  163. Small Viewport Width First
    HTML

    CSS
    !
    Smallest styles
    !
    Wider styles (mq)
    !
    Even wider styles (mq)
    !
    Super wide styles (mq)

    View Slide

  164. Large Viewport Width First
    HTML

    CSS
    !
    Widest styles
    !
    Wide styles (mq)
    !
    Narrow styles (mq)
    !
    Very narrow styles (mq)

    View Slide

  165. Single CSS File
    /* styles.css */"
    !
    aside { color: #333; width: 100%; }"
    !
    /* if the viewport width is 40em or greater */"

    View Slide

  166. 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%; }"
    }"

    View Slide

  167. 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%; }"
    }"

    View Slide

  168. 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%; }"
    }

    View Slide

  169. Single CSS File
    Small Viewport
    Width First
    /* 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%; }"
    }

    View Slide

  170. Single CSS File
    Large Viewport
    Width First
    /* 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%; }"
    }

    View Slide

  171. 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

    View Slide

  172. SERVING RWD STYLES
    Major Approaches
    ‣ Single CSS File
    ‣ Multiple CSS Files
    ‣ Breakpoint Based Partials
    ‣ Module Based Partials

    View Slide

  173. 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/

    View Slide

  174. Multiple CSS Files
    index.html"
    !
    "
    media=”(min-width: 40em)” 

    rel=”stylesheet”>"
    !

    View Slide

  175. Multiple CSS Files
    index.html"
    !
    "
    media=”(min-width: 40em)”

    rel=”stylesheet”>"
    !

    View Slide

  176. Multiple CSS Files
    index.html"
    !
    "
    media=”(min-width: 40em)” 

    rel=”stylesheet”>"
    !

    View Slide

  177. Multiple CSS Files
    index.html"
    !
    "
    media=”(min-width: 40em)”

    rel=”stylesheet”>"
    !

    View Slide

  178. Multiple CSS Files
    index.html"
    !
    "
    media=”(min-width: 40em)”

    rel=”stylesheet”>"
    !

    View Slide

  179. Multiple CSS Files
    global.css"
    !
    aside {"
    color: #333;"
    width: 100%;"
    }
    layout.css"
    !
    aside { width: 50%; }"
    !
    @media (min-width: 60em) {"
    aside { width: 30%; }"
    }

    View Slide

  180. Multiple CSS Files
    global.css"
    !
    aside {"
    color: #333;"
    width: 100%;"
    }
    layout.css"
    !
    aside { width: 50%; }"
    !
    @media (min-width: 60em) {"
    aside { width: 30%; }"
    }

    View Slide

  181. 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

    View Slide

  182. SERVING RWD STYLES
    Major Approaches
    ‣ Single CSS File
    ‣ Multiple CSS Files
    ‣ Breakpoint Based Partials
    ‣ Module Based Partials

    View Slide

  183. 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/

    View Slide

  184. Breakpoint Based Partials
    index.html"
    !
    "
    !

    View 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%; }

    View 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%; }

    View 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%; }

    View Slide

  188. 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%; }

    View Slide

  189. 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%; }

    View Slide

  190. 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%; }

    View Slide

  191. 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%; }

    View Slide

  192. 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%; }

    View Slide

  193. PAUSE:
    CSS PREPROCESSORS

    View Slide

  194. styles.scss styles.css
    We write SASS

    (or LESS, Stylus, etc.)
    Browser gets CSS

    (like it always has)
    PREPROCESSING
    What is CSS Preprocessing?

    View Slide

  195. The Big Three:
    LESS, SASS, and Stylus

    View Slide

  196. LESS
    ‣ Runs on Node.js
    ‣ Very similar syntax to SASS
    ‣ http://lesscss.org/

    View Slide

  197. LESS syntax
    Variables are
    specified with @
    symbol
    !
    /* .less */"
    !
    @top-variable: 20px;"
    !
    " #header-shadow {"
    "position: absolute;"
    " " top: @top-variable;"
    " }

    View Slide

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

    View Slide

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

    View Slide

  200. SASS
    ‣ Runs on Ruby
    ‣ Has two syntax flavors
    - .scss & .sass
    ‣ http://sass-lang.com/

    View Slide

  201. SASS Sytax
    $main-color: blue"
    !
    /* .scss */"
    #main {"
    color: $main-color;"
    font-size: 0.3em;"
    }"
    !
    /* .sass */"
    #main"
    color: $main-color"
    font-size: 0.3em

    View Slide

  202. What’s so cool about
    preprocessors, anyway?

    View Slide

  203. Nesting
    /* .css */"
    !
    .food-list {"
    list-style: none;"
    }"
    !
    .food-list li {"
    font-size: 1rem; "
    }"
    !
    .food-list li a {"
    color: red;"
    }"
    !
    /* .scss */"
    !
    .food-list {"
    list-style: none;"
    li {"
    font-size: 1rem;"
    a {"
    color: red;"
    }"
    }"
    }

    View Slide

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

    View Slide

  205. Variables
    /*.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);

    View Slide

  206. Mixins
    /*.scss*/"
    !
    @mixin border-radius( $value : 10px ) {"
    " -webkit-border-radius: $value;"
    " -moz-border-radius: $value;"
    " " " border-radius: $value;"
    }
    .btn{"
    @include border-radius(25px);"
    }

    View Slide

  207. 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...

    View Slide

  208. Sparkbox REM Mixin

    View Slide

  209. Sparkbox REM Mixin
    /*.scss*/"
    @include rem(padding, 0.5, 1, 4, 3);"
    @include rem(font-size, 1.2, large);

    View Slide

  210. 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

    View Slide

  211. Compass & Bourbon

    View Slide

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

    View Slide

  213. Importing
    this file will
    compile to
    base.css
    /* base.scss */"
    !
    @import "compass";"
    @import "variables";"
    @import "reset";"
    @import "mixins";"
    @import "header";"
    @import "hero";"
    @import "whatever";

    View Slide

  214. CSS PREPROCESSORS
    Resources
    Codekit
    http://incident57.com/codekit/

    View Slide

  215. CSS PREPROCESSORS
    Resources
    Scout
    http://mhs.github.com/scout-app/

    View Slide

  216. CSS PREPROCESSORS
    Resources
    Compass
    http://compass-style.org/

    View Slide

  217. CSS PREPROCESSORS
    Resources
    SASS Primer
    http://thesassway.com/beginner/getting-
    started-with-sass-and-compass

    View Slide

  218. 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%; }

    View Slide

  219. _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%;}

    View Slide

  220. 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

    View Slide

  221. SERVING RWD STYLES
    Major Approaches
    ‣ Single CSS File
    ‣ Multiple CSS Files
    ‣ Breakpoint Based Partials
    ‣ Module Based Partials

    View Slide

  222. 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

    View Slide

  223. Module Based Partials
    index.html"
    !
    "
    !
    "
    "

    View Slide

  224. Module Based Partials
    index.html"
    !
    "
    !
    "
    "

    View Slide

  225. Module Based Partials
    index.html"
    !
    "
    !
    "
    "

    View Slide

  226. Module Based Partials
    index.html"
    !
    "
    !
    "
    "

    View Slide

  227. Module Based Partials
    index.html"
    !
    "
    !
    "
    "

    View Slide

  228. Module Based Partials
    index.html"
    !
    "
    !
    "
    "

    View Slide

  229. 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%; }

    View Slide

  230. 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%; }

    View 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%; }

    View 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%; }

    View 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%; }

    View 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%; }

    View 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%; }

    View Slide

  236. 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”;"
    ...

    View Slide

  237. 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”;"
    ...

    View 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”;"
    ...

    View 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”;"
    ...

    View Slide

  240. Module Based Partials
    _aside.scss"
    !
    !
    aside {"
    color: #333; width: 100%;"
    !
    @include sb-media(40em) {"
    width: 50%; }"
    !
    @include sb-media(60em) {"
    width: 30%; }"
    }

    View Slide

  241. Module Based Partials
    _aside.scss"
    !
    !
    aside {"
    color: #333; width: 100%;"
    !
    @include sb-media(40em) {"
    width: 50%; }"
    !
    @include sb-media(60em) {"
    width: 30%; }"
    }

    View Slide

  242. 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%; }

    View Slide

  243. 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

    View Slide

  244. https://github.com/sparkbox/SB-Media

    View Slide

  245. https://github.com/Team-Sass/breakpoint

    View Slide

  246. 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

    View Slide

  247. This is so much
    more natural.

    View Slide

  248. THERE IS NO

    BREAKPOINT

    View Slide

  249. 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"
    ..."
    }

    View Slide

  250. 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"
    ..."
    }

    View Slide

  251. There is no Breakpoint
    Media Query
    Bookmarklet

    (by @robtarr)

    View Slide

  252. There is no Breakpoint

    View Slide

  253. Relax.

    View Slide

  254. Think more modularly.
    !
    Try something like SMACSS
    (from @snookca).

    View Slide

  255. Element Queries
    http://www.xanthir.com/b4PR0

    View Slide

  256. Responsive Elements
    https://github.com/kumailht/responsive-elements

    View Slide

  257. 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)

    View Slide

  258. Discussion
    ‣ How are you serving RWD 

    styles today?
    ‣ How do you “support” older IE?

    View Slide

  259. MAKING EVERYTHING FLUID
    CREATING

    FLEXIBILITY

    View Slide

  260. CREATING FLEXIBILITY
    What Needs to Flex
    ‣ Grids
    ‣ Layout
    ‣ Typography
    ‣ Images
    ‣ Tables
    ‣ Video

    View Slide

  261. CREATING FLEXIBILITY
    What Needs to Flex
    ‣ Grids
    ‣ Layout
    ‣ Typography
    ‣ Images
    ‣ Tables
    ‣ Video

    View Slide

  262. It starts with the grid

    View Slide

  263. It starts with the grid
    body {"
    width: 100%;"
    }"
    !
    div.main {"
    width: 70%;"
    }"
    !
    aside {"
    width: 28%;"
    }
    body {"
    width: 1000px;"
    }"
    !
    div.main {"
    width: 700px;"
    }"
    !
    aside {"
    width: 280px;"
    }

    View Slide

  264. It starts with the grid
    body {"
    width: 100%;"
    }"
    !
    div.main {"
    width: 70%;"
    }
    target / context = %
    700 / 1000 = .7
    .7 = 70%
    body {"
    width: 1000px;"
    }"
    !
    div.main {"
    width: 700px;"
    }

    View Slide

  265. It starts with the grid
    body {"
    width: 100%;"
    }"
    !
    aside {"
    width: 28%;"
    }
    target / context = %
    280 / 1000 = .28
    .28 = 28%
    body {"
    width: 1000px;"
    }"
    !
    aside {"
    width: 280px;"
    }

    View Slide

  266. Responsive grid systems

    View Slide

  267. CREATING FLEXIBILITY
    RWD Grid Systems
    ‣ Foundation
    ‣ Bootstrap
    ‣ Skeleton
    ‣ Responsive.gs
    ‣ Columnal
    ‣ ...this list goes on, and on, and on

    View Slide

  268. CREATING FLEXIBILITY
    Semantic RWD Grid Systems
    ‣ Semantic.gs
    ‣ Susy
    ‣ Zen Grids

    View Slide

  269. 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); }"
    }

    View Slide

  270. 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); }"
    }

    View Slide

  271. 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); }"
    }

    View Slide

  272. 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); }"
    }

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

    View Slide

  274. Or, just roll your own

    View Slide

  275. CREATING FLEXIBILITY
    What Needs to Flex
    ‣ Grids
    ‣ Layout
    ‣ Typography
    ‣ Images
    ‣ Tables
    ‣ Video

    View Slide

  276. CREATING FLEXIBILITY
    Responsive Layout Patterns
    ‣ Source order stacking
    ‣ Content choreography
    ‣ Off canvas

    View Slide

  277. CREATING FLEXIBILITY
    Responsive Layout Patterns
    ‣ Source order stacking
    ‣ Content choreography
    ‣ Off canvas

    View Slide

  278. HEADER HEADER
    CONTENT 1 CONTENT 1
    CONTENT 2 CONTENT 2
    AD
    SEARCH
    SEARCH
    AD
    FOOTER
    Large Resolution Small Resolution

    View Slide

  279. HEADER HEADER
    CONTENT 1 CONTENT 1
    CONTENT 2 CONTENT 2
    AD
    SEARCH
    SEARCH
    AD
    FOOTER
    Large Resolution Small Resolution

    View Slide

  280. CREATING FLEXIBILITY
    Responsive Layout Patterns
    ‣ Source order stacking
    ‣ Content choreography
    ‣ Off canvas

    View Slide

  281. View Slide

  282. View Slide

  283. appendAround JS Library
    https://github.com/filamentgroup/AppendAround
    $( “.move-me" ).appendAround();

    View Slide

  284. "
    "
    appendAround content"
    "
    !
    "
    Some other content"
    "
    !
    "
    "
    !
    "
    Some other content"
    "
    !
    "

    View Slide

  285. .cont-1 { display: block; }"
    .cont-2, .cont-3 { display: none; }"
    !
    @media (min-width: 30em) {"
    .cont-2 { display: block; }"
    .cont-1, .cont-3 { display: none; }"
    }"
    !
    @media (min-width: 50em) {"
    .cont-3 { display: block; }"
    .cont-1, .cont-2 { display: none; }"
    }

    View Slide

  286. CREATING FLEXIBILITY
    Responsive Layout Patterns
    ‣ Source order stacking
    ‣ Content choreography
    ‣ Off canvas

    View Slide

  287. HEADER
    CONTENT 1
    CONTENT 2
    RELATED
    CONTENT
    POPULAR
    CONTENT
    SUB
    NAV
    AD
    Large Resolution

    View Slide

  288. CONTENT 1
    NAVIGATION
    RELATED CON
    POPULAR CON
    AD
    NAV EXTRA
    HEADER

    View Slide

  289. Easiest to show

    a few examples:

    http://jasonweaver.name/lab/offcanvas/
    !
    http://disney.com/
    !
    http://www.lenovo.com/au/en/

    View Slide

  290. There are many, many
    combinations of these
    basic ideas
    !
    http://bit.ly/U4N5qH
    !
    (http://bradfrost.github.com/this-is-responsive/patterns.html)

    View Slide

  291. There are some really cool
    new layout modules
    coming...

    View Slide

  292. http://www.netmagazine.com/tutorials/
    master-new-css-layout-properties

    View Slide

  293. http://www.fivesimplesteps.com/
    products/css3-layout-modules

    View Slide

  294. CREATING FLEXIBILITY
    What Needs to Flex
    ‣ Grids
    ‣ Layout
    ‣ Typography
    ‣ Images
    ‣ Tables
    ‣ Video

    View Slide

  295. Type flexes by default

    View Slide

  296. We need to
    consider readability

    View 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

    View 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

    View Slide

  299. 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

    View Slide

  300. @snookca
    http://snook.ca/technical/colour_contrast/
    colour.html
    !
    @leaverou
    http://leaverou.github.com/contrast-ratio/

    View 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

    View Slide

  302. 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

    View Slide

  303. vw & vh CSS Units

    View Slide

  304. JS Alternatives

    View Slide

  305. CREATING FLEXIBILITY
    What Needs to Flex
    ‣ Grids
    ‣ Layout
    ‣ Typography
    ‣ Images
    ‣ Tables
    ‣ Video

    View Slide

  306. Flexible Images
    img {"
    max-width: 100%;"
    }

    View Slide

  307. The image problem(s)

    View Slide

  308. CREATING FLEXIBILITY
    The image problem(s)
    ‣ Content
    ‣ Bandwidth
    ‣ Pixel density

    View Slide

  309. CREATING FLEXIBILITY
    Image: Content

    View Slide

  310. CREATING FLEXIBILITY
    Image: Content

    View Slide

  311. CREATING FLEXIBILITY
    Image: Content

    View Slide

  312. CREATING FLEXIBILITY
    Image: Content

    View 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/

    View Slide

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

    View 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

    View Slide

  316. CREATING FLEXIBILITY
    The image problem(s)
    ‣ Content
    ‣ Bandwidth
    ‣ Pixel density

    View Slide

  317. CREATING FLEXIBILITY
    The image solution(s)
    ‣ SVG
    ‣ Icon fonts
    ‣ Pixel-density media queries
    ‣ Compressive
    ‣ Polyfill new markup patterns
    ‣ User preference

    View 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.

    View Slide

  319. @dbushell wrote a great primer for SVG

    View 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.

    View Slide

  321. Icon Font Markup
    /*.scss*/"
    [data-icon]:before {"
    content: attr(data-icon);"
    font-family: 'icon-font-family';"
    speak: none;"
    }
    "
    "
    data-icon="">"
    Search"

    View Slide

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

    View 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.

    View Slide

  324. Pixel Density MQs
    Also need other
    browser prefixes
    /*.scss*/"
    @media only all and

    (-webkit-min-device-pixel-ratio: 1.5) {"
    .logo {"
    background-image: url(/i/logo-2x.png);"
    background-size: 100%;"
    }"
    }

    View Slide

  325. New Markup
    ‣ http://responsiveimages.org/
    !
    ‣ Picture
    - http://picture.responsiveimages.org/
    ‣ Srcset
    - http://www.w3.org/html/wg/drafts/srcset/
    w3c-srcset/

    View Slide

  326. Picture Polyfill

    View Slide

  327. Srcset Polyfill

    View Slide

  328. User Preference
    ‣ Allow the user to choose what
    experience they would like to
    have on their device: “HD” or
    “SD”.

    View Slide

  329. CREATING FLEXIBILITY
    What Needs to Flex
    ‣ Grids
    ‣ Layout
    ‣ Typography
    ‣ Images
    ‣ Tables
    ‣ Video

    View Slide

  330. CREATING FLEXIBILITY
    Tables
    http://jsbin.com/emexa4

    View Slide

  331. CREATING FLEXIBILITY
    Tables
    http://codepen.io/aarongustafson/pen/ucJGv

    View Slide

  332. CREATING FLEXIBILITY
    Tables
    http://filamentgroup.com/examples/rwd-table-patterns/

    View Slide

  333. CREATING FLEXIBILITY
    Tables
    http://codepen.io/bencallahan/pen/xvmCe

    View Slide

  334. RWD Table Patterns
    http://codepen.io/
    bencallahan/pen/xvmCe

    View Slide

  335. CREATING FLEXIBILITY
    What Needs to Flex
    ‣ Grids
    ‣ Layout
    ‣ Typography
    ‣ Images
    ‣ Tables
    ‣ Video

    View Slide

  336. CREATING FLEXIBILITY
    Video

    View Slide

  337. CREATING FLEXIBILITY
    Intrinsic Ratios
    http://codepen.io/bencallahan/pen/KICkl

    View Slide

  338. CREATING FLEXIBILITY
    Video

    View Slide

  339. Creating flexibility
    requires
    experimentation

    View Slide

  340. Discussion
    ‣ What content types have we not
    addressed?
    ‣ What specific challenges are you
    facing in creating flexibility?

    View Slide

  341. UNIQUE CONSIDERATIONS AND CHALLENGES
    RWD NAVIGATION

    View Slide

  342. The Maze

    View Slide

  343. amazon.com

    View Slide

  344. amazon.com

    View Slide

  345. amazon.com

    View Slide

  346. amazon.com

    View Slide

  347. amazon.com

    View Slide

  348. amazon.com

    View Slide

  349. Congratulations!
    In celebration of all your hard work
    and discipline, as a reward for all the
    risk you’ve taken to reach this point,
    we’re quite pleased to present you
    with…YOUR CONTENT!
    !
    Keep up the good work!
    !
    ~ The Management

    View Slide

  350. A Taxonomy
    ‣ Trigger Indicators
    ‣ Trigger Patterns
    !
    ‣ Interaction Indicators
    ‣ Interaction Patterns

    View Slide

  351. Trigger Indicators

    View Slide

  352. Trigger Indicators
    ‣ Words
    ‣ menu, main menu
    ‣ nav, navigation
    ‣ sections, site sections,

    topics, products
    ‣ products, see products
    ‣ Icons
    ‣ plus
    ‣ hamburger
    ‣ arrows

    View Slide

  353. TRIGGER INDICATORS
    Words

    View Slide

  354. TRIGGER INDICATORS
    Icons
    Plus Hamburger Down Arrow

    View Slide

  355. TRIGGER INDICATORS
    Other & Combinations

    View Slide

  356. Trigger Indicators
    ‣ Words
    ‣ menu, main menu
    ‣ nav, navigation
    ‣ sections, site sections,

    topics, products
    ‣ products, see products
    ‣ Icons
    ‣ plus
    ‣ hamburger
    ‣ arrows

    View Slide

  357. Trigger Patterns

    View Slide

  358. Trigger Patterns
    ‣ Always Available
    ‣ Anchor to Footer
    ‣ Select Element
    ‣ Make Room
    ‣ Cover Up
    ‣ Off Canvas
    ‣ Priority +
    ‣ Full Screen Takeover

    View Slide

  359. TRIGGER PATTERNS: ALWAYS AVAILABLE

    View Slide

  360. TRIGGER PATTERNS: ANCHOR TO FOOTER

    View Slide

  361. TRIGGER PATTERNS: SELECT ELEMENT

    View Slide

  362. iOS 7
    TRIGGER PATTERNS: SELECT ELEMENT

    View Slide

  363. TRIGGER PATTERNS: SELECT ELEMENT
    Chrome on OS X

    View Slide

  364. TRIGGER PATTERNS: MAKE ROOM

    View Slide

  365. TRIGGER PATTERNS: COVER UP

    View Slide

  366. TRIGGER PATTERNS: OFF CANVAS

    View Slide

  367. TRIGGER PATTERNS: PRIORITY +

    View Slide

  368. TRIGGER PATTERNS: FULL SCREEN TAKEOVER

    View Slide

  369. Trigger Patterns
    ‣ Always Available
    ‣ Anchor to Footer
    ‣ Select Element
    ‣ Make Room
    ‣ Cover Up
    ‣ Off Canvas
    ‣ Priority +
    ‣ Full Screen Takeover

    View Slide

  370. Interaction Indicators

    View Slide

  371. INTERACTION INDICATORS
    Icons

    View Slide

  372. Interaction Indicators
    ‣ Icons
    ‣ plus
    ‣ dash
    ‣ “x”
    ‣ various arrows

    View Slide

  373. Interaction Patterns

    View Slide

  374. Interaction Patterns
    ‣ List
    ‣ Accordion
    ‣ Paging

    View Slide

  375. INTERACTION PATTERNS: LIST

    View Slide

  376. INTERACTION PATTERNS: ACCORDION

    View Slide

  377. INTERACTION PATTERNS: PAGING

    View Slide

  378. INTERACTION PATTERNS: PAGING

    View Slide

  379. Interaction Patterns
    ‣ List
    ‣ Accordion
    ‣ Paging

    View Slide

  380. Other Considerations

    View Slide

  381. Other Considerations
    ‣ Architecture
    ‣ Focus
    ‣ Behavior
    ‣ JavaScript
    ‣ Usability

    View Slide

  382. OTHER CONSIDERATIONS: ARCHITECTURE

    View Slide

  383. OTHER CONSIDERATIONS: FOCUS

    View Slide

  384. OTHER CONSIDERATIONS: BEHAVIOR
    Multi Open

    View Slide

  385. OTHER CONSIDERATIONS: BEHAVIOR
    Single Open

    View Slide

  386. OTHER CONSIDERATIONS: BEHAVIOR
    Single Open

    View Slide

  387. Auto Scroll
    OTHER CONSIDERATIONS: BEHAVIOR

    View Slide

  388. Other Considerations
    ‣ JavaScript
    ‣ Visible by Default
    ‣ Anchor to Footer
    ‣ Single DOM

    View Slide

  389. Other Considerations
    ‣ Usability
    ‣ User Expectations
    ‣ Plan for the Worst
    ‣ Teach Use

    View Slide

  390. Discussion
    ‣ How are you handling navigation
    in your RWD projects?
    ‣ Have you been able to push back
    on IA?

    View Slide

  391. LEARN FROM OUR MISTAKES
    LESSONS

    LEARNED

    View Slide

  392. Testing

    View Slide

  393. LESSONS LEARNED
    Testing
    ‣ You must test on real devices
    ‣ Do your development in a webkit
    browser
    ‣ Build libraries of your patterns

    View Slide

  394. Pricing

    View Slide

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

    View Slide

  396. 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?

    View Slide

  397. LESSONS LEARNED
    Pricing
    ‣ Testing (labs & time)
    ‣ Fewer patterns
    ‣ Project management
    ‣ Learning curve
    ‣ Maintenance
    ‣ Content strategy

    View Slide

  398. Prioritization

    View Slide

  399. LESSONS LEARNED
    Prioritization

    View Slide

  400. LESSONS LEARNED
    Prioritization

    View Slide

  401. LESSONS LEARNED
    Prioritization

    View Slide

  402. LESSONS LEARNED
    Prioritization

    View Slide

  403. LESSONS LEARNED
    Prioritization

    View Slide

  404. Performance

    View Slide

  405. 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

    View Slide

  406. Barriers

    View Slide

  407. 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

    View Slide

  408. What’s Next

    View Slide

  409. Fluency
    SOLVE THE PROBLEM

    View Slide

  410. Jakob Nielsen Says...
    ‣ Build a separate mobile site
    ‣ Cut features
    ‣ Cut content
    http://www.nngroup.com/articles/mobile-site-vs-full-site/

    View Slide

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

    View Slide

  412. The Responsive Dip
    !
    http://bit.ly/MasqBk

    View Slide

  413. 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/

    View Slide

  414. !
    There are many
    problems left to solve.
    !
    We’ll solve them much faster if we
    solve them together.

    View Slide

  415. THANKS!
    @bencallahan @jeremyloyd

    View Slide