For a Future Friendly Web by Brad Frost

Watch the video here: https://vimeo.com/68957479

Transcript

1. FOR A FUTURE-FRIENDLY WEB @brad_frost
2. B-SIDE THIS IS NOT THE WEB.
4. WEB WEB
5. DEVICE FATIGUE http://bradfrostweb.com/blog/post/device-fatigue/
7. 80% OF BRANDED APPS FAIL TO ACHIEVE 1000 DOWNLOADS http://www.guardian.co.uk/technology/appsblog/2011/jul/11/branded-apps-flopping
8. APP GLUT http://www.flickr.com/photos/29022619@N03/7980265115/
12. Links don’t open apps. -Jason Grigsby
13. FOCUSED CREATION, UBIQUITOUS DISTRIBUTION http://bradfrostweb.com/blog/post/native-vs-web-is-total-bullshit/
19. SEPARATE SITES AREN’T SCALABLE MOBILE E-READER TABLET DESKTOP TV
22. PRINCIPLES OF ADAPTIVE DESIGN
23. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
24. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
27. Diversity is not a bug, it’s an opportunity. -Stephanie Rieger http://stephanierieger.com/diversity-is-not-a-bug/
39. “...Alternately, we suggest checking out the site from your tablet if you have one...”
41. Mobile users will do anything and everything desktop users will do, provided it’s presented in a usable way.
42. ONE WEB. THEMATIC CONSISTENCY. GIVE PEOPLE WHAT THEY WANT.
43. CONTENT PARITY
50. CONTENT PARITY TRUMPS ALL?
51. BUT WHAT ABOUT MOBILE CONTEXT?
52. WHAT EXACTLY IS “MOBILE CONTEXT”?
53. “ON THE GO” IS STILL TRUE...
54. BUT LOTS OF OTHER USE CASES EXIST TOO
55. http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience 76% ACCESS MOBILE WHILE WAITING IN LINE
56. http://pewinternet.org/Reports/2012/Smartphone-Update-2012/Findings.aspx 79% PEOPLE USING THEIR SMARTPHONES IN STORES
57. http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience 86% ACCESS MOBILE DEVICES WHILE WATCHING TV
58. http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience 80% ACCESS MOBILE DURING GENERAL DOWNTIME
59. http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience 39% WHILE #POOPIN
60. QUANTITATIVE ๏ Screen size ๏ Connectivity ๏ Device capabilities ๏ Processing power ๏ Input methods QUALITATIVE ๏ User goals ๏ User environment ๏ User attention ๏ User capabilities
61. 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/
62. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
65. 320PX.
66. 320PX. 480PX.
67. 320PX. 480PX. 768PX.
68. 320PX. 480PX. 768PX. 1024PX.
69. 320PX. 480PX. 768PX. 1024PX. THE FOLD.
70. 320PX. 480PX. 768PX. 1024PX. THE FOLD. OH GOD THE FOLD.
71. RESOURCE http://static.lukew.com/unified_device_design.png
72. RESOURCE http://bradfrostweb.com/demo/ish/
73. RESOURCE http://bradfrostweb.com/demo/ish/
74. EMBRACE THE SQUISHINESS.TM
75. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
76. 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
77. 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
78. YOU HAVE 5 SECONDS OF SOMEONE’S TIME.
79. http://httparchive.org/ 1.3MB AVERAGE PAGE SIZE
80. http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/ 86% RESPONSIVE WEBSITES WHOSE SMALL SCREEN VIEW WEIGHS AS MUCH AS THE LARGE SCREEN VIEW
83. REQUESTS: 136 PAGE WEIGHT: 5.9MB LOAD TIME: 2M 46S
84. http://www.flickr.com/photos/philhawksworth/7562460356/sizes/l/in/photostream/
85. http://www.flickr.com/photos/philhawksworth/7562460356/sizes/l/in/photostream/ REQUESTS: 388 PAGE WEIGHT: 24.29MB LOAD TIME: 2M 01S
86. 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/
90. http://bradfrostweb.com/blog/post/performance-as-design/
92. http://bradfrostweb.com/blog/post/performance-as-design/
93. RESOURCE http://mobitest.akamai.com
94. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
95. RESPONSIVE DESIGN != ONE SIZE FITS ALL
96. PROGRESSIVE ENHANCEMENT
97. MOBILE-LAST (DEGRADED, SHOE-HORNED, SHORT-SIGHTED, CRAPPY) MOBILE-FIRST (PROGRESSIVELY-ENHANCED, FUTURE-FRIENDLY, AWESOME)
99. It’s 2013, nobody has Javascript disabled! -Plenty of developers
100. SUPPORT IS NOT BINARY
101. JAVASCRIPT CAN FAIL.
102. JAVASCRIPT CAN WILL FAIL.
104. 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/
105. WORKED ๏ Galaxy Nexus ๏ iPhone 4 (iOS 5) DIDN’T WORK ๏ iPhone 4 (iOS 4.3) ๏ 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
106. A BRIEF WORD ABOUT MOBILE WEB APPS
115. 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/
116. 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
117. THIS IS FOUNDATIONAL WORK.
118. THERE IS A DIFFERENCE BETWEEN SUPPORT AND OPTIMIZATION.
119. MAN, THIS BLU-RAY QUALITY SUCKS.
120. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
121. ACKNOWLEDGE AND EMBRACE UNPREDICTABILITY
122. WEB WEB
123. WEB WEB
124. WEB WEB
125. THERE’S NO SUCH THING AS FUTURE-PROOF
126. BUT WE CAN BE FUTURE-FRIENDLY http://futurefriend.ly/
127. FOCUS
128. PEOPLE’S CAPACITY FOR BULLSHIT IS RAPIDLY DIMINISHING.
130. This is a quote. This is where you put the quote text. -Quote Author CONTENT BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT BULLSHIT
131. Focus your service before your customers and increasing diversity do it for you. -Future Friendly http://www.the-haystack.com/2012/07/09/great-works-of-fiction-presents-the-mobile-context/
133. http://www.flickr.com/photos/the_tahoe_guy/4183278431/
134. ORBIT AROUND DATA
135. INVEST IN YOUR CONTENT. MAKE APIs NOT WAR
137. UNIVERSAL CONTENT
138. CONTENT LIKE WATER
139. GET YOUR CONTENT READY TO GO ANYWHERE BECAUSE IT’S GOING TO GO EVERYWHERE
140. UNKNOWN VESSEL: IDENTIFY
142. COMMAND YOUR FLEET
143. RESOURCE http://precious-forever.com/2011/05/26/patterns-for-multiscreen-strategies/
144. WE DON’T KNOW WHAT WILL BE UNDERNEATH CHRISTMAS TREES 2 YEARS FROM NOW...
145. BUT THAT’S WHAT WE NEED TO DESIGN FOR TODAY. WEB WEB WEB WEB
146. 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
147. UBIQUITY FLEXIBILITY PERFORMANCE ENHANCEMENT FUTURE FRIENDLY
148. THIS STUFF IS LEGITIMATELY HARD.
149. BUT IT’S 100% NECESSARY.
156. WHEN YOU’RE FINISHED CHANGING YOU’RE FINISHED.
158. THIS IS FUN!
159. http://www.itu.int/net/pressoffice/press_releases/2012/70.aspx#.UQXLOkrHen0 6,000,000,000 WORLDWIDE MOBILE SUBSCRIPTIONS
161. MOBILE WEB
162. MOBILE WEB
163. THANKS! @brad_frost
164. THANKS! @brad_frost