Successfully reported this slideshow.

Beyond Squishy: The Principles of Adaptive Design

159

Share

Loading in …3
×
1 of 249
1 of 249

Beyond Squishy: The Principles of Adaptive Design

159

Share

Download to read offline

Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!"

While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.

Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!"

While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Beyond Squishy: The Principles of Adaptive Design

  1. d BEYONDOFSQUISHY THE PRINCIPLES ADAPTIVE DESIGN #ADAPTIVE
  2. GENERIC TM
  3. NEW AND SHINY
  4. They argued about the term “AJAX” until they were blue in the face. But in the end, no one would argue that “AJAX” wasn’t a good thing for our industry. -Jeff Croft http://jeffcroft.com/blog/2010/aug/02/term-html5/
  5. RESPONSIVE WEB DESIGN
  6. http://alistapart.com/article/responsive-web-design RCE OU RES
  7. http://www.abookapart.com/products/responsive-web-design RCE OU RES
  8. RESPONSIVE WEB DESIGN: THE MOVIE WINTER 2013
  9. FLUID GRIDS FLEXIBLE MEDIA MEDIA QUERIES
  10. RESPONSIVE WEB DESIGN RESI IMPR ZE H ESS YOUR FR ERE! IEND S!
  11. RAISED EYEBROW IS RAISED
  12. THIS IS JUST THE TIP OF THE ICEBERG.
  13. THIS IS JUST THE TIP OF THE ICEBERG.
  14. THIS IS JUST THE TIP OF THE ICEBERG.
  15. RWD
  16. PRINCIPLES OF ADAPTIVE DESIGN
  17. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  18. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  19. B-SIDE THIS IS NOT THE WEB.
  20. WEB WEB
  21. Diversity is not a bug, it’s an opportunity. -Stephanie Rieger http://stephanierieger.com/diversity-is-not-a-bug/
  22. “...Alternately, we suggest checking out the site from your tablet if you have one...”
  23. Mobile users will do anything and everything desktop users will do, provided it’s presented in a usable way.
  24. ONE WEB.
  25. ONE WEB. THEMATIC CONSISTENCY.
  26. ONE WEB. THEMATIC CONSISTENCY. GIVE PEOPLE WHAT THEY WANT.
  27. CONTENT PARITY
  28. CONTENT PARITY TRUMPS ALL?
  29. BUT WHAT ABOUT MOBILE CONTEXT?
  30. WHAT EXACTLY IS “MOBILE CONTEXT”?
  31. “ON THE GO” IS STILL TRUE...
  32. BUT LOTS OF OTHER USE CASES EXIST TOO
  33. 76% ACCESS MOBILE WHILE WAITING IN LINE http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  34. 86% ACCESS MOBILE DEVICES WHILE WATCHING TV http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  35. 80% ACCESS MOBILE DURING GENERAL DOWNTIME http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  36. 69% ACCESS MOBILE IN RETAIL STORES http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  37. 39% WHILE #POOPIN http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  38. QUANTITATIVE QUALITATIVE ๏ Screen size ๏ User goals ๏ Connectivity ๏ User environment ๏ Device capabilities ๏ User attention ๏ Processing power ๏ User capabilities ๏ Input methods
  39. 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/
  40. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  41. 320PX.
  42. 320PX. 480PX.
  43. 320PX. 480PX. 768PX.
  44. 320PX. 480PX. 768PX. 1024PX.
  45. 320PX. 480PX. 768PX. 1024PX. THE FOLD.
  46. 320PX. 480PX. 768PX. 1024PX. THE FOLD. OH GOD THE FOLD.
  47. scha·den·freu·de ˈshä-dən-ˌfrȯi-də n. enjoyment obtained from the troubles of others
  48. 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
  49. http://static.lukew.com/unified_device_design.png E RC OU RES
  50. http://bradfrostweb.com/demo/ish/ E RC OU RES
  51. http://bradfrostweb.com/demo/ish/ E RC OU RES
  52. EMBRACE THE SQUISHINESS. TM
  53. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  54. 71% MOBILE USERS EXPECTING MOBILE SITES TO LOAD AS FAST IF NOT FASTER THAN DESKTOP SITES http://www.compuware.com/d/release/592528/new-study-reveals-the-mobile-web-disappoints-global-consumers
  55. 74% MOBILE VISITORS WHO WILL ABANDON A SITE IF IT TAKES LONGER THAN 5 SECONDS TO LOAD http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
  56. YOU HAVE 5 SECONDS OF SOMEONE’S TIME.
  57. 1.3MB AVERAGE PAGE SIZE http://httparchive.org/
  58. 86% RESPONSIVE WEBSITES WHOSE SMALL SCREEN VIEW WEIGHS AS MUCH AS THE LARGE SCREEN VIEW http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/
  59. REQUESTS: 136 PAGE WEIGHT: 5.9MB LOAD TIME: 2M 46S
  60. http://www.flickr.com/photos/philhawksworth/7562460356/sizes/l/in/photostream/
  61. REQUESTS: 388 PAGE WEIGHT: 24.29MB LOAD TIME: 2M 01S http://www.flickr.com/photos/philhawksworth/7562460356/sizes/l/in/photostream/
  62. 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/
  63. http://bradfrostweb.com/blog/post/performance-as-design/
  64. http://bradfrostweb.com/blog/post/performance-as-design/
  65. http://mobitest.akamai.com E RC OU RES
  66. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  67. RESPONSIVE DESIGN != ONE SIZE FITS ALL
  68. PROGRESSIVE ENHANCEMENT
  69. MOBILE-LAST (DEGRADED, SHOE-HORNED, SHORT-SIGHTED, CRAPPY) MOBILE-FIRST (PROGRESSIVELY-ENHANCED, FUTURE-FRIENDLY, AWESOME)
  70. 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/
  71. A BRIEF WORD ABOUT MOBILE WEB APPS
  72. It’s 2013, nobody has Javascript disabled! -Plenty of developers
  73. SUPPORT IS NOT BINARY
  74. JAVASCRIPT CAN FAIL.
  75. JAVASCRIPT CAN WILL FAIL.
  76. https://twitter.com/zachleat/status/151748039072157696
  77. And the menu failed. Never even opened. Suddenly, the site was without navigation...at all. -Stephanie Rieger HTTP://STEPHANIERIEGER.COM/A-PLEA-FOR-PROGRESSIVE-ENHANCEMENT/
  78. WORKED DIDN’T WORK ๏ Galaxy Nexus ๏ iPhone 4 (iOS 4.3) ๏ iPhone 4 (iOS 5) ๏ iPod Touch ๏ Nexus One ๏ Nokia Lumia 800 (WP7) ๏ HTC ChaCha (Android 2.3) ๏ HTC WildFire (Android 2.3) ๏ Huiwei Blaze (Android 2.3.5) ๏ Galaxy SII (Android 2.2.3) ๏ Galaxy Mini (Android 2.2.1) ๏ BlackBerry Torch (OS7) ๏ BlackBerry 9300 (OS6) ๏ Galaxy Tab 7” (Android 2.3) ๏ Galaxy Tab 10” (Android 2.3) ๏ Amazon Kindle
  79. Not everything on the Web needs to be a new Facebook, Google Reader or Google Mail. -Christian Heilmann HTTP://CHRISTIANHEILMANN.COM/2011/12/28/ON-SINGLE-PAGE-APPS/
  80. The bottom line is that a client-side architecture leads to slower performance because most of the code is being executed on our users' machines rather than our own. -Twitter Engineering Team http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html
  81. THIS IS FOUNDATIONAL WORK.
  82. THERE IS A DIFFERENCE BETWEEN SUPPORT AND OPTIMIZATION.
  83. MAN, THIS BLU-RAY QUALITY SUCKS.
  84. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  85. ACKNOWLEDGE AND EMBRACE UNPREDICTABILITY
  86. WEB WEB
  87. WEB WEB
  88. WEB WEB
  89. THERE’S NO SUCH THING AS FUTURE-PROOF
  90. BUT WE CAN BE FUTURE-FRIENDLY http://futurefriend.ly/
  91. PEOPLE’S CAPACITY FOR BULLSHIT IS RAPIDLY DIMINISHING.
  92. BULLSHIT BULLSHIT BULLSHIT This is a quote. This is where you put the quote text. BULLSHIT BULLSHIT -Quote Author BULLSHIT CONTENT BULLSHIT BULLSHIT BULLSHIT
  93. This is a quote. This is where you put the quote text. -Quote Author
  94. This is a quote. This is where you put the quote text. -Quote Author
  95. This is a quote. This is where you put the quote text. -Quote Author
  96. BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT CONTENT This is a quote. This is where you BULLSHIT BULLSHIT BULLSHIT put the quote text. BULLSHIT BULLSHIT -Quote Author BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT
  97. FOCUS.
  98. INVEST IN YOUR CONTENT. MAKE APIs NOT WAR
  99. CONTENT LIKE WATER
  100. GET YOUR CONTENT READY TO GO ANYWHERE BECAUSE IT’S GOING TO GO EVERYWHERE
  101. WE DON’T KNOW WHAT WILL BE UNDERNEATH CHRISTMAS TREES 2 YEARS FROM NOW...
  102. BUT THAT’S WHAT WE NEED TO DESIGN FOR TODAY. WEB WEB WEB WEB
  103. When it comes to the Web, the more backward-compatible you are, the more forward-compatible you’re likely to be. -Josh Clark http://globalmoxie.com/blog/making-of-people-mobile.shtml
  104. TODAY’S LANDSCAPE IS BOOTCAMP FOR TOMORROW’S INSANITY.
  105. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
  106. DEMO http://bit.ly/mobilefirstrwd TUTORIAL http://bit.ly/rwdtutorial WALKTHROUGH http://bit.ly/rwdanatomy
  107. EXHIBIT A: MASTHEAD
  108. GET TO THE MEAT.
  109. EXHIBIT B: LOGO
  110. Make the logo bigger! -Every Client Ever
  111. http://blog.netvlies.nl/design-interactie/retina-revolution/ RCE OU RES
  112. EXHIBIT C: NAVIGATION
  113. NAVIGATION SHOULD BE LIKE A GOOD FRIEND... THERE WHEN YOU NEED THEM, BUT COOL ENOUGH TO GIVE YOU YOUR SPACE
  114. EXHIBIT D: SEARCH FORM
  115. EXHIBIT E: PRODUCT INFO
  116. 79% PEOPLE USING THEIR SMARTPHONES IN STORES http://pewinternet.org/Reports/2012/Smartphone-Update-2012/Findings.aspx
  117. EXHIBIT F: PRODUCT IMAGES
  118. CAROUSEL BEST PRACTICES
  119. CAROUSEL BEST PRACTICES ๏ Make sure you actually need one
  120. CAROUSEL BEST PRACTICES ๏ Make sure you actually need one ๏ Cycle through like items
  121. CAROUSEL BEST PRACTICES ๏ Make sure you actually need one ๏ Cycle through like items ๏ Only load what you need
  122. CAROUSEL BEST PRACTICES ๏ Make sure you actually need one ๏ Cycle through like items ๏ Only load what you need ๏ Be explicit with navigation
  123. INSUFFICIENT
  124. CAROUSEL BEST PRACTICES ๏ Make sure you actually need one ๏ Cycle through like items ๏ Only load what you need ๏ Be explicit with navigation ๏ Give hints to other content ๏ Treat touch as an enhancement
  125. EXHIBIT G: PRODUCT FORM
  126. EXHIBIT H: SHARE BUTTONS
  127. To load the Facebook, Twitter and Google social media buttons takes 19 requests and 246.7KB in bandwidth. -Zurb https://developers.facebook.com/blog/post/2012/02/27/helping-improve-the-mobile-web/
  128. http://filamentgroup.com/lab/socialcount/ E RC OU RES
  129. EXHIBIT I: FIND NEARBY
  130. OLD CONTEXT CAPABLE BROWSER FOCUSED LARGE SCREEN STATIONARY EFFICIENT INPUT FAST CONNECTION COMFORTABLE POWERFUL CPU
  131. NEW CONTEXT
  132. http://karenmcgrane.com/2012/07/10/mobile-local/ E RC OU RES
  133. ASK QUESTIONS.
  134. EXHIBIT J: AUXILIARY CONTENT
  135. 86% RESPONSIVE WEBSITES WHOSE SMALL SCREEN VIEW WEIGHS AS MUCH AS THE LARGE SCREEN VIEW http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/
  136. AGGRESSIVE ENHANCEMENT
  137. NOT THE THING NOT THE THING THE THING NOT THE THING NOT THE THING NOT THE THING
  138. NOT THE THING NOT THE THING THE THING NOT THE THING NOT THE THING LINK TO FRAGMENT LINK TO FRAGMENT LINK TO FRAGMENT NOT THE THING LINK TO FRAGMENT LINK TO FRAGMENT
  139. SCANNABILITY PERFORMANCE
  140. SCROLLING
  141. WHEN WE SCROLL ON MOBILE GOING BACK THROUGH DEEP DIVE IN TIME GROUPED ITEMS INTO CONTENT
  142. WHEN WE SCROLL ON MOBILE GOING BACK IN TIME
  143. WHEN WE SCROLL ON MOBILE THROUGH GROUPED ITEMS
  144. WHEN WE SCROLL ON MOBILE DEEP DIVE INTO CONTENT
  145. ALWAYS SCROLLING THROUGH A SINGULAR CONTENT TYPE
  146. EXHIBIT J: FOOTER NAV
  147. EXHIBIT K: CALL NUMBER
  148. THESE THINGS ARE COMMUNICATION DEVICES code block <a href="tel:+18005550199">1-800-555-0199</a> http://bradfrostweb.com/blog/mobile/a-tel-tale-sign/
  149. EXHIBIT C: BACK TO TOP LINK
  150. THERE’S LOTS MORE.
  151. THIS STUFF IS LEGITIMATELY HARD.
  152. BUT IT’S 100% NECESSARY.
  153. WHEN YOU’RE FINISHED CHANGING YOU’RE FINISHED.
  154. THIS IS FUN!
  155. 6,000,000,000 WORLDWIDE MOBILE SUBSCRIPTIONS http://www.itu.int/net/pressoffice/press_releases/2012/70.aspx#.UQXLOkrHen0
  156. MOBILE WEB
  157. MOBILE WEB
  158. THANKS! @brad_frost

×