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.
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/
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/
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
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
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/
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/
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/
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/
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/
127.
128.
129.
130.
131.
132.
133.
134.
135.
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
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
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
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
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/
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/
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
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/