Build Responsively, 2013, Artifact, Providence, RI

Fe8510ee8e06c36d02799dbf8f934b9c?s=47 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.

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

November 06, 2013
Tweet

Transcript

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

  2. Friday, November 8, 13

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

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

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

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

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

  8. Friday, November 8, 13

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

  10. About Us Friday, November 8, 13

  11. About You Friday, November 8, 13

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

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

  14. 177% increase in tablet ownership since last year In the

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

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

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

  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
  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
  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
  21. Q1 2013 conversions on tablets surpassed conversions on traditional desktops

    http://bit.ly/sNpLte In the US... Friday, November 8, 13
  22. Flexibility is the new norm Friday, November 8, 13

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

    today Friday, November 8, 13
  24. Responsive web design Friday, November 8, 13

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

    Friday, November 8, 13
  26. Friday, November 8, 13

  27. RWD 101 ‣ Three Core Techniques - A Fluid Foundation

    - Flexible Content - Media Queries Friday, November 8, 13
  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
  29. A Fluid Foundation Browser Window 1000px 600px 400px Friday, November

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

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

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

    8, 13
  33. Flexible Content Once we have a layout which is based

    on proportions, the content must also respond. Friday, November 8, 13
  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
  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
  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
  37. Browser Window We the People of the United States, in

    Order to form a Flexible Content (Image) 600px Friday, November 8, 13
  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
  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
  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
  41. Browser Window 100% 60% 40% Media Queries Friday, November 8,

    13
  42. Browser Window A 100% B 100% C 100% Media Queries

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

    Browser Window A 100% B 100% C 100% Friday, November 8, 13
  44. [live examples] Friday, November 8, 13

  45. RWD 101 ‣ Three Core Techniques - A Fluid Foundation

    - Flexible Content - Media Queries Friday, November 8, 13
  46. [code example] Friday, November 8, 13

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

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

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

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

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

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

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

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

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

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

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

  58. Linear Workflow Now with RWD! CONTENT UX DESIGN FRONT-END BACK-END

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

    BACK-END LAUNCH! Me too! Friday, November 8, 13
  60. This doesn’t work. Friday, November 8, 13

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

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

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

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

    8, 13
  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
  66. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Friday, November

    8, 13
  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
  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
  69. ND DESIGN So, how do we advance design through a

    “1 deliverable” workflow? Friday, November 8, 13
  70. Dissecting Design PRODUCTIVITY TIME Friday, November 8, 13

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

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

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

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

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

  76. Friday, November 8, 13

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

  78. DISSECTING DESIGN ‣ Style Comparisons ‣ Style Tiles ‣ Style

    Prototypes Establish the Aesthetic Friday, November 8, 13
  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
  80. Style Comparisons ESTABLISH THE AESTHETIC Light vs Dark Friday, November

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

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

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

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

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

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

  87. USE TOOLS YOU ARE COMFORTABLE WITH TO ESTABLISH THE AESTHETIC

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

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

  90. DISSECTING DESIGN ‣ Static Design Tools ‣ Responsive Design Tools

    ‣ HTML/CSS Solve the Problem Friday, November 8, 13
  91. Static Design Tools SOLVE THE PROBLEM Friday, November 8, 13

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

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

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

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

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

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

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

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

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

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

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

  103. YOU BEST SOLVE PROBLEMS USING TOOLS YOU ARE FLUENT WITH

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

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

    the Solution Friday, November 8, 13
  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
  107. Don’t Use Static Design Tools REFINE THE SOLUTION Friday, November

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

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

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

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

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

  113. Friday, November 8, 13

  114. You don’t want to do the long tail more than

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

  116. EFFICIENCY IS KEY WHEN REFINING A DESIGN SOLUTION HOW TO

    DECIDE Friday, November 8, 13
  117. Establish Solve Refine ................. Comfort ....................... Fluency ................... Efficiency Guidelines

    for Selecting Tools Friday, November 8, 13
  118. Establish Solve Refine ..... Style Prototype ......... Sketching + PSD

    .... In-Browser Pairing Tools we use at Sparkbox Friday, November 8, 13
  119. Photo Credit: Jay Maisel Friday, November 8, 13

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

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

  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
  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
  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
  125. Group Improvisation Friday, November 8, 13

  126. Group improvisation requires individuals on a team to... be skilled

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

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

    Friday, November 8, 13
  129. Skill Humility Empathy Friday, November 8, 13

  130. Friday, November 8, 13

  131. Friday, November 8, 13

  132. Friday, November 8, 13

  133. Friday, November 8, 13

  134. Friday, November 8, 13

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

  136. The amount of process required is inversely proportionate to the

    skill and experience of your team. Friday, November 8, 13
  137. Create the perfect, fully- documented, all-encompassing web design and development

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

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

  140. Discussion ‣ What happens next in this process? ‣ How

    are you handling RWD deliverables now? ‣ What are you struggling with? Friday, November 8, 13
  141. CODE AND PROJECT STRUCTURE SERVING RWD STYLES Friday, November 8,

    13
  142. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣

    Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Friday, November 8, 13
  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
  144. Before any of this stuff will work, you need to

    do this: <!-- html --> <meta name="viewport" content="width=device-width; initial-scale=1.0;"> Friday, November 8, 13
  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
  146. The Example 100% 50% 30% Friday, November 8, 13

  147. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣

    Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Friday, November 8, 13
  148. Single CSS File HTML <link> CSS Start with styles applied

    to all Styles scoped to a media query Styles scoped to another media query Friday, November 8, 13
  149. /* styles.css */ aside { color: #333; width: 100%; }

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

    /* if the viewport width is 40em or greater */ Single CSS File Friday, November 8, 13
  151. PAUSE: MEDIA QUERIES Friday, November 8, 13

  152. <!-- In your HTML --> <link media=”(min-width: 30em)” ... <link

    media=”screen and (max-width: 80em)” ... /* In your CSS */ @media (min-width: 30em) { ... } @media screen and (max-width: 80em) { ... } Media Queries Friday, November 8, 13
  153. <!-- In your HTML --> <link media=”(min-width: 30em)” ... <link

    media=”screen and (max-width: 80em)” ... /* In your CSS */ @media (min-width: 30em) { ... } @media screen and (max-width: 80em) { ... } Media Types Friday, November 8, 13
  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
  155. <!-- In your HTML --> <link media=”(min-width: 30em)” ... <link

    media=”screen and (max-width: 80em)” ... /* In your CSS */ @media (orientation: portrait) { ... } @media screen and (color) { ... } Media Features Friday, November 8, 13
  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
  157. Single CSS File HTML <link> CSS Start with styles applied

    to all Styles scoped to a media query Styles scoped to another media query Friday, November 8, 13
  158. Small Viewport Width First HTML <link> CSS Smallest styles Wider

    styles (mq) Even wider styles (mq) Super wide styles (mq) Friday, November 8, 13
  159. Large Viewport Width First HTML <link> CSS Widest styles Wide

    styles (mq) Narrow styles (mq) Very narrow styles (mq) Friday, November 8, 13
  160. /* styles.css */ aside { color: #333; width: 100%; }

    /* if the viewport width is 40em or greater */ Single CSS File Friday, November 8, 13
  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
  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
  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
  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
  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
  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
  167. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣

    Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Friday, November 8, 13
  168. Multiple CSS Files HTML <link> If this browser is less

    than IE9... and it’s not IE Mobile... and viewport width is at least 40em... <link> global.css all styles linear layout layout.css only styles for layout http://adactio.com/journal/4494/ Friday, November 8, 13
  169. Multiple CSS Files index.html <link href=”global.css” rel=”stylesheet”> <link href=”layout.css” media=”(min-width:

    40em)” rel=”stylesheet”> <!--[if (lt IE 9) & (!IEMobile)]> <link href=”layout.css” rel=”stylesheet”> <![endif]--> Friday, November 8, 13
  170. Multiple CSS Files index.html <link href=”global.css” rel=”stylesheet”> <link href=”layout.css” media=”(min-width:

    40em)” rel=”stylesheet”> <!--[if (lt IE 9) & (!IEMobile)]> <link href=”layout.css” rel=”stylesheet”> <![endif]--> Friday, November 8, 13
  171. Multiple CSS Files index.html <link href=”global.css” rel=”stylesheet”> <link href=”layout.css” media=”(min-width:

    40em)” rel=”stylesheet”> <!--[if (lt IE 9) & (!IEMobile)]> <link href=”layout.css” rel=”stylesheet”> <![endif]--> Friday, November 8, 13
  172. Multiple CSS Files index.html <link href=”global.css” rel=”stylesheet”> <link href=”layout.css” media=”(min-width:

    40em)” rel=”stylesheet”> <!--[if (lt IE 9) & (!IEMobile)]> <link href=”layout.css” rel=”stylesheet”> <![endif]--> Friday, November 8, 13
  173. Multiple CSS Files index.html <link href=”global.css” rel=”stylesheet”> <link href=”layout.css” media=”(min-width:

    40em)” rel=”stylesheet”> <!--[if (lt IE 9) & (!IEMobile)]> <link href=”layout.css” rel=”stylesheet”> <![endif]--> Friday, November 8, 13
  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
  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
  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
  177. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣

    Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Friday, November 8, 13
  178. Breakpoint Based Partials HTML <link> If this browser is less

    than IE9... and it’s not IE Mobile... <link> 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
  179. Breakpoint Based Partials index.html <link href=”base.css” rel=”stylesheet”> <!--[if (lt IE

    9) & (!IEMobile)]> <link href=”no-mq.css” rel=”stylesheet”> <![endif]--> Friday, November 8, 13
  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
  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
  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
  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
  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
  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
  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
  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
  188. PAUSE: CSS PREPROCESSORS Friday, November 8, 13

  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
  190. The Big Three: LESS, SASS, and Stylus Friday, November 8,

    13
  191. LESS ‣ Runs on Node.js ‣ Very similar syntax to

    SASS ‣ http://lesscss.org/ Friday, November 8, 13
  192. Variables are specified with @ symbol /* .less */ @top-variable:

    20px; ! #header-shadow { ! position: absolute; ! ! top: @top-variable; ! } LESS syntax Friday, November 8, 13
  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
  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
  195. SASS ‣ Runs on Ruby ‣ Has two syntax flavors

    - .scss & .sass ‣ http://sass-lang.com/ Friday, November 8, 13
  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
  197. What’s so cool about preprocessors, anyway? Friday, November 8, 13

  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
  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
  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
  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
  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
  203. Sparkbox REM Mixin Friday, November 8, 13

  204. /*.scss*/ @include rem(padding, 0.5, 1, 4, 3); @include rem(font-size, 1.2,

    large); Sparkbox REM Mixin Friday, November 8, 13
  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
  206. Compass & Bourbon Friday, November 8, 13

  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
  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
  209. Google Chrome Developer Tools & SASS Friday, November 8, 13

  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
  211. Source Maps ‣ Source maps let Chrome know the source

    of the generated CSS. Friday, November 8, 13
  212. Setup Chrome for SASS Source Maps Support ‣ head over

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

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

    for Source maps Friday, November 8, 13
  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
  216. CSS PREPROCESSORS Resources Codekit http://incident57.com/codekit/ Friday, November 8, 13

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

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

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

    13
  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
  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
  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
  223. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣

    Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Friday, November 8, 13
  224. HTML If < IE9 and not IE Mobile <link> If

    >= IE9 or IE Mobile or not IE <link> 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
  225. Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]>

    <link href=”no-mq.css” rel=”stylesheet”> <![endif]--> <!--[if (gte IE 9) | (IEMobile)]><!--> <link href=”mq.css” rel=”stylesheet”> <!--<![endif]--> Friday, November 8, 13
  226. Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]>

    <link href=”no-mq.css” rel=”stylesheet”> <![endif]--> <!--[if (gte IE 9) | (IEMobile)]><!--> <link href=”mq.css” rel=”stylesheet”> <!--<![endif]--> Friday, November 8, 13
  227. Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]>

    <link href=”no-mq.css” rel=”stylesheet”> <![endif]--> <!--[if (gte IE 9) | (IEMobile)]><!--> <link href=”mq.css” rel=”stylesheet”> <!--<![endif]--> Friday, November 8, 13
  228. Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]>

    <link href=”no-mq.css” rel=”stylesheet”> <![endif]--> <!--[if (gte IE 9) | (IEMobile)]><!--> <link href=”mq.css” rel=”stylesheet”> <!--<![endif]--> Friday, November 8, 13
  229. Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]>

    <link href=”no-mq.css” rel=”stylesheet”> <![endif]--> <!--[if (gte IE 9) | (IEMobile)]><!--> <link href=”mq.css” rel=”stylesheet”> <!--<![endif]--> Friday, November 8, 13
  230. Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]>

    <link href=”no-mq.css” rel=”stylesheet”> <![endif]--> <!--[if (gte IE 9) | (IEMobile)]><!--> <link href=”mq.css” rel=”stylesheet”> <!--<![endif]--> Friday, November 8, 13
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  246. https://github.com/sparkbox/SB-Media Friday, November 8, 13

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

  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
  249. This is so much more natural. Friday, November 8, 13

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

  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
  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
  253. There is no Breakpoint Media Query Bookmarklet (by @robtarr) Friday,

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

  255. Relax. Friday, November 8, 13

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

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

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

  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
  260. Discussion ‣ How are you serving RWD styles today? ‣

    How do you “support” older IE? Friday, November 8, 13
  261. MAKING EVERYTHING FLUID CREATING FLEXIBILITY Friday, November 8, 13

  262. CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout

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

    ‣ Typography ‣ Images ‣ Tables ‣ Video Friday, November 8, 13
  264. It starts with the grid Friday, November 8, 13

  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
  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
  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
  268. Responsive grid systems Friday, November 8, 13

  269. CREATING FLEXIBILITY RWD Grid Systems ‣ Foundation ‣ Bootstrap ‣

    Skeleton ‣ Responsive.gs ‣ Columnal ‣ ...this list goes on, and on, and on Friday, November 8, 13
  270. CREATING FLEXIBILITY Semantic RWD Grid Systems ‣ Semantic.gs ‣ Susy

    ‣ Zen Grids Friday, November 8, 13
  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
  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
  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
  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
  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
  276. Or, just roll your own Friday, November 8, 13

  277. CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout

    ‣ Typography ‣ Images ‣ Tables ‣ Video Friday, November 8, 13
  278. CREATING FLEXIBILITY Responsive Layout Patterns ‣ Source order stacking ‣

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

    Content choreography ‣ Off canvas Friday, November 8, 13
  280. Friday, November 8, 13

  281. CREATING FLEXIBILITY Responsive Layout Patterns ‣ Source order stacking ‣

    Content choreography ‣ Off canvas Friday, November 8, 13
  282. Friday, November 8, 13

  283. Friday, November 8, 13

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

  285. CREATING FLEXIBILITY Responsive Layout Patterns ‣ Source order stacking ‣

    Content choreography ‣ Off canvas Friday, November 8, 13
  286. Friday, November 8, 13

  287. Friday, November 8, 13

  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
  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
  290. There are some really cool new layout modules coming... Friday,

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

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

  293. CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout

    ‣ Typography ‣ Images ‣ Tables ‣ Video Friday, November 8, 13
  294. Type flexes by default Friday, November 8, 13

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

  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
  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
  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
  299. @snookca http://snook.ca/technical/colour_contrast/ colour.html @leaverou http://leaverou.github.com/contrast-ratio/ Friday, November 8, 13

  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
  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
  302. vw & vh CSS Units Friday, November 8, 13

  303. JS Alternatives Friday, November 8, 13

  304. CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout

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

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

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

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

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

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

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

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

  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
  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
  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
  316. CREATING FLEXIBILITY The image problem(s) ‣ Content ‣ Bandwidth ‣

    Pixel density Friday, November 8, 13
  317. CREATING FLEXIBILITY The image solution(s) ‣ SVG ‣ Icon fonts

    ‣ Pixel-density media queries ‣ Compressive ‣ Picturefill ‣ User preference Friday, November 8, 13
  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
  319. @dbushell wrote a great primer for SVG Friday, November 8,

    13
  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
  321. <!--html--> <a href="#" class="search-toggle"> <span aria-hidden="true" data-icon="&#xe009;"></span> <span class="screen-reader">Search</span> </a>

    Icon Font Markup /*.scss*/ [data-icon]:before { content: attr(data-icon); font-family: 'icon-font-family'; speak: none; } Friday, November 8, 13
  322. “Compressive” Images ‣ http://bit.ly/Sygdey ‣ Increase the image dimensions ‣

    Add massive compression ‣ Scale the image in the browser Friday, November 8, 13
  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
  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
  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
  326. Picture Polyfill Friday, November 8, 13

  327. Srcset Polyfill Friday, November 8, 13

  328. SrcN Proposed Spec Friday, November 8, 13

  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
  330. CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout

    ‣ Typography ‣ Images ‣ Tables ‣ Video Friday, November 8, 13
  331. RWD Table Patterns [demo] Friday, November 8, 13

  332. CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout

    ‣ Typography ‣ Images ‣ Tables ‣ Video Friday, November 8, 13
  333. CREATING FLEXIBILITY Video Friday, November 8, 13

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

  335. CREATING FLEXIBILITY Video Friday, November 8, 13

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

  337. Creating flexibility requires Friday, November 8, 13

  338. Discussion ‣ What content types have we not addressed? ‣

    What specific challenges are you facing in creating flexibility? Friday, November 8, 13
  339. UNIQUE CONSIDERATIONS AND CHALLENGES NAVIGATION AND RWD Friday, November 8,

    13
  340. NAVIGATION AND RWD Major Issues ‣ Site Depth and Breadth

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

    ‣ Screen Real Estate ‣ Cross-width Consistency ‣ Design Patterns Friday, November 8, 13
  342. Small sites often allow simpler solutions. Friday, November 8, 13

  343. Simple Nav Examples ‣ Simple Row ‣ Jump to Content

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

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

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

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

    ‣ Jump to Footer ‣ Top Stacked Off Canvas http://2012.dconstruct.org/ Friday, November 8, 13
  348. Most sites have to work a bit harder to accommodate

    their content. Friday, November 8, 13
  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
  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
  351. Before accommodating all the things, it’s not a cop- out

    to question the things. Friday, November 8, 13
  352. Attack the right nav. Friday, November 8, 13

  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
  354. NAVIGATION AND RWD Major Issues ‣ Site Depth and Breadth

    ‣ Screen Real Estate ‣ Cross-width Consistency ‣ Design Patterns Friday, November 8, 13
  355. Small screens aren’t just horizontally small. Friday, November 8, 13

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

    13
  357. Don’t make small screens smaller by eating up vertical space

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

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

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

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

  362. NAVIGATION AND RWD Major Issues ‣ Site Depth and Breadth

    ‣ Screen Real Estate ‣ Cross-width Consistency ‣ Design Patterns Friday, November 8, 13
  363. “Users don’t resize their browser. That’s a developer behavior.” Friday,

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

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

  366. Are our off-canvas and other RWD-inspired patterns doing more harm

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

  368. Do we need to change the user’s pattern at all?

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

  370. NAVIGATION AND RWD Major Issues ‣ Site Depth and Breadth

    ‣ Screen Real Estate ‣ Cross-width Consistency ‣ Design Patterns Friday, November 8, 13
  371. There is no right answer. Friday, November 8, 13

  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
  373. Patterns Galore ‣ Toggle ‣ Footer Anchor ‣ Select Menu

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ‣ Multi-Toggle ‣ Off Canvas ‣ Breadcrumbs ‣ More... Friday, November 8, 13
  394. Be open to combining patterns. Friday, November 8, 13

  395. Only try completely unique/novel patterns if you plan to fully

    test them. Friday, November 8, 13
  396. Discussion ‣ How are you handling navigation in your RWD

    projects? ‣ Have you been able to push back on IA? Friday, November 8, 13
  397. @BENCALLAHAN Retrofitting RESPONSIVE RETROFITTING Friday, November 8, 13

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

    13
  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
  400. @BENCALLAHAN What is a Retrofit? 1. How to do it.

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

    2. Managing your client. RESPONSIVE RETROFITTING Friday, November 8, 13
  402. @BENCALLAHAN @klayon RESPONSIVE RETROFITTING Friday, November 8, 13

  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
  404. @BENCALLAHAN Retrofitting Techniques http://github.com/bencallahan/rwd-retrofitting If you like, you can clone

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

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

    RESPONSIVE RETROFITTING Friday, November 8, 13
  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
  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
  413. @BENCALLAHAN Retrofitting Techniques: Tables RESPONSIVE RETROFITTING Friday, November 8, 13

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

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

  416. @BENCALLAHAN Retrofitting Techniques: Media Queries ➡ Large Resolution First ➡

    Small Resolution First, Capped RESPONSIVE RETROFITTING Friday, November 8, 13
  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
  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
  419. @BENCALLAHAN Retrofitting Techniques: Media Queries ➡ Small Resolution First, Capped

    <html  class=”no-­‐js”> <head>    <script  src=”/js/modernizr.js”></script>    <script>        yepnope({            test  :  Modernizr.mq(‘(min-­‐width:  0px)’),            yep    :  ‘base.css’,            nope  :  ‘original.css’        });      </script>    <noscript>        <link  rel="stylesheet"  href="original.css">    </noscript> </head> RESPONSIVE RETROFITTING Friday, November 8, 13
  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
  421. @BENCALLAHAN Client Interaction RESPONSIVE RETROFITTING Friday, November 8, 13

  422. @BENCALLAHAN Client Interaction: Great Need Big Companies + No Mobile

    Presence + Triple Digit Growth = Anxious Clients RESPONSIVE RETROFITTING Friday, November 8, 13
  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
  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
  425. @BENCALLAHAN Client Interaction: Proceed Carefully Retrofitting is a step in

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

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

    Carefully RESPONSIVE RETROFITTING Friday, November 8, 13
  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
  429. Discussion ‣ Have you used responsive techniques on older sites?

    ‣ Does retrofitting seem like a good idea for your situation? Friday, November 8, 13
  430. LEARN FROM OUR MISTAKES LESSONS LEARNED Friday, November 8, 13

  431. Testing Friday, November 8, 13

  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
  433. Pricing Friday, November 8, 13

  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
  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
  436. LESSONS LEARNED Pricing ‣ Testing (labs & time) ‣ Fewer

    patterns ‣ Project management ‣ Learning curve ‣ Maintenance ‣ Content strategy Friday, November 8, 13
  437. Prioritization Friday, November 8, 13

  438. LESSONS LEARNED Prioritization Friday, November 8, 13

  439. LESSONS LEARNED Prioritization Friday, November 8, 13

  440. LESSONS LEARNED Prioritization Friday, November 8, 13

  441. LESSONS LEARNED Prioritization Friday, November 8, 13

  442. LESSONS LEARNED Prioritization Friday, November 8, 13

  443. Performance Friday, November 8, 13

  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
  445. Barriers Friday, November 8, 13

  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
  447. SOME THOUGHTS ON WHAT’S NEXT IN RWD WHERE WE’RE GOING

    Friday, November 8, 13
  448. Friday, November 8, 13

  449. SOLVE THE PROBLEM Friday, November 8, 13

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

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

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

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

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

  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
  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
  457. The Responsive Dip http://bit.ly/MasqBk Friday, November 8, 13

  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
  459. There are many problems left to solve. We’ll solve them

    much faster if we solve them together. Friday, November 8, 13
  460. THANKS! @bencallahan @drewtclemens Friday, November 8, 13