Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Design Studio [Mountain View 2013]

68 views

Published on

Co-presented with Sara Wachter-Boettcher & Jason Cranford Teague

Links:
Reading List: http://readlists.com/7d414b24/
Webfont Icon Code: http://codepen.io/jasonspeaking/pen/xHfhJ
Webfont Icon Article: http://webstandardssherpa.com/reviews/responsive-webfont-icons/

Responsive Tables:
http://filamentgroup.com/examples/rwd-table-patterns/
http://elvery.net/demo/responsive-tables/
http://jsbin.com/emexa4
http://css-tricks.com/examples/ResponsiveTables/responsive.php

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Responsive Design Studio [Mountain View 2013]

  1. 1. RESPONSIVE DESIGN STUDIO
  2. 2. VillageReach.org
  3. 3. Why RWD?
  4. 4. © Brad Frost
  5. 5. “ Just four years ago the majority of our visitors saw our website in Internet Explorer on a Windows computer on a minimum 1,024 pixel wide screen. Times have really changed. Jason Samuels IT Manager, National Council on Family Relations Source
  6. 6. “ Windows users used to comprise 93.5% of our web visits. Now that percentage is 72.4%. Visitors using a Mac have more than tripled.
  7. 7. “ The percentage visiting from a mobile device or tablet … was just 0.1% in 2008. It has since grown exponentially, 200-400% per year, to 6.2% today.
  8. 8. “ Four years ago 75.5% of our web visitors used Internet Explorer. That number has fallen to 37%. Firefox now comprises 25.5%, Safari 19.5%, and Chrome 15.3%.
  9. 9. “ In the second quarter of 2008 we detected 71 different screen resolutions among our visitors. In the first quarter of 2012 we detected 830
  10. 10. © Brad Frost
  11. 11. 6.8 Billion 2011 2012 2010 2011 2010 2009 2009 2012 http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/a#subscribers
  12. 12. “ Smartphone sales accounted for nearly 85% of all mobile phone sales in the US in Q1 2013. http://www.chetansharma.com/usmarketupdateq12013.htm
  13. 13. “ Smartphones have reached 50% penetration in the US… http://www.chetansharma.com/usmarketupdateq12013.htm
  14. 14. “ …but that’s concentrated in 30% of households http://www.chetansharma.com/usmarketupdateq12013.htm
  15. 15. © Brad Frost
  16. 16. © Brad Frost
  17. 17. What is RWD?
  18. 18. RESPONSIVE DESIGN STUDIO What is RWD? ๏ Fluid grids ๏ Flexible media ๏ Media queries 23
  19. 19. RESPONSIVE DESIGN STUDIO Fluid Grids 6.5% 6.5% 6.5% 6.5% 32% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 32% 32% 32% 66% 48% 48% 100% 6.5% 6.5%
  20. 20. RESPONSIVE DESIGN STUDIO Flexible Media img { max-width: 100%; height: auto; }
  21. 21. RESPONSIVE DESIGN STUDIO Media Queries @media screen and (min-width:450px) { /* Styles for screen media when browser is 450px wide or larger */ }
  22. 22. RESPONSIVE DESIGN STUDIO But That’s the Easy Stuff ๏ Content strategy ๏ Page weight ๏ JavaScript support ๏ Interaction methods ๏ Network latency & performance ๏ Hardware performance ๏ Screen resolution ๏ Sensor availability ๏ etc. 35
  23. 23. RESPONSIVE DESIGN STUDIO What’s in a name? ๏ Responsive Web Design ๏ Adaptive Web Design ๏ Progressive Enhancement ๏ Aggressive Enhancement ๏ Responsible Web Design 37
  24. 24. When is RWD a good fit? When is it not?
  25. 25. How does RWD fit into project workflows?
  26. 26. Setting Strategy
  27. 27. Strategy: it’s more important than ever.
  28. 28. But it’s not about the documents you make.
  29. 29. It’s about having clarity, purpose, and focus.
  30. 30. Thinking about content makes RWD much easier.
  31. 31. “ We need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out. —Mark Boulton, “A Richer Canvas”
  32. 32. This doesn’t mean having all the content first.
  33. 33. It means having a shared vision of what’s important.
  34. 34. RESPONSIVE DESIGN STUDIO Finding Your Focus ๏ Why do we have this website? ๏ Who are we speaking to? ๏ What do they need from us? ๏ What do we need to say most? What’s less important? ๏ How will we know if we’re successful? 48
  35. 35. RESPONSIVE DESIGN STUDIO This helps you develop a core strategy.
  36. 36. RESPONSIVE DESIGN STUDIO From Content Strategy for the Web by Kristina Halvorson and Melissa Rach 50
  37. 37. Your core guides every decision that follows.
  38. 38. RESPONSIVE DESIGN STUDIO Why is this so critical for RWD? ๏ Prioritization: What do you display first on a small screen? ๏ Calls to action: What do we want people to do? How do we keep that central when size changes? ๏ Brevity: How can we create the greatest impact with the least content? 52
  39. 39. Activity: Setting Strategic Direction
  40. 40. About Village Reach
  41. 41. User Journeys
  42. 42. How does a user’s relationship with you unfold over time?
  43. 43. How does their typical path lead them to/through your website?
  44. 44. RESPONSIVE DESIGN STUDIO 59
  45. 45. RESPONSIVE DESIGN STUDIO 60
  46. 46. RESPONSIVE DESIGN STUDIO Audiences ๏ Potential/current institutional donors (e.g. NGOs) ๏ Potential/current individual donors ๏ 3. Partner organizations (e.g. local health authorities) ๏ 4. Public health/international development agencies (e.g. WHO) ๏ 5. Members of the media 61
  47. 47. Activity: The user journey
  48. 48. RESPONSIVE DESIGN STUDIO Audiences and Scenarios 1. A program director from the Bill & Melinda Gates Foundation. 2. A couple who met while serving in the Peace Corp in Mozambique. 3. The director of a regional health service in Tanzania. 4. A committee at the WHO. 5. A journalist from the Atlantic. 63
  49. 49. Content Strategy & Structure
  50. 50. “ Fitting a complex, multi-level navigation onto small screens is difficult no matter what way you slice it. —Brad Frost, “Complex Navigation Patterns for Responsive Design”
  51. 51. How can we make this easier to slice?
  52. 52. First, simplify.
  53. 53. “ For all of the fear that organizations have...[mobile] is also an opportunity. It’s also a chance to sweep away bad, outdated desktop content. — Karen McGrane
  54. 54. from 70k to 3k pages
  55. 55. “ GOV.UK...has been planned, written, organised and designed around what users need to get done, not around the ways government want them to do it—providing only the content they need and nothing superfluous. — Francis Maude, Minister for the Cabinet Office
  56. 56. www.flickr.com/photos/stevendepolo/5190591885 RESPONSIVE DESIGN STUDIO Redundant Outdated Trivial 71
  57. 57. www.flickr.com/photos/atomicjeep/22208897/ RESPONSIVE DESIGN STUDIO Meaningless 72
  58. 58. Then, find patterns.
  59. 59. RESPONSIVE DESIGN STUDIO Not just pages www.flickr.com/photos/peroshenka/408997641
  60. 60. RESPONSIVE DESIGN STUDIO Which content? www.flickr.com/photos/tdd/4493216417 75
  61. 61. www.flickr.com/photos/28478778@N05/5728474385/ RESPONSIVE DESIGN STUDIO Representative content 76
  62. 62. This would help every site. But it’s critical for RWD.
  63. 63. RESPONSIVE DESIGN STUDIO designers aren’t infinite. 78
  64. 64. Patterns helps us scale.
  65. 65. RESPONSIVE DESIGN STUDIO Patterns Become Content Types Events ๏ Shows ๏ Blog Posts ๏ Articles ๏ Profiles ๏ Bios ๏ Help Modules ๏ Press Releases ๏ Directory Listings ๏ Recipes ๏ Products ๏ News Briefs ๏ Research Papers ๏ Abstracts ๏ Courses ๏ Interviews ๏ FAQs ๏ Instructions ๏ 80
  66. 66. Content types become repeatable.
  67. 67. And allow us to anticipate responsive needs.
  68. 68. Activity: Content patterns and types
  69. 69. Design is How it Works
  70. 70. Design by Default
  71. 71. Design by Default
  72. 72. “ People think it's this veneer — that the designers are handed this box and told, 'Make it look good!' That's not what we think design is. It's not just what it looks like and feels like. Design is how it works. — Steve Jobs
  73. 73. RESPONSIVE DESIGN STUDIO Mobile First? ๏ The growth of mobile is a huge opportunity to reach more people than ever. ๏ The constraints of the mobile medium force us to focus on what really matters. ๏ The capabilities of mobile create opportunities to innovate. 89
  74. 74. RESPONSIVE DESIGN STUDIO I want a mobile first website. — A. Client ๏ Start with mobile wireframes ๏ Cut anything not used in the mobile version ๏ Don’t use any interface elements that don’t work on mobile 90
  75. 75. Lowest Common Denominator?
  76. 76. “ …our job is to take responsibility for the complete user experience. And if it’s not up to par, it’s our fault, plain and simply. — Steve Jobs
  77. 77. RESPONSIVE DESIGN STUDIO Mobile First A philosophy—applied to responsive design—where the display and structure of content and functionality are defined by key user tasks and priorities. 96
  78. 78. Users must have access to key content tasks &
  79. 79. Organize prioritize &
  80. 80. Make sure markup, styles scripts don’t obscure it. &
  81. 81. RESPONSIVE DESIGN STUDIO Agile UX & Prototyping 100
  82. 82. RESPONSIVE DESIGN STUDIO Design Overview ๏ Transition & Gesture ๏ Layout & Chrome ๏ Navigation & Controls ๏ Type & Icons ๏ Media & User Interface 101
  83. 83. RESPONSIVE DESIGN STUDIO Transition & Gesture 102
  84. 84. RESPONSIVE DESIGN STUDIO Transition & Gesture Best Practices ๏ React immediately, without pause ๏ Transition changes in the interface ๏ Gestures should be obvious and natural 103
  85. 85. RESPONSIVE DESIGN STUDIO React Immediately 104
  86. 86. “ CHANGE BLINDNESS
  87. 87. “ The real art of conducting consists in transitions. — Gustav Mahler
  88. 88. RESPONSIVE DESIGN STUDIO Transition Changes 111
  89. 89. RESPONSIVE DESIGN STUDIO contentsmagazine.com 112
  90. 90. RESPONSIVE DESIGN STUDIO contentsmagazine.com 112
  91. 91. RESPONSIVE DESIGN STUDIO Obvious Gestures 113
  92. 92. RESPONSIVE DESIGN STUDIO disney.com 114
  93. 93. RESPONSIVE DESIGN STUDIO disney.com 114
  94. 94. RESPONSIVE DESIGN STUDIO disney.com 114
  95. 95. RESPONSIVE DESIGN STUDIO disney.com 115
  96. 96. RESPONSIVE DESIGN STUDIO disney.com 115
  97. 97. RESPONSIVE DESIGN STUDIO disney.com 115
  98. 98. RESPONSIVE DESIGN STUDIO Touch Gesture Reference Guide Tap Press Pinch OR Multi-finger drag OR Multi-finger tap OR Squeeze Press and tap Two-finger drag 1 Double tap Drag Press and drag Spread 2 Lasso and cross Press and tap, then drag 1 Splay Flick OR 1 2 2 Rotate OR OR Supporting materials for this guide can be found online at: http://www.lukew.com/touch/ 116
  99. 99. RESPONSIVE DESIGN STUDIO Layout & Chrome header nav article aside footer 117
  100. 100. RESPONSIVE DESIGN STUDIO Layout & Chrome Best Practices ๏ Collapse Into Fewer And Fewer Columns ๏ Keep Section Short ๏ Think Fluid ๏ Respond to Portrait and Landscape ๏ Use CSS for styles 118
  101. 101. RESPONSIVE DESIGN STUDIO Choosing Breakpoints ๏ Common Screen Widths: 1024px, 760px, 600px, 480px, and 320px ๏ Relative Widths: Ems or % ๏ Natural Breakpoints: Eyeball it and choose the points that work best for the interface you design 119
  102. 102. RESPONSIVE DESIGN STUDIO 120
  103. 103. RESPONSIVE DESIGN STUDIO 121
  104. 104. RESPONSIVE DESIGN STUDIO 122
  105. 105. RESPONSIVE DESIGN STUDIO Collapse Columns 123
  106. 106. RESPONSIVE DESIGN STUDIO unitedpixelworkers.com 124
  107. 107. RESPONSIVE DESIGN STUDIO unitedpixelworkers.com 125
  108. 108. RESPONSIVE DESIGN STUDIO unitedpixelworkers.com 126
  109. 109. RESPONSIVE DESIGN STUDIO unitedpixelworkers.com 127
  110. 110. RESPONSIVE DESIGN STUDIO Collapse Columns ๏ Eliminates horizontal scroll ๏ Allows better use of available space 128
  111. 111. RESPONSIVE DESIGN STUDIO Keep Sections Short 129
  112. 112. RESPONSIVE DESIGN STUDIO Shorter Section s ^ Keep Sections Short 129
  113. 113. RESPONSIVE DESIGN STUDIO etchapps.com 130
  114. 114. RESPONSIVE DESIGN STUDIO etchapps.com/ 131
  115. 115. RESPONSIVE DESIGN STUDIO etchapps.com/ 132
  116. 116. RESPONSIVE DESIGN STUDIO Shorter Section s ^ Keep Sections Short ๏ Easier to scan. ๏ Easier to collapse. 133
  117. 117. RESPONSIVE DESIGN STUDIO Think Fluid 134
  118. 118. RESPONSIVE DESIGN STUDIO gov.uk 135
  119. 119. RESPONSIVE DESIGN STUDIO gov.uk 136
  120. 120. RESPONSIVE DESIGN STUDIO gov.uk 137
  121. 121. RESPONSIVE DESIGN STUDIO Think Fluid ๏ Allows for fluid designs that scale to meet exact widths without getting too wide or too narrow. ๏ Allows better use of available space 138
  122. 122. RESPONSIVE DESIGN STUDIO Respond to Orientation 139
  123. 123. RESPONSIVE DESIGN STUDIO activetheory.net 140
  124. 124. RESPONSIVE DESIGN STUDIO activetheory.net 141
  125. 125. RESPONSIVE DESIGN STUDIO activetheory.net 141
  126. 126. RESPONSIVE DESIGN STUDIO richbrown.info 142
  127. 127. RESPONSIVE DESIGN STUDIO richbrown.info 142
  128. 128. RESPONSIVE DESIGN STUDIO richbrown.info 143
  129. 129. RESPONSIVE DESIGN STUDIO richbrown.info 143
  130. 130. RESPONSIVE DESIGN STUDIO Respond to Orientation ๏ Portrait and landscape are different contexts ๏ Allows for fluid designs that scale to meet exact widths without getting too wide or too narrow. ๏ Allows better use of available space 144
  131. 131. RESPONSIVE DESIGN STUDIO Use CSS for styles 145
  132. 132. RESPONSIVE DESIGN STUDIO seia.org/ 146
  133. 133. RESPONSIVE DESIGN STUDIO seia.org/ 147
  134. 134. RESPONSIVE DESIGN STUDIO seia.org/ 148
  135. 135. RESPONSIVE DESIGN STUDIO Use CSS for styles ๏ Designs that do not rely on images for style are easier to scale. ๏ Gradients and borders and shadows, oh my! 149
  136. 136. CTA Header Nav Promotions Blog Prog1 Prog2 Prog3 Social Newsletter News Footer
  137. 137. CTA Nav Header Social Promotions Prog1 Prog2 Prog3 News Blog Newsletter Footer
  138. 138. Header Nav CTA Promotions Social Prog1 Prog2 Prog3 News Blog Newsletter Footer
  139. 139. RESPONSIVE DESIGN STUDIO Navigation & Controls + 154
  140. 140. RESPONSIVE DESIGN STUDIO Navigation & Controls + Option 1 Option 2 Option 3 154
  141. 141. RESPONSIVE DESIGN STUDIO Navigation & Controls Patterns ๏ “Do Nothing” ๏ Footer anchor ๏ Drop-down Menu ๏ Top slide menu ๏ Side slide menu 155
  142. 142. RESPONSIVE DESIGN STUDIO NAVIGATION PATTERN Top Nav aka. “Do Nothing” 156
  143. 143. RESPONSIVE DESIGN STUDIO yokedesign.com.au 157
  144. 144. RESPONSIVE DESIGN STUDIO yokedesign.com.au 158
  145. 145. RESPONSIVE DESIGN STUDIO yokedesign.com.au 159
  146. 146. RESPONSIVE DESIGN STUDIO NAVIGATION PATTERN Top Nav aka. “Do Nothing” ๏ PRO: Simple ๏ PRO: No JavaScript ๏ CON: Hard Scale ๏ CON: Hard To use 160
  147. 147. RESPONSIVE DESIGN STUDIO NAVIGATION PATTERN Footer Anchor 161
  148. 148. RESPONSIVE DESIGN STUDIO contentsmagazine.com 162
  149. 149. RESPONSIVE DESIGN STUDIO contentsmagazine.com 163
  150. 150. RESPONSIVE DESIGN STUDIO contentsmagazine.com 164
  151. 151. RESPONSIVE DESIGN STUDIO contentsmagazine.com 164
  152. 152. RESPONSIVE DESIGN STUDIO NAVIGATION PATTERN Footer Anchor ๏ PRO: Simple ๏ PRO: No JavaScript ๏ CON: Awkward jump can be disorientating to the user ๏ CON: Difficult to scale 165
  153. 153. RESPONSIVE DESIGN STUDIO NAVIGATION PATTERN Drop-down Menu 166
  154. 154. RESPONSIVE DESIGN STUDIO thenextweb.com 167
  155. 155. RESPONSIVE DESIGN STUDIO thenextweb.com 168
  156. 156. RESPONSIVE DESIGN STUDIO thenextweb.com 168
  157. 157. RESPONSIVE DESIGN STUDIO thenextweb.com 168
  158. 158. RESPONSIVE DESIGN STUDIO NAVIGATION PATTERN Drop-down Menu ๏ PRO: Frees Space ๏ PRO: Scalable ๏ PRO: Can be fixed at top or bottom ๏ CON: Requires JavaScript 169
  159. 159. RESPONSIVE DESIGN STUDIO NAVIGATION PATTERN Top-slide Menu 170
  160. 160. RESPONSIVE DESIGN STUDIO starbucks.com 171
  161. 161. RESPONSIVE DESIGN STUDIO starbucks.com starbucks.com 172
  162. 162. RESPONSIVE DESIGN STUDIO starbucks.com starbucks.com 172
  163. 163. RESPONSIVE DESIGN STUDIO NAVIGATION PATTERN Top-slide Menu ๏ PRO: Frees Space ๏ PRO: Some what Scalable ๏ CON: Requires JavaScript 173
  164. 164. RESPONSIVE DESIGN STUDIO NAVIGATION PATTERN Side-slide Menu 174
  165. 165. RESPONSIVE DESIGN STUDIO 175
  166. 166. RESPONSIVE DESIGN STUDIO 176
  167. 167. RESPONSIVE DESIGN STUDIO 177
  168. 168. RESPONSIVE DESIGN STUDIO NAVIGATION PATTERN Side-slide Menu ๏ PRO: Frees Space ๏ PRO: Very Scalble Scalable ๏ CON: Requires JavaScript 178
  169. 169. RESPONSIVE DESIGN STUDIO Type & Icon 179
  170. 170. RESPONSIVE DESIGN STUDIO Type & Icon Best Practices ๏ Use Webfonts ๏ Don’t Just Shrink to Fit ๏ Use webfonts for Icons 180
  171. 171. RESPONSIVE DESIGN STUDIO Use Webfonts 181
  172. 172. Verdana Georgia Trebuchet MS Arial Times New Roman
  173. 173. RESPONSIVE DESIGN STUDIO Browser Support of Webfonts EOT ✔4 ✔ 3.5 TTF/OTF ✔ 10 ✔ 3.1 SVG WOFF ✔ 3.1 ✔9 ✔ 3.6 ✔3 ✔ 10 ✔6 ✔6 ✔ 11 183
  174. 174. RESPONSIVE DESIGN STUDIO Mobile Support of Webfonts EOT TTF/OTF ✔ 4.2 SVG ✔ 3.1 WOFF ✔ 5.0 ✔ 2.2 ✔6 ✔ 10 184
  175. 175. RESPONSIVE DESIGN STUDIO Webfonts Make Designs More Responsive ๏ Fonts can be optimized for devices. ๏ Reduce or eliminate the need for text in images. ๏ Can replace icons. 185
  176. 176. RESPONSIVE DESIGN STUDIO Don’t Just Shrink To Fit 186
  177. 177. “ A pixel is not a pixel is not a pixel. In other words, there are no absolute sizes when it comes to measuring web type. Everything is relative. — Tim Brown, Nice Web Type
  178. 178. RESPONSIVE DESIGN STUDIO Which line can you read better? This is type set at 10px. Got a microscope? This is type set at 12px. Tiny isn't it? This is type set at 14px. Getting better. This is type set at 16px. Much better! 188
  179. 179. RESPONSIVE DESIGN STUDIO markboultondesign.com 189
  180. 180. RESPONSIVE DESIGN STUDIO markboultondesign.com 190
  181. 181. RESPONSIVE DESIGN STUDIO markboultondesign.com 191
  182. 182. RESPONSIVE DESIGN STUDIO Webfonts for Icons 192
  183. 183. RESPONSIVE DESIGN STUDIO Working Example Article on Web Standards Sherpa 193
  184. 184. RESPONSIVE DESIGN STUDIO 194
  185. 185. RESPONSIVE DESIGN STUDIO 194
  186. 186. RESPONSIVE DESIGN STUDIO 195
  187. 187. RESPONSIVE DESIGN STUDIO 195
  188. 188. RESPONSIVE DESIGN STUDIO 196
  189. 189. RESPONSIVE DESIGN STUDIO Media & User Interface 197
  190. 190. RESPONSIVE DESIGN STUDIO Media & User Interface Best Practices ๏ Reduce media dimensions ๏ Consider bandwidth ๏ Rethink Tables 198
  191. 191. RESPONSIVE DESIGN STUDIO Reduce Media Dimensions No Silver Bullet… yet. ๏ Resize ๏ Crop ๏ Client Side JavaScript ๏ Server Side Detection 199
  192. 192. RESPONSIVE DESIGN STUDIO Consider Bandwidth 200
  193. 193. RESPONSIVE DESIGN STUDIO Rethink Tables ๏ Selective Display » ๏ The Slip Scrol »l ๏ Table to Graph » ๏ Responsive Table » 201
  194. 194. Activity: Storyboard the User Experience
  195. 195. Better Code, Better Experiences
  196. 196. © Brad Frost
  197. 197. We don’t know
  198. 198. Even when we think we know, we’re probably wrong
  199. 199. So how do we cope?
  200. 200. Content
  201. 201. :-) Responsive Web Design Mobile First
  202. 202. User Experience BASIC ADVANCED Browser Capabilities
  203. 203. User Experience Accessibility Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED
  204. 204. User Experience ARIA JavaScript CSS BASIC HTML Browser Capabilities Text & HTTP ADVANCED
  205. 205. HTML
  206. 206. HTML5 HTML Microformats HTML4
  207. 207. MCMLXXVII (that’s 1977)
  208. 208. HTML CSS
  209. 209. fault tolerance n. a system’s ability to continue to operate when it encounters and unexpected error.
  210. 210. Browsers ignore what they don’t understand
  211. 211. User Experience BASIC ADVANCED Browser Capabilities Content
  212. 212. Content is why we build websites
  213. 213. Users must have access to key content tasks &
  214. 214. Make sure markup, styles scripts don’t obscure it. &
  215. 215. User Experience BASIC Semantics Browser Capabilities Content ADVANCED
  216. 216. RESPONSIVE DESIGN STUDIO Semantics 101 <p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p> <p>Please fill out the form below. <strong>Note: all fields are required.</strong></p> <p>I like to work with markup languages because <strong>they are simple and easy to read</strong>. They also have that certain <i lang="fr" title="I don’t know what">je ne sais quoi</i>.</p>
  217. 217. User Experience Design BASIC Semantics Browser Capabilities Content ADVANCED
  218. 218. User Experience Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED
  219. 219. But it’s not only about no JavaScript
  220. 220. ๏Bugs ๏Browser Add-ons ๏Overzealous Firewalls ๏Underpowered devices ๏Page is still loading
  221. 221. User Experience Accessibility Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED
  222. 222. “special needs”
  223. 223. “special needs” can be CONTEXTUAL
  224. 224. RESPONSIVE DESIGN STUDIO The Not So Easy Stuff ๏ Page weight ๏ Interaction methods ๏ Network latency & performance ๏ Hardware performance ๏ Screen resolution ๏ Sensor availability 254
  225. 225. How has your perception of RWD changed?
  226. 226. What do you (or your org) need to work on?
  227. 227. RESPONSIVE DESIGN STUDIO
  228. 228. Making Content Modular
  229. 229. Yesterday we found content types and patterns.
  230. 230. Now let’s get down to details.
  231. 231. Let’s talk structure
  232. 232. We call this content modeling.
  233. 233. RESPONSIVE DESIGN STUDIO A content model is… ๏ A structural model that matches how your content inherently works. ๏ A visualization of relationships between content types in a system. ๏ What will give your content the flexibility needed for RWD. 8
  234. 234. Developers have been modeling data for decades. From Web Database Applications with PHP & MySQL by Hugh E. Williams and David Lane (O’Reilly, 2003)
  235. 235. What’s different about content modeling?
  236. 236. RESPONSIVE DESIGN STUDIO Meaning, then modeling www.flickr.com/photos/mujitra/4868415523
  237. 237. We start by breaking a content type down into its constituent parts.
  238. 238. Then we define what those content chunks need to include.
  239. 239. RESPONSIVE DESIGN STUDIO Content Requirements ๏ Defines which attributes and metadata a content type needs. ๏ Sets formats, character limits, and optional fields. ๏ Defines what you’ll have to work with—and design for. 16
  240. 240. Then we think about how it fits into a content system.
  241. 241. Every content chunk is an opportunity.
  242. 242. Display Condense Remove Reprioritize
  243. 243. If a program is on the homepage, then display its summary, but not details.
  244. 244. When a small screen loads a country page, show the overview but collapse its programs.
  245. 245. RESPONSIVE DESIGN STUDIO Considerations for Modeling How will this content: ๏ Be made available in multiple places? ๏ Expand or contract for bigger or larger screens? ๏ Keep visual priority in a single column? In multiple columns? ๏ Be related to other content? 23
  246. 246. RESPONSIVE DESIGN STUDIO You need balance www.flickr.com/photos/katsrcool/7273165554/
  247. 247. The more complex the model, the more useful. But also the more difficult to implement and train others to use.
  248. 248. Activity: Structuring a content page
  249. 249. Prototyping Responsively
  250. 250. Friends don’t let friends prototype with Photoshop :-)
  251. 251. The Old Ways of Weaving the Web ARE NOT WORKING
  252. 252. RESPONSIVE DESIGN STUDIO 30
  253. 253. RESPONSIVE DESIGN STUDIO 31
  254. 254. RESPONSIVE DESIGN STUDIO 32
  255. 255. RESPONSIVE DESIGN STUDIO 33
  256. 256. RESPONSIVE DESIGN STUDIO 34
  257. 257. RESPONSIVE DESIGN STUDIO 35
  258. 258. RESPONSIVE DESIGN STUDIO 36
  259. 259. RESPONSIVE DESIGN STUDIO 37
  260. 260. “ People think it's this veneer — that the designers are handed this box and told, 'Make it look good!' That's not what we think design is. It's not just what it looks like and feels like. Design is how it works. — Steve Jobs
  261. 261. We Prototype to Answer the Question ”What If…?”
  262. 262. “ [Prototypes] don’t focus on the solution, but on understanding the problem. They ask the question, “What happens when we try this?” Maybe we learn it’s the right idea, but more likely we learn something about the problem we didn’t know before. —Jared Spool
  263. 263. RESPONSIVE DESIGN STUDIO Why do we Prototype? ๏ We need to plan & explore our ideas and concepts. ๏ We need to explain & clarify our ideas and concepts. ๏ We need to test & validate our ideas and concepts. 41
  264. 264. RESPONSIVE DESIGN STUDIO 42
  265. 265. RESPONSIVE DESIGN STUDIO 43
  266. 266. The user experience designer's job does not stop after the page loads… …It's really only just begun.
  267. 267. Story Time On Exactitude in Science
  268. 268. On Exactitude in Web Design A Cautionary Tale
  269. 269. Creepy?
  270. 270. RESPONSIVE DESIGN STUDIO 48
  271. 271. RESPONSIVE DESIGN STUDIO 49
  272. 272. RESPONSIVE DESIGN STUDIO The Fidelity Cliff ๏ Desire for pixel perfection in paper deliverables ๏ Belief that all questions can be answered before development begins. ๏ Waterfall Methodology. ๏ Prototyping in a medium other than the Web. 50
  273. 273. RESPONSIVE DESIGN STUDIO Waterfall 51
  274. 274. RESPONSIVE DESIGN STUDIO Agile UX & Prototyping 52
  275. 275. Avoiding the Fidelity Cliff
  276. 276. RESPONSIVE DESIGN STUDIO 54
  277. 277. Interactive Prototyping: Options?
  278. 278. Use A Tool Roll Your Own
  279. 279. Tools
  280. 280. What We Need… A TOOL AS EASY TO USE AS PHOTOSHOP THAT ALLOWS DESIGNERS TO CREATE INTERACTIVE PROTOTYPES THAT CAN BE QUICKLY TURNED INTO WORKING PRODUCTS.
  281. 281. We are not there… …but we are getting closer.
  282. 282. RESPONSIVE DESIGN STUDIO What Makes a Good Tool? ๏ Responsive Web Design ๏ Structural Fidelity ๏ Visual Fidelity ๏ Interactive Fidelity ๏ Core Web Technologies 60
  283. 283. RESPONSIVE DESIGN STUDIO What Makes a Good Tool? ๏ Responsive Web Design ๏ Structural Fidelity ๏ Visual Fidelity ๏ Interactive Fidelity ๏ Core Web Technologies 61
  284. 284. RESPONSIVE DESIGN STUDIO Tool Comparison Fidelity Visual Interactive Reusable Pricing Format URL Adobe Edge    Free Desktop adobe.com/edge Axure    $$ Desktop axure.com Easle    $$$ Web easel.io InVision    $$$ Web invisionapp.com JetStrap    $$$ Web jetstrap.com Protoshare    $$ Web protoshare.com Proty    Free Plug-in protytype.com Solidify    $$ Web solidifyapp.com Ux Pin    $ Web uxpin.com Webflow    $$ Web webflow.com  = None |  = Partial/Limited |  = Yes $ = Single License | $$ = Multiple License | $$$ = Enterprise License 62
  285. 285. RESPONSIVE DESIGN STUDIO 63
  286. 286. RESPONSIVE DESIGN STUDIO 64
  287. 287. RESPONSIVE DESIGN STUDIO 65
  288. 288. RESPONSIVE DESIGN STUDIO 66
  289. 289. Interactive Prototyping will be THE UX SKILL OF THE FUTURE.
  290. 290. Roll Your Own (with help)
  291. 291. Roll Your Own
  292. 292. Responsive deliverables should look a lot like fully-functioning Twitter Bootstrapstyle systems custom tailored for your clients’ needs. These living code samples are self-documenting style guides that extend to accommodate a client’s needs as well as the needs of the ever-evolving multi-device web. — Dave Rupert, Responsive Deliverables
  293. 293. Coding Better
  294. 294. User Experience BASIC Semantics Browser Capabilities Content ADVANCED
  295. 295. Ad-hoc Semantics
  296. 296. RESPONSIVE DESIGN STUDIO Classification
  297. 297. RESPONSIVE DESIGN STUDIO Identification
  298. 298. RESPONSIVE DESIGN STUDIO Microformats <section class="vcard"> <figure> <img class="photo" src="aaron-gustafson.jpg" alt=""/> </figure> <h1 class="fn">Aaron Gustafson</h1> … <p>Aaron … is <b class="role">Group Manager</b> of the <a class="org" href="http://webstandards.org">Web Standards Project (WaSP)</a> ….</p> </section>
  299. 299. HTML5
  300. 300. RESPONSIVE DESIGN STUDIO Progressive Disclosure
  301. 301. RESPONSIVE DESIGN STUDIO Progressive Disclosure <details> <summary>Consumption Measurement</summary> <ul> <li><a href=”#”>Direct Purchase</a></li> <li><a href=”#”>Distribution</a></li> </ul> </details>
  302. 302. RESPONSIVE DESIGN STUDIO New Field Types <input type="email" …/> <input type="url" …/>
  303. 303. RESPONSIVE DESIGN STUDIO New Field Types <input type="date" name="dob"/>
  304. 304. RESPONSIVE DESIGN STUDIO New Field Types <input type="number" name="foo"/> <input type="range" min="1" max="11" step=”1” name="foo"/>
  305. 305. RESPONSIVE DESIGN STUDIO New Field Types <input type="search" name="query"/>
  306. 306. RESPONSIVE DESIGN STUDIO New Attributes <input type="text" autocomplete=”” autofocus=”” form=”contact-form” required=”” .../>
  307. 307. RESPONSIVE DESIGN STUDIO Form Validation & Hints <input type="text" pattern="d{6}w{3}" placeholder="6 digits followed by 3 letters" .../>
  308. 308. RESPONSIVE DESIGN STUDIO Predictive Typing <input type="text" list="countries" name="country"/> <datalist id="countries"> <option>Afghanistan</option> <option>Åland Islands</option> <!-- ... --> </datalist>
  309. 309. RESPONSIVE DESIGN STUDIO Predictive Typing
  310. 310. RESPONSIVE DESIGN STUDIO Responsive Images ๏ Resize for optimization ๏ Cropping ๏ Alternate views ๏ Alternate resolutions ๏ Alternate colors 96
  311. 311. RESPONSIVE DESIGN STUDIO Responsive Images
  312. 312. RESPONSIVE DESIGN STUDIO Responsive Images <picture> <source media="(max-width: 479px)" src="test_landscape_1@1x.jpg"> <source media="(min-width: 480px) and (max-width: 639px)" src="test_landscape_1@2x.jpg"> <source media="(min-width: 640px)" src="test_landscape_1@4x.jpg"> <source media="monochrome" src="test_landscape_1@monochrome.jpg"> <source media="print" src="test_landscape_1@monochrome.jpg"> <!-- fallback img if picture is not supported --> <img src="test_landscape_1@2x.jpg"> <!-- alternate text --> <p>Nymphenburg Castle in Munich during sunset</p> </picture>
  313. 313. RESPONSIVE DESIGN STUDIO Responsive Images <picture> <source media="(max-width: 479px)" src="test_landscape_1@1x.jpg"> <source media="(min-width: 480px) and (max-width: 639px)" src="test_landscape_1@2x.jpg"> <source media="(min-width: 640px)" src="test_landscape_1@4x.jpg"> <source media="monochrome" src="test_landscape_1@monochrome.jpg"> <source media="print" src="test_landscape_1@monochrome.jpg"> <!-- fallback img if picture is not supported --> <img src="test_landscape_1@2x.jpg"> <!-- alternate text --> <p>Nymphenburg Castle in Munich during sunset</p> </picture>
  314. 314. RESPONSIVE DESIGN STUDIO Responsive Images <picture> <source media="(max-width: 479px)" src="test_landscape_1@1x.jpg"> <source media="(min-width: 480px) and (max-width: 639px)" src="test_landscape_1@2x.jpg"> <source media="(min-width: 640px)" src="test_landscape_1@4x.jpg"> <source media="monochrome" src="test_landscape_1@monochrome.jpg"> <source media="print" src="test_landscape_1@monochrome.jpg"> <!-- fallback img if picture is not supported --> <img src="test_landscape_1@2x.jpg"> <!-- alternate text --> <p>Nymphenburg Castle in Munich during sunset</p> </picture>
  315. 315. RESPONSIVE DESIGN STUDIO Responsive Images <picture> <source media="(max-width: 479px)" src="test_landscape_1@1x.jpg"> <source media="(min-width: 480px) and (max-width: 639px)" src="test_landscape_1@2x.jpg"> <source media="(min-width: 640px)" src="test_landscape_1@4x.jpg"> <source media="monochrome" src="test_landscape_1@monochrome.jpg"> <source media="print" src="test_landscape_1@monochrome.jpg"> <!-- fallback img if picture is not supported --> <img src="test_landscape_1@2x.jpg"> <!-- alternate text --> <p>Nymphenburg Castle in Munich during sunset</p> </picture>
  316. 316. RESPONSIVE DESIGN STUDIO Responsive Images <picture> <source media="(min-width: 40em)" srcset=”big.jpg 1x, big-hd.jpg 2x”> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <!-- fallback img if picture is not supported --> <img src="test_landscape_1@2x.jpg"> <!-- alternate text --> <p>Nymphenburg Castle in Munich during sunset</p> </picture>
  317. 317. User Experience Design BASIC Semantics Browser Capabilities Content ADVANCED
  318. 318. RESPONSIVE DESIGN STUDIO Parsing Errors p{ color: red; }
  319. 319. RESPONSIVE DESIGN STUDIO Parsing Errors p{ color: red; }
  320. 320. RESPONSIVE DESIGN STUDIO Parsing Errors p{ color: red; font-weight: bold; }
  321. 321. RESPONSIVE DESIGN STUDIO Parsing Errors p{ color: red; font-weight: bold; }
  322. 322. RESPONSIVE DESIGN STUDIO Parsing Errors p { color: #44494D; color: rgba( 0, 0, 0, .5 ); } This is a test This is a test
  323. 323. RESPONSIVE DESIGN STUDIO Parsing Errors html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
  324. 324. RESPONSIVE DESIGN STUDIO Parsing Errors @-moz-document url-prefix() { html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); } }
  325. 325. #intro { /* Basic Layout */ } /* ... */ body[id=css-zen-garden] #intro { /* Advanced Layout */ }
  326. 326. #intro { /* Basic Layout */ } /* ... */ [foo], #intro { /* Advanced Layout */ }
  327. 327. RESPONSIVE DESIGN STUDIO Parsing Errors @import 'not-for-IE7-or-below.css' screen; @media screen, print, refrigerator { /* IE will get these rules */ }
  328. 328. RESPONSIVE DESIGN STUDIO @Media Blocks+ @media screen and (min-width:450px) { /* Styles for screen media when browser is 450px wide or larger */ }
  329. 329. RESPONSIVE DESIGN STUDIO Don’t Do This @media screen and (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), screen and (max-device-width:480px) and (orientation:landscape), screen and (min-device-width:481px) and (orientation:portrait) { /* REALLY? */ }
  330. 330. RESPONSIVE DESIGN STUDIO Mobile First w/ Media Queries <link rel="stylesheet" href="/c/basic.css"> <link rel="stylesheet" href="/c/advanced.css" media="only screen and (min-width:20em)"> <!--[if (lt IE 9) & !(IEMobile)]> <link rel="stylesheet" href="/c/ie8.css"> <![endif]--> <link rel="stylesheet" href="/c/print.css" media="print">
  331. 331. RESPONSIVE DESIGN STUDIO Mobile First w/ Media Queries .hentry .entry-meta li { display: inline-block; vertical-align: middle; margin-right: .5em; } .primary .hfeed .hentry .add { position: absolute; top: 2px; left: 2px; width: 22px; } .primary .hfeed .hentry .add a { overflow: hidden; text-indent: 100%; white-space: nowrap; display: block; width: 0; } basic.css advanced.css
  332. 332. RESPONSIVE DESIGN STUDIO Mobile First w/ Media Queries // Break-1 @import "break_1"; // Break 2 @media ( min-width: px-to-ems($break-2) ) { @import "break_2"; } // Break 3 @media ( min-width: px-to-ems($break-3) ) { @import "break_3"; } // Break 4 @media ( min-width: px-to-ems($break-4) ) { @import "break_4"; } advanced.css using SASS
  333. 333. RESPONSIVE DESIGN STUDIO Mobile First w/ Media Queries // Break 1 @import "break_1"; // Break-2 @import "break_2"; // Break 3 @import "break_3"; // Break 4 @import "break_4"; // Break 5 @import "large"; ie8.css using SASS
  334. 334. User Experience Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED
  335. 335. Photo credit: ambery
  336. 336. http://is.gd/lazyloading_demo
  337. 337. RESPONSIVE DESIGN STUDIO Anchor-Include Pattern Replace: <a data-replace="/item/123/reviews?fragment=true" href="/item/123/reviews">8 Reviews</a> After: <a data-after="/item/123/related?fragment=true" href="/item/123/related">Similar T-shirts</a>
  338. 338. RESPONSIVE DESIGN STUDIO 124
  339. 339. RESPONSIVE DESIGN STUDIO Lazy Loading <a href="/article/12345/#comments" data-tooltip="/api/get-comments-tooltip?id=12345">5 Comments</a>
  340. 340. RESPONSIVE DESIGN STUDIO Improved Lazy Loading <a href="/article/12345/#comments" data-tooltip="/api/get-comments-tooltip?id=12345">5 Comments</a>
  341. 341. RESPONSIVE DESIGN STUDIO Improved Lazy Loading <a href="/article/12345/#comments" data-tooltip="/api/get-comments-tooltip?id=12345">5 Comments</a> + <a href="/article/45678/#comments" data-tooltip="/api/get-comments-tooltip?id=45678">5 Comments</a> = $.get(‘/api/get-comments-tooltip?id=12345,45678’, function(data){ // split tooltips apart & set them up for display });
  342. 342. JavaScript CSS
  343. 343. RESPONSIVE DESIGN STUDIO Remember stuff like this? <a href="foo.html" style="color:blue;" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">Foo</a>
  344. 344. RESPONSIVE DESIGN STUDIO Remember stuff like this? <a href="foo.html" style="color:blue;" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">Foo</a> a, a:link, a:visited { color: blue; } a:hover { color: red; }
  345. 345. RESPONSIVE DESIGN STUDIO Isn’t this the same? for( i=0; i<objects.length; i++){ objects[i].style.display = 'none'; }
  346. 346. RESPONSIVE DESIGN STUDIO Small Improvement for( i=0; i<objects.length; i++){ objects[i].style.position = 'absolute'; objects[i].style.left = '-999em'; }
  347. 347. RESPONSIVE DESIGN STUDIO Separation for( i=0; i<objects.length; i++){ objects[i].addClassName( 'hidden' ); } .hidden { position: absolute; left: -999em; }
  348. 348. Apply No Style Before Its Time
  349. 349. RESPONSIVE DESIGN STUDIO How do we do that? .TabInterface-tablist { /* … */ } #MyUniqueObject .component { /* … */ } 133
  350. 350. RESPONSIVE DESIGN STUDIO How do we do that? Tactic add “-on” to the class Default .tabbed add an activation class change the form of the class Activated .tabbed-on .TabInterface-enabled .replace-me .replaced
  351. 351. RESPONSIVE DESIGN STUDIO Semantics <ul> <li> <a href="#"><img src="…" alt="" /></a> <span>Your new online source for information on our progress</span> </li> <li> <a href="#"><img src="…" alt="" /></a> <span>VillageReach Announces Mozambique National Expansion</span> </li> <li> <a href="#"><img src="…" alt="" /></a> <span>VillageReach's innovative approach for last mile communities</span> </li> … </ul>
  352. 352. RESPONSIVE DESIGN STUDIO Style? <ul style=”height: 300px;”> <li style=”height: 300px;” > <a href="#"><img src="…" alt="" /></a> <span>Your new online source for information on our progress</span> </li> <li style=”height: 300px;” > <a href="#"><img src="…" alt="" /></a> <span>VillageReach Announces Mozambique National Expansion</span> </li> <li style=”height: 300px;” > <a href="#"><img src="…" alt="" /></a> <span>VillageReach's innovative approach for last mile communities</span> </li> … </ul>
  353. 353. User Experience Accessibility Interactivity Design BASIC Semantics Browser Capabilities Content ADVANCED
  354. 354. RESPONSIVE DESIGN STUDIO Alt Text & Titles <img src=”/i/logo.png” alt=”User Interface 17”/>
  355. 355. RESPONSIVE DESIGN STUDIO Alt Text & Titles <img src=”/i/frisbee.png” alt=”Man throws frisbee to golden retriever”/>
  356. 356. RESPONSIVE DESIGN STUDIO Alt Text & Titles <img src=”/i/frisbee.png” alt=”Man throws frisbee to golden retriever”/>
  357. 357. RESPONSIVE DESIGN STUDIO Alt Text & Titles <img src=”/i/frisbee.png” alt=”Man throws frisbee to golden retriever”/> <img src=”/i/frisbee.png” alt=””/>
  358. 358. RESPONSIVE DESIGN STUDIO Alt Text & Titles <input type="text" required="" title="First name is required"/>
  359. 359. RESPONSIVE DESIGN STUDIO Alt Text & Titles <input type="email" required="" title="Your email is invalid"/>
  360. 360. RESPONSIVE DESIGN STUDIO Alt Text & Titles <input type="email" required="" title="Your email is invalid"/>
  361. 361. RESPONSIVE DESIGN STUDIO Alt Text & Titles <form class="login" action="" method="post" data-error-empty="This field is required" data-error-invalid="Your response does not appear valid"> <ol> <li> <label for="email">Email</label> <input id="email" name="email" type="email" required="" data-error-invalid=”Your email is not valid”/> </li> <li> <label for="password">Password</label> <input id="password" type="password" name="password" required=""/> </li> <li><button type="submit">Login</button></li> </ol> </form>
  362. 362. RESPONSIVE DESIGN STUDIO Alt Text & Titles $('input,select,textarea') // handle invalidity .bind('invalid', function(){ var $this = $(this), msg = ''; if ( this.validity.valueMissing ) { msg = $this.data('error-empty') || $this.closest('form').data('error-empty'); } else if ( ! this.validity.valid ) { msg = $this.data('error-invalid') || $this.closest('form').data('error-invalid'); } this.setCustomValidity( msg ); }) // reset .bind('change', function(){ this.setCustomValidity(''); });
  363. 363. RESPONSIVE DESIGN STUDIO What is it?
  364. 364. RESPONSIVE DESIGN STUDIO What is it? <button>Tweet</button> <a class=”button”>Tweet</a>
  365. 365. RESPONSIVE DESIGN STUDIO What is it? <button>Tweet</button> <a class=”button”>Tweet</a>
  366. 366. RESPONSIVE DESIGN STUDIO What is it?
  367. 367. RESPONSIVE DESIGN STUDIO What is it? <button>Search Mail</button> <div>Search Mail</div>
  368. 368. RESPONSIVE DESIGN STUDIO What is it? <button>Search Mail</button> <div>Search Mail</div>
  369. 369. RESPONSIVE DESIGN STUDIO ARIA Maps the OS to the Web
  370. 370. Semantics+
  371. 371. RESPONSIVE DESIGN STUDIO All the Web’s a Play… <section id="main" role="main"> <!-- The primary content for the page would go here --> </section>
  372. 372. <header role="banner">
  373. 373. <nav role="navigation">
  374. 374. <form role="search">
  375. 375. <section role="main">
  376. 376. RESPONSIVE DESIGN STUDIO Semantic Comparison Ad-hoc ARIA Role HTML5 #header, #top banner header (kind of) #main, #content main none #extra, .sidebar complementary, note aside #footer, #bottom contentinfo footer #nav navigation nav .hentry article article
  377. 377. RESPONSIVE DESIGN STUDIO These are the droids you seek <span role="button">OK</span> <div role="alert"> <p>Something went wrong.</p> </div> <div role="alertdialog"> <p>Something went wrong.</p> <img src="x.png" alt="dismiss" role="button" /> </div>
  378. 378. RESPONSIVE DESIGN STUDIO What is it? <a role=”button”>Tweet</a> class=”button”>Tweet</a>
  379. 379. RESPONSIVE DESIGN STUDIO What is it? <a role=”button”>Tweet</a>
  380. 380. RESPONSIVE DESIGN STUDIO What’s happening? B B (off) (on) <span> <img src="bold-off.png" alt="bold" /> </span> <span> <img src="bold-on.png" alt="bold" /> </span>
  381. 381. RESPONSIVE DESIGN STUDIO What’s happening? B B (off) (on) <span> <img src="bold-off.png" alt="not bold" /> </span> <span> <img src="bold-on.png" alt="bold" /> </span>
  382. 382. RESPONSIVE DESIGN STUDIO What’s happening? B B (off) (on) <span role="button" aria-pressed="false"> <img src="bold-off.png" alt="not bold" /> </span> <span role="button" aria-pressed="true"> <img src="bold-on.png" alt="bold" /> </span>
  383. 383. RESPONSIVE DESIGN STUDIO Hey! Over here!
  384. 384. RESPONSIVE DESIGN STUDIO Hey! Over here! <input class="tweet-counter" value="140" disabled="disabled">
  385. 385. RESPONSIVE DESIGN STUDIO Hey! Over here! <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>
  386. 386. RESPONSIVE DESIGN STUDIO Hey! Over here! <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span> .hidden { position: absolute; left: ⇥999em; }
  387. 387. RESPONSIVE DESIGN STUDIO Hey! Over here! <span class="tweet-counter">maximum of 140 characters</span> <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>
  388. 388. RESPONSIVE DESIGN STUDIO Hey! Over here! <span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>
  389. 389. RESPONSIVE DESIGN STUDIO Hey! Over here!
  390. 390. Photo credit: emilio labrador
  391. 391. RESPONSIVE DESIGN STUDIO Typical Hiding Schemes Accessibility Effect CSS Rules Display Effect visibility: hidden; Element is hidden from view, but is not removed from the normal flow (i.e. it still takes up the space it normally would) Content is ignored by screen readers display: none; Element is removed from the normal flow and hidden; the space it occupied is collapsed Content is ignored by screen readers height: 0; width: 0; overflow: hidden; Element is collapsed and contents are hidden Content is ignored by screen readers
  392. 392. RESPONSIVE DESIGN STUDIO Typical Hiding Schemes Accessibility Effect CSS Rules Display Effect text-indent: -999em; Contents are shifted offscreen and hidden from view, but links may “focus” oddly and negative indent may not prove long enough to fully hide content Screen readers have access to the content, but the content is limited to text and inline elements position: absolute; left: -999em; Content is removed from the normal flow and shifted off the left-hand edge; the space it occupied is collapsed Screen readers have access to the content
  393. 393. RESPONSIVE DESIGN STUDIO Typical Hiding Schemes CSS Rules Display Effect position: absolute; /* IE6, IE7 */ clip: rect( 1px 1px 1px 1px ); /* W3C */ clip: rect( 1px, 1px, 1px, 1px ); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; Content is positioned absolutely (and is removed from the normal flow), but remains in place and is clipped to become invisible Accessibility Effect Screen readers have access to the content
  394. 394. RESPONSIVE DESIGN STUDIO Typical Hiding Schemes Accessibility Effect CSS Rules Display Effect visibility: hidden; Element is hidden from view, but is not removed from the normal flow (i.e. it still takes up the space it normally would) Content is ignored by screen readers display: none; Element is removed from the normal flow and hidden; the space it occupied is collapsed Content is ignored by screen readers height: 0; width: 0; overflow: hidden; Element is collapsed and contents are hidden Content is ignored by screen readers
  395. 395. RESPONSIVE DESIGN STUDIO “Fixing” Libraries (function(){ var $button = $('#myButton'), $text = $('#myText'), visible = true; $button.click(function(){ if ( visible ) { $text.slideUp('fast'); } else { $text.slideDown('fast'); } visible = ! visible; }); })();
  396. 396. RESPONSIVE DESIGN STUDIO “Fixing” Libraries (function(){ var $button = $('#myButton'), $text = $('#myText'), visible = true; $button.click(function(){ if ( visible ) { $text.slideUp('fast',function(){ $text.addClass('accessibly-hidden') .slideDown(0); }); } else { $text.slideUp(0,function(){ $text.removeClass('accessibly-hidden') .slideDown('fast'); }); } visible = ! visible; }); })();
  397. 397. photo by cfpg
  398. 398. RESPONSIVE DESIGN STUDIO Managing Focus <div tabindex="0"> <p>This <code>div</code> can now receive focus using a keyboard’s <kbd>tab</kbd> key. How cool is that?</p> </div> <div tabindex="-1"> <p>This <code>div</code> won’t be focused by a user via the <kbd>tab</kbd> key, but JavaScript can <code>focus()</code> it. Nifty, huh?</p> </div>
  399. 399. RESPONSIVE DESIGN STUDIO Complex Interfaces
  400. 400. RESPONSIVE DESIGN STUDIO Complex Interfaces
  401. 401. RESPONSIVE DESIGN STUDIO There is no image… <p class="entry-image" data-image-src="/alztheme/images/news/sample.jpg"></p>
  402. 402. RESPONSIVE DESIGN STUDIO Until there is <p class="entry-image" data-image-src="/alztheme/images/news/sample.jpg" data-has-image="true"> <img alt="" src="/alztheme/images/news/sample.jpg" alt=””> </p>
  403. 403. RESPONSIVE DESIGN STUDIO Adaptive Widget Logic Lazy load the images Page Yes No Yes JS? No
  404. 404. RESPONSIVE DESIGN STUDIO Adaptive Widget Logic Lazy load the images Page LIVE Yes No Yes JS? No Hide the images (if loaded)
  405. 405. RESPONSIVE DESIGN STUDIO Complex Interfaces
  406. 406. RESPONSIVE DESIGN STUDIO Complex Interfaces
  407. 407. RESPONSIVE DESIGN STUDIO No Need to Link <figure id="fig-1"> <img src="/path/small.png" data-enlarged="/path/large.png" alt=""> <figcaption> <h6>Retreats 4 Geeks</h6> <p>We built this site for our intimate retreat series.</p> </figcaption> </figure>
  408. 408. RESPONSIVE DESIGN STUDIO Adaptive Widget Logic Create the link & make image clickable Yes Page No Yes JS? No
  409. 409. RESPONSIVE DESIGN STUDIO Complex Interfaces
  410. 410. RESPONSIVE DESIGN STUDIO Make the Connection <figure id="fig-1"> <img src="/path/small.png" data-enlarged="/path/large.png" alt="" class="enlargable"> <p class="enlarge"><a href="#enlarge">Click to Enlarge</a></p> <figcaption> <h6>Retreats 4 Geeks</h6> <p>We built this site for our intimate retreat series.</p> </figcaption> </figure>
  411. 411. RESPONSIVE DESIGN STUDIO Complex Interfaces
  412. 412. RESPONSIVE DESIGN STUDIO Traditional Approach <h1>Pumpkin Pie</h1> <div class="container"> <div class="section"> <h2>Overview</h2> <img src="pie.jpg" alt=""> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> </div> <!-- ... --> <ul class="tabs"> <li><a href="#">Overview</a></li> <li><a href="#">Ingredients</a></li> <li><a href="#">Directions</a></li> <li><a href="#">Nutrition</a></li> </ul> </div>
  413. 413. RESPONSIVE DESIGN STUDIO Cleaner Approach <h1>Pumpkin Pie</h1> <div class="tabbed-interface"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> <h2>Ingredients</h2> <ul> <li>1 (9<abbr title="inch">in</abbr>) unbaked deep dish pie crust</li> <li> cup white sugar</li> <!-- ... --> </ul> <h2>Directions</h2> <!-- ... --> </div>
  414. 414. RESPONSIVE DESIGN STUDIO Cleaner Approach <h1>Pumpkin Pie</h1> <div class="tabbed-interface"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> <h2>Ingredients</h2> <ul> <li>1 (9<abbr title="inch">in</abbr>) unbaked deep dish pie crust</li> <li> cup white sugar</li> <!-- ... --> </ul> <h2>Directions</h2> <!-- ... --> </div>
  415. 415. RESPONSIVE DESIGN STUDIO No JS, Basic CSS
  416. 416. RESPONSIVE DESIGN STUDIO Widget Logic Page Split the content & make some tabs Yes JS? No
  417. 417. RESPONSIVE DESIGN STUDIO On DOM Ready <h1>Pumpkin Pie</h1> <div class="tabbed-interface TabInterface-enabled"> <section> <h2>Overview</h2> <img src="pie.jpg" alt=""> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> </section> <!-- ... --> <ul class="tabs"> <li><a href="#">Overview</a></li> <li><a href="#">Ingredients</a></li> <li><a href="#">Directions</a></li> <li><a href="#">Nutrition</a></li> </ul> </div>
  418. 418. RESPONSIVE DESIGN STUDIO Cleaner Approach <h1>Pumpkin Pie</h1> <div class="tabbed-interface" data-tab-threshold="800"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> <!-- ... --> <h2>Ingredients</h2> <ul> <li>1 (9<abbr title="inch">in</abbr>) unbaked deep dish pie crust</li> <li> cup white sugar</li> <!-- ... --> </ul> <h2>Directions</h2> <!-- ... --> </div>
  419. 419. RESPONSIVE DESIGN STUDIO Adaptive Widget Logic Split the content & make some tabs Page LIVE Yes No Yes JS? No Untab (if tabbed)
  420. 420. RESPONSIVE DESIGN STUDIO Adding ARIA role="tablist" 208
  421. 421. RESPONSIVE DESIGN STUDIO Adding ARIA role="tab" aria-selected="true" aria-controls="folder-1"
  422. 422. RESPONSIVE DESIGN STUDIO Adding ARIA role="tab" aria-selected="false" aria-controls="folder-4"
  423. 423. RESPONSIVE DESIGN STUDIO Adding ARIA role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"
  424. 424. RESPONSIVE DESIGN STUDIO Adding ARIA role="application" aria-activedescendant="folder-1"
  425. 425. RESPONSIVE DESIGN STUDIO Result!

×