Beyond Squishy: The Principles of Adaptive Design

61,354 views
58,567 views

Published on

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.

Published in: Technology
3 Comments
156 Likes
Statistics
Notes
No Downloads
Views
Total views
61,354
On SlideShare
0
From Embeds
0
Number of Embeds
21,636
Actions
Shares
0
Downloads
604
Comments
3
Likes
156
Embeds 0
No embeds

No notes for slide

Beyond Squishy: The Principles of Adaptive Design

  1. dBEYONDOFSQUISHYTHE PRINCIPLES ADAPTIVE DESIGN #ADAPTIVE
  2. GENERIC TM
  3. NEW AND SHINY
  4. They argued about the term “AJAX” untilthey were blue in the face. But in theend, 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 OFADAPTIVE DESIGN
  17. UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
  18. UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE 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, wesuggest checking outthe site from your tabletif you have one...”
  23. Mobile users will do anything andeverything 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 ABOUTMOBILE CONTEXT?
  30. WHAT EXACTLY IS “MOBILE CONTEXT”?
  31. “ON THE GO” IS STILL TRUE...
  32. BUT LOTS OF OTHERUSE CASES EXIST TOO
  33. 76% ACCESS MOBILE WHILE WAITING IN LINEhttp://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 DOWNTIMEhttp://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  36. 69% ACCESS MOBILE IN RETAIL STOREShttp://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  37. 39% WHILE #POOPINhttp://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 withappropriate tasks, and offer all of these toall users...then make it easy for the userto 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. UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE 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 afunction of the limitation of the printed page. Weshould embrace the fact that the web doesn’t have thesame constraints, and design for this flexibility. Butfirst, 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. UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
  54. 71% MOBILE USERS EXPECTING MOBILE SITES TO LOAD AS FAST IF NOT FASTER THAN DESKTOP SITEShttp://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 LOADhttp://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
  56. YOU HAVE 5 SECONDS OF SOMEONE’S TIME.
  57. 1.3MBAVERAGE PAGE SIZE http://httparchive.org/
  58. 86% RESPONSIVE WEBSITES WHOSE SMALL SCREEN VIEW WEIGHS AS MUCH AS THE LARGE SCREEN VIEWhttp://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/
  59. REQUESTS: 136PAGE WEIGHT: 5.9MBLOAD TIME: 2M 46S
  60. http://www.flickr.com/photos/philhawksworth/7562460356/sizes/l/in/photostream/
  61. REQUESTS: 388PAGE WEIGHT: 24.29MBLOAD 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 HeilmannHTTPS://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. UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE 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’tabout designing for the lowestcommon denominator. It’s justabout 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 evenopened. Suddenly, the site waswithout 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 tobe a new Facebook, Google Readeror Google Mail.-Christian Heilmann HTTP://CHRISTIANHEILMANN.COM/2011/12/28/ON-SINGLE-PAGE-APPS/
  80. The bottom line is that a client-sidearchitecture leads to slowerperformance because most of thecode is being executed on our usersmachines 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. UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
  85. ACKNOWLEDGE AND EMBRACEUNPREDICTABILITY
  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 BULLSHITThis is a quote. This is where youput the quote text. BULLSHIT BULLSHIT-Quote AuthorBULLSHIT CONTENT BULLSHIT BULLSHITBULLSHIT
  93. This is a quote. This is where youput the quote text.-Quote Author
  94. This is a quote. This is where youput the quote text.-Quote Author
  95. This is a quote. This is where youput the quote text.-Quote Author
  96. BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT CONTENTThis is a quote. This is where you BULLSHIT BULLSHIT BULLSHITput the quote text. BULLSHIT BULLSHIT-Quote AuthorBULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHITBULLSHIT BULLSHIT
  97. FOCUS.
  98. INVEST IN YOUR CONTENT. MAKE APIs NOT WAR
  99. CONTENT LIKE WATER
  100. GET YOUR CONTENT READY TO GOANYWHEREBECAUSE IT’S GOING TO GOEVERYWHERE
  101. WE DON’T KNOW WHAT WILLBE UNDERNEATH CHRISTMASTREES 2 YEARS FROM NOW...
  102. BUT THAT’S WHAT WE NEED TO DESIGN FOR TODAY. WEB WEBWEB WEB
  103. When it comes to the Web, themore backward-compatible youare, the more forward-compatibleyou’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. UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
  106. DEMO http://bit.ly/mobilefirstrwd TUTORIAL http://bit.ly/rwdtutorialWALKTHROUGH 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 ENOUGHTO 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 andGoogle social media buttons takes 19requests 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 COMFORTABLEPOWERFUL 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 VIEWhttp://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 THINGNOT THE THING
  138. NOT THE THING NOT THE THING THE THING NOT THE THING NOT THE THINGLINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENT NOT THE THINGLINK TO FRAGMENTLINK TO FRAGMENT
  139. SCANNABILITYPERFORMANCE
  140. SCROLLING
  141. WHEN WE SCROLL ON MOBILEGOING BACK THROUGH DEEP DIVE IN TIME GROUPED ITEMS INTO CONTENT
  142. WHEN WE SCROLL ON MOBILEGOING 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 DEVICEScode 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 CHANGINGYOU’RE FINISHED.
  154. THIS IS FUN!
  155. 6,000,000,000 WORLDWIDE MOBILE SUBSCRIPTIONShttp://www.itu.int/net/pressoffice/press_releases/2012/70.aspx#.UQXLOkrHen0
  156. MOBILE WEB
  157. MOBILE WEB
  158. THANKS!@brad_frost

×