Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Responsive Design & Beyond [Code & Creativity Workshop]

66 vues

Publié le

Responsive web design has taken our industry by storm and with good reason: it helps us improve our reach with less effort. But incorporating responsive design is not the goal, meeting our user’s needs is. Responsive design is not an end in itself… it’s just the beginning.

As a fitting way to kick off our new workshop series, we’ve asked two internationally-renown mobile web and responsive design experts—Brad Frost (of This is Responsive, and Pattern Lab fame) and Aaron Gustafson (author of Adaptive Web Design)—to come and teach us everything we need to know about working in this multi-device reality.

For the first part of the day, Brad and Aaron will survey the landscape of responsive design, covering:

* broad concepts,
* strategies,
* the design process & deliverables,
*emerging design patterns and principles, and
* development best practices and considerations.

Then, we’ll break into small groups to tackle some thorny responsive challenges through discussions, sketching, and maybe even a little coding while Brad & Aaron provide real-time feedback and push us to go further. At the end, we’ll share our findings with the class and get additional feedback from the experts.

Publié dans : Technologie, Business
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Responsive Design & Beyond [Code & Creativity Workshop]

  1. 1. ...AND LESS!
  2. 2. ...AND BEYOND!
  3. 3. TECH REVIEWERCONTRIBUTOR
  4. 4. AUTHOR “RESPONSIVE PATTERNS”
  5. 5. BUT ENOUGH ABOUT ME ! ! LET’S TALK ABOUT YOU
  6. 6. WHAT WE’LL COVER ๏ TheWeb Landscape ๏ MobileWeb Strategy ๏ Foundations of Responsive Design ๏ The Principles ofAdaptive Design ๏ Atomic Design & Pattern Lab ๏ Process andWorkflow ๏ Aaron Gustafson’s Progressive Enhancement Extravaganza!
  7. 7. WHAT DO YOU WANT TO KNOW?
  8. 8. THE EVER-SHIFTING LANDSCAPE
  9. 9. B-SIDE THIS IS NOT THE WEB.
  10. 10. WEB WEB
  11. 11. http://www.itu.int/net/pressoffice/press_releases/2012/70.aspx#.UQXLOkrHen0 6,000,000,000 WORLDWIDE MOBILE SUBSCRIPTIONS
  12. 12. More people have access to mobile than to running water and toothbrushes. http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets
  13. 13. http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx 91% AMERICANS OWN A MOBILE PHONE
  14. 14. 44.0% 56.0% SMARTPHONE NONSMART http://blog.nielsen.com/nielsenwire/?p=31688 PERCENTAGE OF AMERICANS WITH SMARTPHONES
  15. 15. 34.0% 66.0% SMARTPHONE NONSMART http://blog.nielsen.com/nielsenwire/?p=30950 PERCENTAGE OF 24-34 YR OLDS W/ SMARTPHONES
  16. 16. http://adultlescence.files.wordpress.com/2011/07/img_1352.jpg MORE IPHONES ARE SOLD THAN BABIES BORN EVERY DAY. http://thenextweb.com/apple/2012/01/25/there-are-now-more-iphones-sold-than-babies-born-in-the-world-every-day/
  17. 17. http://news.yahoo.com/daily-android-activations-grow-1-5-million-google-041552461.html 1,500,000 DAILY ANDROID ACTIVATIONS
  18. 18. http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx 34% AMERICANS THAT OWN A TABLET OR E-READER (UP FROM 3% IN 2010)
  19. 19. http://www.displaysearch.com/cps/rde/xchg/displaysearch/hs.xsl/ 130107_tablet_pc_market_forecast_to_surpass_notebooks_in_2013.asp TABLETS SLATED TO OUTSELL PCS IN 2013 2011 2012 2013 2014 2015 2016 2017 0 25 50 75 100 TABLETS PCS
  20. 20. THE IPAD CAME OUT IN 2010.
  21. 21. 2 MONTHS OF DEVICE DIVERSITY ๏ Apple iPhone 5 ๏ Nokia Lumia 920 ๏ HTC Windows Phone 8X ๏ HTC Windows Phone 8S ๏ Motorola Droid RAZR HD ๏ Motorola Droid RAZR M ๏ TBD: LG Nexus 4 http://www.lukew.com/ff/entry.asp?1646 4"-5" SMARTPHONES ๏ Samsung Galaxy Note II 5"-6" PHONE/TABLET ๏ iPad Mini ๏ Kindle Fire HD ๏ Kindle Fire 7"-8" TABLETS ๏ iPad Gen 4 ๏ Microsoft Surface Tablet ๏ Kindle Fire HD ๏ Lenovo ThinkPad Tablet 2 ๏ Acer Iconia Tab W510 ๏ Dell Latitude 10 ๏ Dell XPS 10Asus Vivo Tab RT TBD: Nexus 10 9"-10" TABLETS ๏ 13" MacBook Pro with Retina ๏ Lenovo IdeaPad Yoga 13 ๏ Lenovo ThinkPad Twist ๏ Toshiba Satellite U925T ๏ Dell XPS 12 ๏ Lenovo IdeaTab Lynx ๏ Samsung ATIV Smart PC 500T/ 700T ๏ Acer Iconia W700 ๏ Sony Vaio Duo 11 ๏ Samsung Chromebook 11"-17" LAPTOPS/TABLETS ๏ Sony Tap 20 ๏ 21.5-inch iMac ๏ 27-inch iMac 20"-30" DESKTOPS
  22. 22. DEVICE FATIGUE http://bradfrostweb.com/blog/post/device-fatigue/
  23. 23. WHAT MOBILE MEANS FOR THE WEB
  24. 24. MOBILE WEB
  25. 25. 80% 20% MOBILE DESKTOP http://allthingsd.com/20120525/mobile-devices-now-make-up-about-20-percent-of-u-s-web-traffic/ MOBILE NOW MAKES UP 20% OF ALL WEB TRAFFIC
  26. 26. http://www.pewinternet.org/2014/02/27/summary-of-findings-3/ 68% AMERICANS WHO ACCESS THE WEB FROM A MOBILE DEVICE
  27. 27. http://www.pewinternet.org/2014/02/27/summary-of-findings-3/ 33% MOBILE WEB CAPABLE AMERICANS THAT ACCESS THE WEB SOLELY THROUGH A MOBILE PHONE
  28. 28. http://www.flickr.com/photos/webdagene/6149954378/
  29. 29. If your stuff, if your content, if your information, if your products, if your services are not available on mobile, they don’t exist for these people. -Karen McGrane http://karenmcgrane.com/2013/01/09/uncle-sam-wants-you-to-optimize-your-content-for-mobile/
  30. 30. http://www.theverge.com/2013/1/30/3934052/mark-zuckerberg-q4-earnings-myth-that-facebook-cant-make-money-on-mobile 680,000,000 PEOPLE ACCESSING FACEBOOK FROM A MOBILE DEVICE
  31. 31. http://www.theverge.com/2013/1/30/3934052/mark-zuckerberg-q4-earnings-myth-that-facebook-cant-make-money-on-mobile 157,000,000 PEOPLE USING FACEBOOK ONLY FROM A MOBILE DEVICE
  32. 32. We see more people accessing Facebook on the mobile web than from our top native apps combined. -Facebook https://developers.facebook.com/blog/post/2012/02/27/helping-improve-the-mobile-web/
  33. 33. http://marketingland.com/twitter-60-percent-of-users-access-via-mobile-13626 60% USERS ACCESSING TWITTER FROM MOBILE DEVICES
  34. 34. WHAT GETS SHARED ON SOCIAL NETWORKS?
  35. 35. TEXT, PHOTOS, VIDEOS AND LINKS
  36. 36. http://mashable.com/2014/02/24/facebook-mobile-traffic/ 51% REFERRAL TRAFFIC TO MEDIA SITES CAME FROM FACEBOOK MOBILE
  37. 37. RESOURCE http://blog.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/
  38. 38. APPROACH
  39. 39. DO NOTHING
  40. 40. We’re cultivating a nation of slide-swiping screen surfing zombies. -Stupid Ken http://cghub.com/images/view/217313/
  41. 41. LET’S MAKE AN APP!
  42. 42. APP GLUT http://www.flickr.com/photos/29022619@N03/7980265115/
  43. 43. RESOURCEhttp://blog.cloudfour.com/links-do-not-open-apps/
  44. 44. FOCUSED CREATION, UBIQUITOUS DISTRIBUTION http://bradfrostweb.com/blog/post/native-vs-web-is-total-bullshit/
  45. 45. If your content is accessible from a URL, it will be accessed by mobile devices.
  46. 46. SEPARATE DEVICE EXPERIENCES
  47. 47. DEVICE EXPERIENCE ADVANTAGES
  48. 48. DEVICE EXPERIENCE ADVANTAGES ๏ Create a more dedicated,optimized,catered experience
  49. 49. DEVICE EXPERIENCE ADVANTAGES ๏ Create a more dedicated,optimized,catered experience ๏ Don’t have to worry about adapting interface conventions to larger screens
  50. 50. DEVICE EXPERIENCE ADVANTAGES ๏ Create a more dedicated,optimized,catered experience ๏ Don’t have to worry about adapting interface conventions to larger screens ๏ Potential to keep experience more performant
  51. 51. DEVICE EXPERIENCE PITFALLS ๏ URL redirection issues
  52. 52. DEVICE EXPERIENCE PITFALLS ๏ URL redirection issues ๏ Content parity issues ๏ Content governance issues ๏ Need to maintain a device database ๏ The Space Between ๏ SEO Issues ๏ Continuity Issues
  53. 53. Any attempt to draw a line around a particular device class has as much permanence as a literal line in the sand. -Jason Grigsby http://blog.cloudfour.com/responsive-design-for-apps-part-1/
  54. 54. http://www.guypo.com/mobile/rwd-ratio-in-top-100000-websites-refined/ 11-12% PERCENTAGE OF TOP 100,000 WEBSITES THAT ARE RESPONSIVE
  55. 55. PLANT THE SEED TO A RESPONSIVE FUTURE
  56. 56. SEPARATE SITES AREN’T SCALABLE MOBILE E-READER TABLET DESKTOP TV
  57. 57. CURRENT DESKTOP SITE (AWKWARD TREE IS AWKWARD) MOBILE SITE (IMMATURE, BUT SEED IS PLANTED) http://bradfrostweb.com/blog/mobile/planting-the-seed-for-a-responsive-future/
  58. 58. OLD DESKTOP SITE (OBSOLETE TREE IS OBSOLETE) MOBILE SITE (MOBILE-FIRST, ADAPTIVE, AND FUTURE-FRIENDLY) http://bradfrostweb.com/blog/mobile/planting-the-seed-for-a-responsive-future/
  59. 59. RESPONSIVE RETROFITTING
  60. 60. For existing sites (particularly ones that are also businesses) teams don’t always have the luxury of tossing everything aside and building anew. -Dan Cederholm http://simplebits.com/notebook/2011/08/19/adapted/
  61. 61. MOBILE-FIRST RESPONSIVE DESIGN
  62. 62. MOBILE-LAST (DEGRADED, SHOE-HORNED, SHORT-SIGHTED, CRAPPY) MOBILE-FIRST (PROGRESSIVELY-ENHANCED, FUTURE-FRIENDLY, AWESOME)
  63. 63. FOUNDATIONS OF RESPONSIVE DESIGN
  64. 64. RESOURCE http://alistapart.com/article/responsive-web-design
  65. 65. RESOURCE http://www.abookapart.com/products/responsive-web-design
  66. 66. RESPONSIVE WEB DESIGN: THE MOVIE WINTER 2014
  67. 67. FLEXIBLE MEDIAFLUID GRIDS MEDIA QUERIES
  68. 68. FLUID GRIDS
  69. 69. FLUID GRIDS ๏ Uses percentages and relative units instead of fixed pixel widths ๏ Think in terms of proportions instead of pixel-perfection ๏ Does most of the heavy lifting of a responsive design
  70. 70. OUR FIXED-WIDTH PAST code block.container {! margin: 0 auto;! width: 960px;! }! ! .main {! float: left;! width: 620px;! margin-right: 20px;! }! ! .sidebar {! float: left;! width: 320px;! }
  71. 71. MAKING THINGS FLEXY code block.container {! margin: 0 auto;! max-width: 60em;! }! ! .main {! float: left;! width: 64.58333333%;! margin-right: 2.083333333%;! }! ! .sidebar {! float: left;! width: 33.333333333%;! }
  72. 72. 620 ÷ 960 = 0.6458333333 TARGET CONTEXT RESULT RESOURCE http://alistapart.com/article/fluidgrids
  73. 73. FLEXIBLE MEDIA
  74. 74. FLEXIBLE MEDIA ๏ Images need to scale within their containers ๏ Other media need to flex as well: video, objects, slideshows, 3rd part widgets, etc
  75. 75. FLUID IMAGES code block img {! max-width: 100%;! height: auto;! }
  76. 76. MEDIA QUERIES
  77. 77. MEDIA QUERIES code block! ! ! @media all and (min-width: 50em) {! ! /* Styles apply only to screens with a width greater than 50em (800px) */! ! }
  78. 78. CSS3 MEDIA QUERIES ๏ Responsive design’s secret sauce ๏ Applies specific styles only when certain conditions are present ๏ Variables include: width, device-width, height, device- height, pixel-density, orientation and more
  79. 79. RESPONSIVE WEB DESIGN RESIZEHERE! IMPRESSYOURFRIENDS!
  80. 80. RAISED EYEBROW IS RAISED
  81. 81. THIS IS JUST THE TIP OF THE ICEBERG.
  82. 82. THIS IS JUST THE TIP OF THE ICEBERG.
  83. 83. THIS IS JUST THE TIP OF THE ICEBERG.
  84. 84. RWD
  85. 85. PRINCIPLES OF ADAPTIVE DESIGN
  86. 86. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  87. 87. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  88. 88. MOBILE WEB BEST PRACTICES http://www.flickr.com/photos/anna_debenham/8190771122/
  89. 89. Diversity is not a bug, it’s an opportunity. -Stephanie Rieger http://stephanierieger.com/diversity-is-not-a-bug/
  90. 90. “BUT MOBILE USERS WON’T DO THAT.”
  91. 91. PEOPLE ARE DOING MORE ON MOBILE... LIKE BUYING DIAMONDS.
  92. 92. Mobile users will do anything and everything desktop users will do, provided it’s presented in a usable way. https://twitter.com/brad_frost/status/176697511761805312
  93. 93. ONE WEB.
  94. 94. ONE WEB. THEMATIC CONSISTENCY.
  95. 95. ONE WEB. THEMATIC CONSISTENCY. GIVE PEOPLE WHAT THEY WANT.
  96. 96. CONTENT PARITY
  97. 97. BUT WHAT ABOUT MOBILE CONTEXT?
  98. 98. WHAT EXACTLY IS “MOBILE CONTEXT”?
  99. 99. QUANTITATIVE ๏ Screen size ๏ Connectivity ๏ Device capabilities ๏ Processing power ๏ Input methods QUALITATIVE ๏ User goals ๏ User environment ๏ Uses attention ๏ User capabilities
  100. 100. “ON THE GO” IS STILL TRUE...
  101. 101. BUT LOTS OF OTHER USE CASES EXIST TOO
  102. 102. http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience 76% ACCESS MOBILE WHILE WAITING IN LINE
  103. 103. http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience 86% ACCESS MOBILE DEVICES WHILE WATCHING TV
  104. 104. http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience 80% ACCESS MOBILE DURING GENERAL DOWNTIME
  105. 105. http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience 69% ACCESS MOBILE IN RETAIL STORES
  106. 106. http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience 75% WHILE ON THE TOILET
  107. 107. Just make quality, relevant content with appropriate tasks, and offer all of these to all users...then make it easy for the user to decide what it is they want to do. -Stephen Hay http://www.the-haystack.com/2012/07/09/great-works-of-fiction-presents-the-mobile-context/
  108. 108. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  109. 109. 320PX.
  110. 110. 320PX. 480PX.
  111. 111. 320PX. 480PX. 768PX.
  112. 112. 320PX. 480PX. 768PX. 1024PX.
  113. 113. 320PX. 480PX. 768PX. 1024PX. THE FOLD.
  114. 114. 320PX. 480PX. 768PX. 1024PX. THE FOLD. OH GOD THE FOLD.
  115. 115. scha·den·freu·de ˈshä-dən-ˌfrȯi-də n. enjoyment obtained from the troubles of others
  116. 116. The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things”. -John Allsopp http://alistapart.com/article/dao
  117. 117. RESOURCE http://bradfrostweb.com/demo/ish/
  118. 118. RESOURCE http://bradfrostweb.com/demo/ish/
  119. 119. EMBRACE THE SQUISHINESS.TM
  120. 120. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  121. 121. http://www.compuware.com/d/release/592528/new-study-reveals-the-mobile-web-disappoints-global-consumers 71% MOBILE USERS EXPECTING MOBILE SITES TO LOAD AS FAST IF NOT FASTER THAN DESKTOP SITES
  122. 122. http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf 74% MOBILE VISITORS WHO WILL ABANDON A SITE IF IT TAKES LONGER THAN 5 SECONDS TO LOAD
  123. 123. YOU HAVE 5 SECONDS OF SOMEONE’S TIME.
  124. 124. http://httparchive.org/ 1.68MB AVERAGE PAGE SIZE
  125. 125. http://www.stevesouders.com/blog/2013/05/09/how-fast-are-we-going-now/ 28% GROWTH IN PAGE WEIGHT YEAR OVER YEAR
  126. 126. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/ 72% RESPONSIVE WEBSITES WHOSE SMALL SCREEN VIEW WEIGHS AS MUCH AS THE LARGE SCREEN VIEW
  127. 127. REQUESTS: 136 PAGE WEIGHT: 5.9MB LOAD TIME: 2M 46S
  128. 128. https://twitter.com/brad_frost/status/326423168342450178/photo/1
  129. 129. https://twitter.com/brad_frost/status/326423168342450178/photo/1 REQUESTS: 464 PAGE WEIGHT: 85.9MB LOAD TIME: 2M 10S
  130. 130. If your website is 15MB it’s not HTML5, it’s stupid. -Christian Heilmann HTTPS://HACKS.MOZILLA.ORG/2012/10/BROKEN-PROMISES-OF-HTML5-AND-WHATS-NEXT-A-PRESENTATION-AT-HTML5DEVCONF/
  131. 131. http://bradfrostweb.com/blog/post/performance-as-design/
  132. 132. http://bradfrostweb.com/blog/post/performance-as-design/
  133. 133. RESOURCE http://timkadlec.com/2013/01/setting-a-performance-budget/
  134. 134. MAX PAGE WEIGHT: 400K MAX LOAD TIME ON 3G: 4S
  135. 135. RESOURCE http://www.webpagetest.org/
  136. 136. RESOURCE http://mobitest.akamai.com
  137. 137. RESOURCE browserdiet.com
  138. 138. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  139. 139. RESPONSIVE DESIGN != ONE SIZE FITS ALL
  140. 140. PROGRESSIVE ENHANCEMENT
  141. 141. MOBILE-LAST (DEGRADED, SHOE-HORNED, SHORT-SIGHTED, CRAPPY) MOBILE-FIRST (PROGRESSIVELY-ENHANCED, FUTURE-FRIENDLY, AWESOME)
  142. 142. Progressive enhancement isn’t about designing for the lowest common denominator. It’s just about starting there. -Jeremy Keith http://bradfrostweb.com/blog/post/the-spirit-of-the-web-jeremy-keith-at-smashing-conference/
  143. 143. RESOURCE http://modernizr.com/download/
  144. 144. EASY FORM ENHANCEMENTS
  145. 145. THIS IS FOUNDATIONAL WORK.
  146. 146. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  147. 147. ACKNOWLEDGE AND EMBRACE UNPREDICTABILITY
  148. 148. WEB WEB
  149. 149. WEB WEB
  150. 150. WEB WEB
  151. 151. THERE’S NO SUCH THING AS FUTURE-PROOF
  152. 152. BUT WE CAN BE FUTURE-FRIENDLY http://futurefriend.ly/
  153. 153. LASER FOCUS
  154. 154. PEOPLE’S CAPACITY FOR BULLSHIT IS RAPIDLY DIMINISHING.
  155. 155. This is a quote. This is where you put the quote text. -Quote AuthorCONTENT BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHITBULLSHIT
  156. 156. FOCUS.
  157. 157. ORBIT AROUND DATA
  158. 158. INVEST IN YOUR CONTENT. MAKE APIs NOT WAR
  159. 159. UNIVERSAL CONTENT
  160. 160. CONTENT LIKE WATER
  161. 161. COMMAND YOUR FLEET
  162. 162. RESOURCE http://precious-forever.com/2011/05/26/patterns-for-multiscreen-strategies/
  163. 163. WE DON’T KNOW WHAT WILL BE UNDERNEATH CHRISTMAS TREES 2 YEARS FROM NOW...
  164. 164. BUT THAT’S WHAT WE NEED TO DESIGN FOR TODAY. WEB WEB WEB WEB
  165. 165. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  166. 166. ATOMIC DESIGN@brad_frost
  167. 167. PAGES GRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH? http://www.flickr.com/photos/pandora_6666/4927865092/
  168. 168. DESIGN SYSTEMS
  169. 169. WHAT IS AN INTERFACE MADE OF?
  170. 170. http://bradfrost.github.com/this-is-responsive/patterns.html
  171. 171. We’re not designing pages, we’re designing systems of components. -Stephen Hay http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
  172. 172. http://foundation.zurb.com/
  173. 173. getbootstrap.com
  174. 174. THESE THINGS ARE GREAT, BUT...
  175. 175. FRAMEWORK POTENTIAL PITFALLS ๏ One-size-fits-all
  176. 176. FRAMEWORK POTENTIAL PITFALLS ๏ One-size-fits-all ๏ Lookalike issues
  177. 177. FRAMEWORK POTENTIAL PITFALLS ๏ One-size-fits-all ๏ Lookalike issues ๏ Potential for bloat/unneeded stuff
  178. 178. FRAMEWORK POTENTIAL PITFALLS ๏ One-size-fits-all ๏ Lookalike issues ๏ Potential for bloat/unneeded stuff ๏ Might not do everything you need
  179. 179. FRAMEWORK POTENTIAL PITFALLS ๏ One-size-fits-all ๏ Lookalike issues ๏ Potential for bloat/unneeded stuff ๏ Might not do everything you need ๏ Compatibility with existing sites
  180. 180. FRAMEWORK POTENTIAL PITFALLS ๏ One-size-fits-all ๏ Lookalike issues ๏ Potential for bloat/unneeded stuff ๏ Might not do everything you need ๏ Compatibility with existing sites ๏ Subscribe to someone else’s structure, naming, style
  181. 181. Tiny Bootstraps, for every client. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
  182. 182. Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
  183. 183. fivesimplesteps.com/products/front-end-style-guides
  184. 184. BENEFITS OF FRONT-END STYLE GUIDES ๏ Easier to test ๏ Better workflow ๏ Creates a shared vocabulary ๏ Useful reference http://24ways.org/2011/front-end-style-guides/
  185. 185. http://gim.ie/fZyK
  186. 186. http://pea.rs/
  187. 187. http://brettjankord.com/projects/style-guide-boilerplate/
  188. 188. http://patternprimer.adactio.com/
  189. 189. http://malarkey.github.io/Rock-Hammer/
  190. 190. http://barebones.paulrobertlloyd.com
  191. 191. `
  192. 192. http://style.codeforamerica.org/
  193. 193. http://ux.mailchimp.com/patterns/
  194. 194. http://yelp.com/styleguide
  195. 195. http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
  196. 196. I LOVE THESE.
  197. 197. MO’ PATTERNS, MO’ PROBLEMS ๏ Time consuming to create
  198. 198. MO’ PATTERNS, MO’ PROBLEMS ๏ Time consuming to create ๏ Treated as a auxiliary project
  199. 199. MO’ PATTERNS, MO’ PROBLEMS ๏ Time consuming to create ๏ Treated as a auxiliary project ๏ Often too abstract
  200. 200. MO’ PATTERNS, MO’ PROBLEMS ๏ Time consuming to create ๏ Treated as a auxiliary project ๏ Often too abstract ๏ Seen only as a designer/developer tool
  201. 201. MO’ PATTERNS, MO’ PROBLEMS ๏ Time consuming to create ๏ Treated as a auxiliary project ๏ Often too abstract ๏ Seen only as a designer/developer tool ๏ Often created after a project launches
  202. 202. MO’ PATTERNS, MO’ PROBLEMS ๏ Time consuming to create ๏ Treated as a auxiliary project ๏ Often too abstract ๏ Seen only as a designer/developer tool ๏ Often created after a project launches ๏ Often incomplete/only serving present cases
  203. 203. MO’ PATTERNS, MO’ PROBLEMS ๏ Time consuming to create ๏ Treated as a auxiliary project ๏ Often too abstract ๏ Seen only as a designer/developer tool ๏ Often created after a project launches ๏ Often incomplete/only serving present cases ๏ Lacking a clear methodology
  204. 204. ATOMIC DESIGN
  205. 205. H2 + O2 → H20 C + O2 → CO2 CH4 + O2 → CO2 + H2O C8H18 + O2 → CO2 + H20 C2H6 + O2 → CO2 + H2O
  206. 206. H2+O2=H20 H2+O2→H20
  207. 207. http://joshduck.com/periodic-table.html
  208. 208. ENTER KEYWORD SEARCH THE SITE SEARCH
  209. 209. ENTER KEYWORD SEARCH THE SITE SEARCH
  210. 210. You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is. -Mark Boulton http://www.markboulton.co.uk/journal/structure-first-content-always
  211. 211. ABSTRACT CONCRETE
  212. 212. ABSTRACT CONCRETE CREATORS CLIENTS
  213. 213. REFERENCE BUILD REVIEW
  214. 214. ATOMIC DESIGN ๏ Provides a methodology for crafting an effective design system
  215. 215. ATOMIC DESIGN ๏ Provides a methodology for crafting an effective design system ๏ Easily traverse from abstract to concrete
  216. 216. ATOMIC DESIGN ๏ Provides a methodology for crafting an effective design system ๏ Easily traverse from abstract to concrete ๏ Promotes consistency and cohesion
  217. 217. ATOMIC DESIGN ๏ Provides a methodology for crafting an effective design system ๏ Easily traverse from abstract to concrete ๏ Promotes consistency and cohesion ๏ Assembles rather than deconstructs
  218. 218. The idea of designing components like this, out of context and without layout, might sound strange— particularly if you’ve been used to designing Web pages the traditional way. But we’ve been abstracting design ideas like this for the longest time, for example in our use of mood boards and even the cropped designs we find on sites like Dribbble. -Andy Clarke http://stuffandnonsense.co.uk/blog/about/an-extract-from-designing-atoms-and-elements
  219. 219. DAVE OLSEN@dmolsen
  220. 220. WHAT PATTERN LAB IS ๏ A design system builder
  221. 221. WHAT PATTERN LAB IS ๏ A design system builder ๏ A comprehensive custom component library
  222. 222. WHAT PATTERN LAB IS ๏ A design system builder ๏ A comprehensive custom component library ๏ A pattern starter kit
  223. 223. WHAT PATTERN LAB IS ๏ A design system builder ๏ A comprehensive custom component library ๏ A pattern starter kit ๏ A practical viewport resizer
  224. 224. WHAT PATTERN LAB IS ๏ A design system builder ๏ A comprehensive custom component library ๏ A pattern starter kit ๏ A practical viewport resizer ๏ An annotation tool
  225. 225. WHAT PATTERN LAB ISN’T ๏ A UI framework
  226. 226. WHAT PATTERN LAB ISN’T ๏ A UI framework ๏ Language, library, or style dependent
  227. 227. WHAT PATTERN LAB ISN’T ๏ A UI framework ๏ Language, library, or style dependent ๏ Incredibly rigid
  228. 228. WHAT PATTERN LAB ISN’T ๏ A UI framework ๏ Language, library, or style dependent ๏ Incredibly rigid ๏ “just” a pattern library, but also not a production-ready static site generator
  229. 229. SITE BUILDER
  230. 230. MOLECULE GUTS code block! <div class="block block-inset"> <div class="b-thumb"> {{> atoms-img-landscape-4x3 }} </div> <div class="b-text"> <h2 class=“headline"> {{ headline.short }} </h2> </div> </div> !
  231. 231. BASIC INCLUDE code block! ! ! ! ! ! ! ! {{> molecules-block-inset }} !
  232. 232. ORGANISM GUTS code block! ! ! ! ! ! <header class="header" role="banner"> {{> atoms-header-ad }} {{> atoms-logo }} {{> molecules-primary-nav }} {{> molecules-search }} {{> molecules-social-nav }} </header>
  233. 233. BASIC INCLUDE code block! ! ! ! ! {{> organisms-header }}
  234. 234. TEMPLATE GUTS code block{{> organisms-header }} <div role="main"> <div class="l-two-col"> <div class="l-main"> {{> organisms-article-body }} {{> molecules-social-share }} {{> organisms-comments }} </div><!--end l-main--> ! <div class="l-sidebar"> {{> organisms-related-posts }} {{> organisms-recent-tweets }} </div><!--end l-sidebar--> </div><!--end l-two-col--> </div><!--End role=main--> {{> organisms-footer }} !
  235. 235. CONTENT STRUCTURE ACTUAL CONTENT
  236. 236. TEMPLATE GUTS code block{{# hero }} {{> molecules-block-hero }} {{/ hero}} ! <div class="g g-3up"> {{# touts}} <div class="gi"> {{> molecules-inset-block }} </div> {{/ touts}} </div><!--end 3up-->
  237. 237. PIPING IN REAL CONTENT WITH JSON code block"hero" : [ { "img": { "landscape-16x9": { "src": "images/sample/mountains.jpg", "alt": "Mountains" } }, "headline" : { "medium" : "Top 10 mountin ranges for hiking" } } ], "touts" : [ { "img": { "landscape-4x3": { "src": "../../images/sample/climber.jpg", "alt": "Climber" } }, "headline" : {
  238. 238. VIEWER
  239. 239. 320PX.
  240. 240. 320PX. 480PX.
  241. 241. 320PX. 480PX. 768PX.
  242. 242. 320PX. 480PX. 768PX. 1024PX.
  243. 243. 320PX. 480PX. 768PX. 1024PX. THE FOLD.
  244. 244. 320PX. 480PX. 768PX. 1024PX. THE FOLD. OH GOD THE FOLD.
  245. 245. ANNOTATIONS
  246. 246. code block{ "el": ".header", "title": "Header", "title": "The header or masthead is a global element…“ }, { "el": ".nav", "title": "Primary Navigation", "title": "The navigation is collapsed on small screens and is triggered via the .nav-trigger element" }, { "el": “.search-form", "title": "Search Form", "title": "The search form uses the input type=search to pull up the appropriate input type on virtual keyboards" }, { "el": “.logo", "title": "Logo", "title": "The logo is an SVG graphic with a PNG fallback" }, ANNOTATIONS WITH JSON
  247. 247. LINEAGE
  248. 248. PATTERN STATUS
  249. 249. A BUNCH OF OTHER STUFF ๏ Code view
  250. 250. A BUNCH OF OTHER STUFF ๏ Code view ๏ Auto-refresh
  251. 251. A BUNCH OF OTHER STUFF ๏ Code view ๏ Auto-refresh ๏ Page follow
  252. 252. A BUNCH OF OTHER STUFF ๏ Code view ๏ Auto-refresh ๏ Page follow ๏ Future: plugins
  253. 253. WHY PATTERN LAB ๏ Serves as a hub for the entire design process
  254. 254. WHY PATTERN LAB ๏ Serves as a hub for the entire design process ๏ Can easily traverse from abstract to concrete
  255. 255. WHY PATTERN LAB ๏ Serves as a hub for the entire design process ๏ Can easily traverse from abstract to concrete ๏ Write and name HTML/CSS/JS as you please.
  256. 256. WHY PATTERN LAB ๏ Serves as a hub for the entire design process ๏ Can easily traverse from abstract to concrete ๏ Write and name HTML/CSS/JS as you please. ๏ Start with a system first rather than deconstruct later
  257. 257. WHY PATTERN LAB ๏ Serves as a hub for the entire design process ๏ Can easily traverse from abstract to concrete ๏ Write and name HTML/CSS/JS as you please. ๏ Start with a system first rather than deconstruct later ๏ Encourages flexibility
  258. 258. WHY PATTERN LAB ๏ Serves as a hub for the entire design process ๏ Can easily traverse from abstract to concrete ๏ Write and name HTML/CSS/JS as you please. ๏ Start with a system first rather than deconstruct later ๏ Encourages flexibility ๏ Extensible and scalable
  259. 259. WHY PATTERN LAB ๏ Serves as a hub for the entire design process ๏ Can easily traverse from abstract to concrete ๏ Write and name HTML/CSS/JS as you please. ๏ Start with a system first rather than deconstruct later ๏ Encourages flexibility ๏ Extensible and scalable ๏ Document your interface
  260. 260. WHY PATTERN LAB ๏ Serves as a hub for the entire design process ๏ Can easily traverse from abstract to concrete ๏ Write and name HTML/CSS/JS as you please. ๏ Start with a system first rather than deconstruct later ๏ Encourages flexibility ๏ Extensible and scalable ๏ Document your interface ๏ See pattern lineage
  261. 261. http://patternlab.io
  262. 262. IF ANYTHING GOES WRONG WITH PATTERN LAB, BLAME THIS GUY.
  263. 263. PROCESS & WORKFLOW
  264. 264. SELL
  265. 265. RESOURCE http://bradfrostweb.com/blog/web/how-much-does-a-responsive-web-design-cost/
  266. 266. $PEAK THE RIGHT LANGUAGE
  267. 267. RESOURCE http://electricpulp.com/notes/you-like-apples/
  268. 268. RESOURCE http://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/
  269. 269. RESOURCE http://bradfrostweb.com/blog/post/responsive-design-to-the-rescue-how-homage-grew-mobile-revenue-by-258/
  270. 270. SET EXPECTATIONS
  271. 271. http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
  272. 272. As an industry, we sell websites like paintings. Instead, we should be selling beautiful and easy access to content, agnostic of device, screen size, or context. -Dan Mall http://danielmall.com/articles/the-post-psd-era/
  273. 273. B-SIDE THIS IS NOT THE WEB.
  274. 274. WEB WEB
  275. 275. COMPLEX NAVIGATIONDEATH TO THE WATERFALL
  276. 276. Let’s change the phrase “designing in the browser” to “deciding in the browser” -Dan Mall http://the-pastry-box-project.net/dan-mall/2012-september-12/
  277. 277. GATHER
  278. 278. http://stylifyme.com/
  279. 279. http://bradfrostweb.com/blog/post/interface-inventory/
  280. 280. http://blog.easy-designs.net/archives/evernote-for-interface-inventories/
  281. 281. ๏ Document your interface ๏ Promote consistency ๏ Establish which elements will be challenging to translate into a responsive environment ๏ Lay the groundwork for a future style guide/pattern library INTERFACE INVENTORY
  282. 282. ESTABLISH DIRECTION
  283. 283. RESOURCE http://styletil.es/
  284. 284. ROLL UP OUR SLEEVES
  285. 285. http://trentwalton.com/2011/07/14/content-choreography/
  286. 286. CONTENT STRUCTURE ACTUAL CONTENT
  287. 287. http://www.flickr.com/photos/15609463@N03/7854373494/
  288. 288. AGILE RESOURCE http://cognition.happycog.com/article/diy-process
  289. 289. AGILE RESOURCE http://cognition.happycog.com/article/diy-process
  290. 290. OUR WEBSITES ARE FLUID OUR PROCESSES NEED TO MATCH
  291. 291. COLLABORATION AND COMMUNICATION TRUMP PROCESS
  292. 292. COLLABORATION AND COMMUNICATION TRUMP DELIVERABLES
  293. 293. “I’M CHEVY CHASE... AND YOU’RE NOT.”
  294. 294. d RESOURCE http://www.implementingresponsivedesign.com/
  295. 295. ` RESOURCE http://www.peachpit.com/store/responsive-design-workflow-9780321887863
  296. 296. PLANNING ADAPTIVEINTERFACES Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
  297. 297. © Brad Frost
  298. 298. 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
  299. 299. 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.“
  300. 300. 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. “
  301. 301. 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%. “
  302. 302. In the second quarter of 2008 we detected 71 different screen resolutions among our visitors. In the first quarter of 2012 we detected “ 830
  303. 303. © Brad Frost
  304. 304. Perception
  305. 305. Perception
  306. 306. Perception
  307. 307. Perception
  308. 308. There is no WebKit on Mobile — Peter-Paul Koch“
  309. 309. WebKit vs. Acid3 http://www.quirksmode.org/webkit_mobile.html
  310. 310. Surely there’s platform consistency!?! — Any sane individual “
  311. 311. There is no Android — Stephanie Rieger “
  312. 312. http://yfrog.com/z/ob5kndj
  313. 313. But Android is NOT unique in this
  314. 314. The culprits? SCREEN SIZE
  315. 315. The culprits? EMBEDDED VIEWS
  316. 316. The culprits? BROWSER CHROME
  317. 317. The culprits? ZOOM LEVEL
  318. 318. The culprits? ZOOM LEVEL (Ok, this one’s on Android)
  319. 319. Smartphones have reached 56% penetration in the US… “
  320. 320. …but that’s concentrated in 30% of households “ http://www.chetansharma.com/usmarketupdateq12013.htm
  321. 321. U.S. Smartphone penetration #s released in February http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/ < $30k 47% $30-50k 53% $50-75k 61% >$75k 81%
  322. 322. U.S. Smartphone penetration #s released in February http://www.pewinternet.org/2014/02/27/part-1-how-the-internet-has-woven-itself-into-american-life/ $30k = Average US income 2013 < $30k 47% $30-50k 53% $50-75k 61% >$75k 81%
  323. 323. < $30k 47% $30-50k 53% $50-75k 61% >$75k 81% 0 30000 60000 90000 120000 <30k $30-50k $50-70k >$70k Population(inthousands) 8,767 U.S. Smartphone vs. Income distribution
  324. 324. < $30k 47% $30-50k 53% $50-75k 61% >$75k 81% 0 30000 60000 90000 120000 <30k $30-50k $50-70k >$70k Population(inthousands) 8,767 U.S. Smartphone vs. Income distribution Opportunity!
  325. 325. The reality
  326. 326. © Brad Frost
  327. 327. We DON’T know
  328. 328. We DON’T know
  329. 329. Even when we think we know, WE ARE PROBABLY WRONG
  330. 330. So how do we COPE?
  331. 331. Progressive Enhancement
  332. 332. Technological restrictions
  333. 333. BASIC ADVANCED UserExperience Browser Capabilities
  334. 334. BASIC ADVANCED UserExperience Browser Capabilities Content
  335. 335. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics
  336. 336. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics Design
  337. 337. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics Design Interactivity
  338. 338. BASIC ADVANCED UserExperience Browser Capabilities Content Semantics Design Interactivity Accessibility
  339. 339. BASIC ADVANCED UserExperience Browser Capabilities Text & HTTP HTML CSS JavaScript ¶ <> {} ↖ ARIA
  340. 340. HTML
  341. 341. HTML HTML5 Microformats HTML4
  342. 342. MCMLXXVII(that’s 1977)
  343. 343. HTML CSS
  344. 344. fault tolerance n. a system’s ability to continue to operate when it encounters and unexpected error.
  345. 345. Browsers ignore what they don’t understand
  346. 346. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
  347. 347. Graceful Degradation
  348. 348. Modern Browsers Older Browsers
  349. 349. Modern Browsers Older Browsers
  350. 350. a dynamic web page can never break, it can only become a web page.
  351. 351. ๏Bugs ๏Browser Add-ons ๏Overzealous Firewalls ๏Underpowered devices ๏Page is still loading
  352. 352. SPoF
  353. 353. Graceful Degradation Progressive Enhancement
  354. 354. Content
  355. 355. Graceful Degradation Progressive Enhancement
  356. 356. on Progressive Enhancement Responsive Web Design Mobile First
  357. 357. Mobile First Responsive Web Design :-)
  358. 358. PLANNING ADAPTIVE INTERFACES Lightboxes
  359. 359. PLANNING ADAPTIVE INTERFACES Lightboxes
  360. 360. PLANNING ADAPTIVE INTERFACES Interface experience Map No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
  361. 361. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No lightbox Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE Load
  362. 362. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No lightbox Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE Load
  363. 363. PLANNING ADAPTIVE INTERFACES IxMap No Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE JS? No No lightboxLoad
  364. 364. PLANNING ADAPTIVE INTERFACES IxMap No Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE JS? No No lightboxLoad
  365. 365. PLANNING ADAPTIVE INTERFACES IxMap Yes Lightbox Create link Make image clickable JS? No No lightboxLoad No Yes Verify browser width condition LIVE
  366. 366. PLANNING ADAPTIVE INTERFACES IxMap Yes Lightbox Create link Make image clickable JS? No No lightboxLoad No Yes Verify browser width condition LIVE
  367. 367. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
  368. 368. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No lightboxLoad Yes Yes Lightbox Create link Make image clickable Verify browser width condition LIVE
  369. 369. PLANNING ADAPTIVE INTERFACES 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>
  370. 370. PLANNING ADAPTIVE INTERFACES 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>
  371. 371. PLANNING ADAPTIVE INTERFACES Lightboxes
  372. 372. PLANNING ADAPTIVE INTERFACES Thumbnails
  373. 373. PLANNING ADAPTIVE INTERFACES Thumbnails
  374. 374. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  375. 375. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No image Yes Yes Image Adjust markup Add custom CSS Verify browser width condition Load
  376. 376. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No image Yes Yes Image Adjust markup Add custom CSS Verify browser width condition Load
  377. 377. PLANNING ADAPTIVE INTERFACES IxMap No Yes Yes Image Adjust markup Add custom CSS Verify browser width condition JS? No No imageLoad
  378. 378. PLANNING ADAPTIVE INTERFACES IxMap No Yes Yes Image Adjust markup Add custom CSS Verify browser width condition JS? No No imageLoad
  379. 379. PLANNING ADAPTIVE INTERFACES IxMap Yes Image Adjust markup Add custom CSS No JS? No No imageLoad Yes Verify browser width condition
  380. 380. PLANNING ADAPTIVE INTERFACES IxMap Yes Image Adjust markup Add custom CSS No JS? No No imageLoad Yes Verify browser width condition
  381. 381. PLANNING ADAPTIVE INTERFACES IxMap No No No imageJS?Load Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  382. 382. PLANNING ADAPTIVE INTERFACES IxMap No No No imageJS?Load Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  383. 383. PLANNING ADAPTIVE INTERFACES IxMap No No No imageJS?Load Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  384. 384. PLANNING ADAPTIVE INTERFACES IxMap No No No imageJS?Load Yes Yes Image Adjust markup Add custom CSS Verify browser width condition
  385. 385. PLANNING ADAPTIVE INTERFACES There is no image… <p class="entry-image" data-image-src="/i/sample.jpg"></p>
  386. 386. PLANNING ADAPTIVE INTERFACES Until there is <p class="entry-image" data-image-src="/i/sample.jpg"></p> <p class="entry-image" data-image-src="/i/sample.jpg" data-has-image="true"> <img alt="" src="/i/sample.jpg" alt=””/> </p>
  387. 387. PLANNING ADAPTIVE INTERFACES CSS at rest [data-image-src] { display: none; }
  388. 388. PLANNING ADAPTIVE INTERFACES CSS at play [data-image-src][data-image-loaded] { display: block; }
  389. 389. PLANNING ADAPTIVE INTERFACES JS Watcher window.watchResize = function(callback) { var resizing; function done() { clearTimeout( resizing ); resizing = null; callback(); } window.onresize = function(){ if ( resizing ) { clearTimeout( resizing ); resizing = null; } resizing = setTimeout( done, 50 ); }; callback(); };
  390. 390. PLANNING ADAPTIVE INTERFACES JS Watcher var browser_width = 0; window.watchResize(function(){ browser_width = window.innerWidth || document.body.offsetWidth; });
  391. 391. PLANNING ADAPTIVE INTERFACES JS Watcher window.watchResize(function(){ var threshold = 400, image = document.createElement('img'), paragraphs = document.getElementsByTagName('p'), i = paragraphs.length, p, loaded, src, img; if ( browser_width >= threshold ) { image.setAttribute('alt',''); while ( i-- ) { p = paragraphs[i]; src = p.getAttribute('data-image-src'); loaded = p.getAttribute('data-image-loaded'); if ( src != null && loaded == null ) { img = image.cloneNode(true); img.setAttribute('src',src); p.appendChild( img ); p.setAttribute('data-image-loaded',''); } } image = paragraphs = p = img = null; } });
  392. 392. PLANNING ADAPTIVE INTERFACES IxMap No JS? No No imageLoad Yes Yes Image Adjust markup Add custom CSS Verify browser width condition LIVE
  393. 393. PLANNING ADAPTIVE INTERFACES Smart CSS [data-image-src][data-image-loaded] { display: block; }
  394. 394. PLANNING ADAPTIVE INTERFACES Smart CSS [data-image-src][data-image-loaded] { display: block; } @media only screen and (min-width:400px) { [data-img-src][data-image-loaded] { display: block; } }
  395. 395. PLANNING ADAPTIVE INTERFACES Thumbnails
  396. 396. http://is.gd/lazyloading_demo
  397. 397. http://is.gd/lazyloading_demo
  398. 398. http://is.gd/lazyloading_demo
  399. 399. http://is.gd/lazyloading_demo
  400. 400. PLANNING ADAPTIVE INTERFACES NO!!!! #reviews { display: none; } @media only screen and (min-width:50em) { #reviews { display: block; } }
  401. 401. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action
  402. 402. PLANNING ADAPTIVE INTERFACES IxMap JS? No Links Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action Load
  403. 403. PLANNING ADAPTIVE INTERFACES IxMap JS? No Links Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action Load
  404. 404. PLANNING ADAPTIVE INTERFACES IxMap Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action JS? No LinksLoad
  405. 405. PLANNING ADAPTIVE INTERFACES IxMap Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE Click No Hold for user action JS? No LinksLoad
  406. 406. PLANNING ADAPTIVE INTERFACES IxMap Yes Reviews Lazy Load the reviews Click Hold for user action JS? No LinksLoad Yes Verify browser width condition LIVE No
  407. 407. PLANNING ADAPTIVE INTERFACES IxMap Yes Reviews Lazy Load the reviews Click Hold for user action JS? No LinksLoad Yes Verify browser width condition LIVE No
  408. 408. PLANNING ADAPTIVE INTERFACES IxMap Click JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
  409. 409. PLANNING ADAPTIVE INTERFACES IxMap Click JS? No LinksLoad Yes Yes Reviews Lazy Load the reviews Verify browser width condition LIVE No Hold for user action
  410. 410. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action Click Yes Reviews Lazy Load the reviews
  411. 411. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinksLoad Yes Verify browser width condition LIVE No Hold for user action Click Yes Reviews Lazy Load the reviews
  412. 412. PLANNING ADAPTIVE INTERFACES Lazy Loading <section class="aux reviews" id="reviews"> <header id="tab-reviews"> <a href="reviews.html" class="disabled">…</a> </header> </section>
  413. 413. PLANNING ADAPTIVE INTERFACES Lazy Loading <section class="aux reviews loaded" id="reviews"> <header id="tab-reviews"> <a href="reviews.html" class="disabled open">…</a> </header> <div role="tabpanel"> <div id="p-reviews" aria-labeledby="tab-reviews"> <ol class="reviews-list"> <li> <img src="images/avatar.png" alt="Commenter Name"> <div class="review-meta"> <h3>Awesome shirt!</h3> <a href="#"><time datetime="2010-01-20" pubdate="">11/12/2011</time></a> By Bruce Bosco </div> <div class="review-content"> <p>This shirt looks awesome and is really comfortable to wear. It did shrink quite a lot when washed, but that could have just been how I ran it. All in all, it's my favourite shirt, and I love wearing it.</p> </div> </li> <!-- … --> </ol> </div> </div> </section>
  414. 414. http://is.gd/lazyloading_demo
  415. 415. PLANNING ADAPTIVE INTERFACES Tabbed Interface
  416. 416. PLANNING ADAPTIVE INTERFACES Traditional approach <h1>Pumpkin Pie</h1> <div class="container"> <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 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> <!-- ... --> </div>
  417. 417. PLANNING ADAPTIVE INTERFACES 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>
  418. 418. PLANNING ADAPTIVE INTERFACES 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>
  419. 419. PLANNING ADAPTIVE INTERFACES No JS, basic CSS
  420. 420. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard)
  421. 421. PLANNING ADAPTIVE INTERFACES IxMap JS? No Linear Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard) Load
  422. 422. PLANNING ADAPTIVE INTERFACES IxMap JS? No Linear Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard) Load
  423. 423. PLANNING ADAPTIVE INTERFACES IxMap Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard) JS? No LinearLoad
  424. 424. PLANNING ADAPTIVE INTERFACES IxMap Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard) JS? No LinearLoad
  425. 425. PLANNING ADAPTIVE INTERFACES IxMap Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard) JS? No LinearLoad
  426. 426. PLANNING ADAPTIVE INTERFACES IxMap Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard) JS? No LinearLoad
  427. 427. PLANNING ADAPTIVE INTERFACES Linear HTML <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>
  428. 428. PLANNING ADAPTIVE INTERFACES Tabbed <h1>Pumpkin Pie</h1> <div class="tabbed-interface TabInterface-enabled"> <ul class="tabs"> <li><a href="#folder-1">Overview</a></li> <li><a href="#folder-2">Ingredients</a></li> <li><a href="#folder-3">Directions</a></li> <li><a href="#folder-4">Nutrition</a></li> </ul> <section id=”folder-1”> <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> <!-- ... --> </div>
  429. 429. PLANNING ADAPTIVE INTERFACES Tabbed <h1>Pumpkin Pie</h1> <div class="tabbed-interface TabInterface-enabled"> <ul class="tabs"> <li><a href="#folder-1">Overview</a></li> <li><a href="#folder-2">Ingredients</a></li> <li><a href="#folder-3">Directions</a></li> <li><a href="#folder-4">Nutrition</a></li> </ul> <section id=”folder-1”> <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> <!-- ... --> </div>
  430. 430. PLANNING ADAPTIVE INTERFACES IxMap JS? No LinearLoad Yes Tabs Split content into sections Make tabs Assign event handlers (mouse & keyboard) Yes Verify space for tabs LIVE No Accordion Build accordion
  431. 431. PLANNING ADAPTIVE INTERFACES JS?Load IxMap Yes Tabs Yes Verify space for tabs LIVE No Linear No Accordion Build accordion <?> Yes Native Insert details & summary Support details & summary?
  432. 432. PLANNING ADAPTIVE INTERFACES role="tablist" 134 Adding ARIA
  433. 433. PLANNING ADAPTIVE INTERFACES role="tab" aria-selected="true" aria-controls="folder-1" Adding ARIA
  434. 434. PLANNING ADAPTIVE INTERFACES role="tab" aria-selected="false" aria-controls="folder-4" Adding ARIA
  435. 435. PLANNING ADAPTIVE INTERFACES role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab" Adding ARIA
  436. 436. PLANNING ADAPTIVE INTERFACES Result!

×