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.

1. d
BEYONDOFSQUISHY
THE PRINCIPLES ADAPTIVE DESIGN
#ADAPTIVE

3. GENERIC TM

8. NEW AND SHINY

9. 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/

10. RESPONSIVE WEB DESIGN

11. http://alistapart.com/article/responsive-web-design
RCE
OU
RES

12. http://www.abookapart.com/products/responsive-web-design
RCE
OU
RES

13. RESPONSIVE WEB DESIGN: THE MOVIE
WINTER 2013

14. FLUID GRIDS FLEXIBLE MEDIA MEDIA QUERIES

15. RESPONSIVE WEB DESIGN
RESI
IMPR ZE H
ESS
YOUR
FR
ERE!
IEND
S!

17. RAISED EYEBROW IS RAISED

19. THIS IS JUST THE TIP OF THE ICEBERG.

20. THIS IS JUST THE TIP OF THE ICEBERG.

21. THIS IS JUST THE TIP OF THE ICEBERG.

22. RWD

23. PRINCIPLES OF
ADAPTIVE DESIGN

24. UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY

25. UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY

26. B-SIDE
THIS IS NOT
THE WEB.

28. WEB
WEB

32. Diversity is not a bug, it’s an opportunity.
-Stephanie Rieger
http://stephanierieger.com/diversity-is-not-a-bug/

46. “...Alternately, we
suggest checking out
the site from your tablet
if you have one...”

48. Mobile users will do anything and
everything desktop users will do,
provided it’s presented in a usable way.

49. ONE WEB.

50. ONE WEB.
THEMATIC CONSISTENCY.

51. ONE WEB.
THEMATIC CONSISTENCY.
GIVE PEOPLE WHAT THEY WANT.

52. CONTENT PARITY

59. CONTENT PARITY TRUMPS ALL?

60. BUT WHAT ABOUT
MOBILE CONTEXT?

61. WHAT EXACTLY IS “MOBILE CONTEXT”?

62. “ON THE GO” IS STILL TRUE...

63. BUT LOTS OF OTHER
USE CASES EXIST TOO

64. 76%
ACCESS MOBILE WHILE WAITING IN LINE
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience

65. 86%
ACCESS MOBILE DEVICES WHILE WATCHING TV
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience

66. 80%
ACCESS MOBILE DURING GENERAL DOWNTIME
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience

67. 69%
ACCESS MOBILE IN RETAIL STORES
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience

68. 39%
WHILE #POOPIN
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience

69. QUANTITATIVE QUALITATIVE
๏ Screen size ๏ User goals
๏ Connectivity ๏ User environment
๏ Device capabilities ๏ User attention
๏ Processing power ๏ User capabilities
๏ Input methods

70. 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/

71. UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY

77. 320PX.

78. 320PX.
480PX.

79. 320PX.
480PX.
768PX.

80. 320PX.
480PX.
768PX.
1024PX.

81. 320PX.
480PX.
768PX.
1024PX.
THE FOLD.

82. 320PX.
480PX.
768PX.
1024PX.
THE FOLD.
OH GOD THE FOLD.

83. scha·den·freu·de ˈshä-dən-ˌfrȯi-də n.
enjoyment obtained from the troubles of others

84. 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

85. http://static.lukew.com/unified_device_design.png
E
RC
OU
RES

86. http://bradfrostweb.com/demo/ish/
E
RC
OU
RES

87. http://bradfrostweb.com/demo/ish/
E
RC
OU
RES

88. EMBRACE THE SQUISHINESS.
TM

90. UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY

91. 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

92. 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

93. YOU HAVE 5 SECONDS OF SOMEONE’S TIME.

94. 1.3MB
AVERAGE PAGE SIZE
http://httparchive.org/

95. 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/

98. REQUESTS: 136
PAGE WEIGHT: 5.9MB
LOAD TIME: 2M 46S

99. http://www.flickr.com/photos/philhawksworth/7562460356/sizes/l/in/photostream/

100. REQUESTS: 388
PAGE WEIGHT: 24.29MB
LOAD TIME: 2M 01S
http://www.flickr.com/photos/philhawksworth/7562460356/sizes/l/in/photostream/

101. 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/

107. http://bradfrostweb.com/blog/post/performance-as-design/

109. http://bradfrostweb.com/blog/post/performance-as-design/

110. http://mobitest.akamai.com
E
RC
OU
RES

111. UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY

112. RESPONSIVE DESIGN != ONE SIZE FITS ALL

113. PROGRESSIVE ENHANCEMENT

114. MOBILE-LAST (DEGRADED, SHOE-HORNED, SHORT-SIGHTED, CRAPPY)
MOBILE-FIRST (PROGRESSIVELY-ENHANCED, FUTURE-FRIENDLY, AWESOME)

115. 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/

117. A BRIEF WORD ABOUT
MOBILE WEB APPS

118. It’s 2013, nobody has Javascript disabled!
-Plenty of developers

119. SUPPORT IS NOT BINARY

120. JAVASCRIPT CAN FAIL.

121. JAVASCRIPT CAN WILL FAIL.

122. https://twitter.com/zachleat/status/151748039072157696

124. 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/

125. 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

126. 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/

136. 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

139. THIS IS FOUNDATIONAL WORK.

140. THERE IS A DIFFERENCE BETWEEN
SUPPORT AND OPTIMIZATION.

141. MAN, THIS BLU-RAY QUALITY SUCKS.

142. UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY

143. ACKNOWLEDGE AND EMBRACE
UNPREDICTABILITY

144. WEB
WEB

145. WEB
WEB

146. WEB
WEB

147. THERE’S NO SUCH THING
AS FUTURE-PROOF

148. BUT WE CAN BE FUTURE-FRIENDLY
http://futurefriend.ly/

149. PEOPLE’S CAPACITY FOR BULLSHIT
IS RAPIDLY DIMINISHING.

151. BULLSHIT
BULLSHIT
BULLSHIT
This is a quote. This is where you
put the quote text. BULLSHIT
BULLSHIT
-Quote Author
BULLSHIT
CONTENT
BULLSHIT BULLSHIT
BULLSHIT

152. This is a quote. This is where you
put the quote text.
-Quote Author

153. This is a quote. This is where you
put the quote text.
-Quote Author

154. This is a quote. This is where you
put the quote text.
-Quote Author

155. 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

156. FOCUS.

160. INVEST IN YOUR CONTENT.
MAKE APIs
NOT WAR

162. CONTENT LIKE WATER

163. GET YOUR CONTENT READY TO GO
ANYWHERE
BECAUSE IT’S GOING TO GO
EVERYWHERE

164. WE DON’T KNOW WHAT WILL
BE UNDERNEATH CHRISTMAS
TREES 2 YEARS FROM NOW...

165. BUT THAT’S WHAT WE NEED
TO DESIGN FOR TODAY.
WEB WEB
WEB WEB

166. 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

167. TODAY’S LANDSCAPE IS BOOTCAMP
FOR TOMORROW’S INSANITY.

168. UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY

169. DEMO
http://bit.ly/mobilefirstrwd
TUTORIAL
http://bit.ly/rwdtutorial
WALKTHROUGH
http://bit.ly/rwdanatomy

172. EXHIBIT A: MASTHEAD

173. GET TO THE MEAT.

174. EXHIBIT B: LOGO

175. Make the logo bigger!
-Every Client Ever

177. http://blog.netvlies.nl/design-interactie/retina-revolution/
RCE
OU
RES

178. EXHIBIT C: NAVIGATION

180. NAVIGATION SHOULD BE LIKE A GOOD FRIEND...
THERE WHEN YOU NEED THEM, BUT COOL ENOUGH
TO GIVE YOU YOUR SPACE

183. EXHIBIT D: SEARCH FORM

186. EXHIBIT E: PRODUCT INFO

187. 79%
PEOPLE USING THEIR SMARTPHONES IN STORES
http://pewinternet.org/Reports/2012/Smartphone-Update-2012/Findings.aspx

188. EXHIBIT F: PRODUCT IMAGES

190. CAROUSEL BEST PRACTICES

191. CAROUSEL BEST PRACTICES
๏ Make sure you actually need one

192. CAROUSEL BEST PRACTICES
๏ Make sure you actually need one
๏ Cycle through like items

193. CAROUSEL BEST PRACTICES
๏ Make sure you actually need one
๏ Cycle through like items
๏ Only load what you need

194. CAROUSEL BEST PRACTICES
๏ Make sure you actually need one
๏ Cycle through like items
๏ Only load what you need
๏ Be explicit with navigation

195. INSUFFICIENT

197. 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

199. EXHIBIT G: PRODUCT FORM

202. EXHIBIT H: SHARE BUTTONS

204. 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/

205. http://filamentgroup.com/lab/socialcount/
E
RC
OU
RES

207. EXHIBIT I: FIND NEARBY

208. OLD CONTEXT
CAPABLE BROWSER FOCUSED
LARGE SCREEN
STATIONARY
EFFICIENT INPUT
FAST CONNECTION
COMFORTABLE
POWERFUL CPU

209. NEW CONTEXT

210. http://karenmcgrane.com/2012/07/10/mobile-local/
E
RC
OU
RES

211. ASK QUESTIONS.

212. EXHIBIT J: AUXILIARY CONTENT

213. 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/

215. AGGRESSIVE ENHANCEMENT

216. NOT THE THING
NOT THE THING
THE THING
NOT THE THING
NOT THE THING
NOT THE THING

217. 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

222. SCANNABILITY
PERFORMANCE

223. SCROLLING

224. WHEN WE SCROLL ON MOBILE
GOING BACK THROUGH DEEP DIVE
IN TIME GROUPED ITEMS INTO CONTENT

225. WHEN WE SCROLL ON MOBILE
GOING BACK
IN TIME

226. WHEN WE SCROLL ON MOBILE
THROUGH
GROUPED ITEMS

227. WHEN WE SCROLL ON MOBILE
DEEP DIVE
INTO CONTENT

228. ALWAYS SCROLLING THROUGH
A SINGULAR CONTENT TYPE

231. EXHIBIT J: FOOTER NAV

232. EXHIBIT K: CALL NUMBER

233. 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/

235. EXHIBIT C: BACK TO TOP LINK

236. THERE’S LOTS MORE.

237. THIS STUFF IS LEGITIMATELY HARD.

238. BUT IT’S 100% NECESSARY.

242. WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.

244. THIS IS FUN!

245. 6,000,000,000
WORLDWIDE MOBILE SUBSCRIPTIONS
http://www.itu.int/net/pressoffice/press_releases/2012/70.aspx#.UQXLOkrHen0

247. MOBILE WEB

248. MOBILE WEB

249. THANKS!
@brad_frost