beyond squishy: the principles of adaptive design
DESCRIPTION
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.TRANSCRIPT
d
BEYOND SQUISHYTHE PRINCIPLES OF ADAPTIVE DESIGN
#ADAPTIVE
GENERICTM
NEW AND SHINY
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/
RESPONSIVE WEB DESIGN
RESOURCEhttp://alistapart.com/article/responsive-web-design
RESOURCEhttp://www.abookapart.com/products/responsive-web-design
RESPONSIVE WEB DESIGN: THE MOVIEWINTER 2013
FLEXIBLE MEDIAFLUID GRIDS MEDIA QUERIES
RESPONSIVE WEB DESIGN
RESIZE HERE!IMPRESS YOUR FRIENDS!
RAISED EYEBROW IS RAISED
THIS IS JUST THE TIP OF THE ICEBERG.
THIS IS JUST THE TIP OF THE ICEBERG.
THIS IS JUST THE TIP OF THE ICEBERG.
RWD
PRINCIPLES OF ADAPTIVE DESIGN
UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
B-SIDETHIS IS NOT
THE WEB.
WEB
WEB
Diversity is not a bug, it’s an opportunity.-Stephanie Rieger
http://stephanierieger.com/diversity-is-not-a-bug/
“...Alternately, we suggest checking out the site from your tablet if you have one...”
Mobile users will do anything and everything desktop users will do, provided it’s presented in a usable way.
ONE WEB.
ONE WEB.THEMATIC CONSISTENCY.
ONE WEB.THEMATIC CONSISTENCY.GIVE PEOPLE WHAT THEY WANT.
CONTENT PARITY
CONTENT PARITY TRUMPS ALL?
BUT WHAT ABOUT MOBILE CONTEXT?
WHAT EXACTLY IS “MOBILE CONTEXT”?
“ON THE GO” IS STILL TRUE...
BUT LOTS OF OTHER USE CASES EXIST TOO
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
76%ACCESS MOBILE WHILE WAITING IN LINE
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
86%ACCESS MOBILE DEVICES WHILE WATCHING TV
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
80%ACCESS MOBILE DURING GENERAL DOWNTIME
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
69%ACCESS MOBILE IN RETAIL STORES
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
39%WHILE #POOPIN
QUANTITATIVE๏ Screen size๏ Connectivity๏ Device capabilities๏ Processing power๏ Input methods
QUALITATIVE๏ User goals๏ User environment๏ User attention๏ User capabilities
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/
UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
320PX.
320PX.480PX.
320PX.480PX.768PX.
320PX.480PX.768PX.1024PX.
320PX.480PX.768PX.1024PX.THE FOLD.
320PX.480PX.768PX.1024PX.THE FOLD.OH GOD THE FOLD.
scha·den·freu·de \ˈshä-dən-ˌfrȯi-də\ n. enjoyment obtained from the troubles of others
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
RESOURCEhttp://static.lukew.com/unified_device_design.png
RESOURCEhttp://bradfrostweb.com/demo/ish/
RESOURCEhttp://bradfrostweb.com/demo/ish/
EMBRACE THE SQUISHINESS.TM
UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
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
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
74%MOBILE VISITORS WHO WILL ABANDON A SITEIF IT TAKES LONGER THAN 5 SECONDS TO LOAD
YOU HAVE 5 SECONDS OF SOMEONE’S TIME.
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
REQUESTS: 136PAGE WEIGHT: 5.9MBLOAD TIME: 2M 46S
http://www.flickr.com/photos/philhawksworth/7562460356/sizes/l/in/photostream/
http://www.flickr.com/photos/philhawksworth/7562460356/sizes/l/in/photostream/
REQUESTS: 388PAGE WEIGHT: 24.29MBLOAD TIME: 2M 01S
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/
http://bradfrostweb.com/blog/post/performance-as-design/
http://bradfrostweb.com/blog/post/performance-as-design/
RESOURCEhttp://mobitest.akamai.com
UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
RESPONSIVE DESIGN != ONE SIZE FITS ALL
PROGRESSIVE ENHANCEMENT
MOBILE-LAST (DEGRADED, SHOE-HORNED, SHORT-SIGHTED, CRAPPY)
MOBILE-FIRST (PROGRESSIVELY-ENHANCED, FUTURE-FRIENDLY, AWESOME)
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/
A BRIEF WORD ABOUT MOBILE WEB APPS
It’s 2013, nobody has Javascript disabled!-Plenty of developers
SUPPORT IS NOT BINARY
JAVASCRIPT CAN FAIL.
JAVASCRIPT CAN WILL FAIL.
https://twitter.com/zachleat/status/151748039072157696
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/
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
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/
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
THIS IS FOUNDATIONAL WORK.
THERE IS A DIFFERENCE BETWEEN SUPPORT AND OPTIMIZATION.
MAN, THIS BLU-RAY QUALITY SUCKS.
UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
ACKNOWLEDGE AND EMBRACEUNPREDICTABILITY
WEB
WEB
WEB
WEB
WEB
WEB
THERE’S NO SUCH THINGAS FUTURE-PROOF
BUT WE CAN BE FUTURE-FRIENDLY
http://futurefriend.ly/
PEOPLE’S CAPACITY FOR BULLSHITIS RAPIDLY DIMINISHING.
This is a quote. This is where you put the quote text.-Quote AuthorCONTENTBULLSHIT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHITBULLSHIT
This is a quote. This is where you put the quote text.-Quote Author
This is a quote. This is where you put the quote text.-Quote Author
This is a quote. This is where you put the quote text.-Quote Author
This is a quote. This is where you put the quote text.-Quote Author
CONTENT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHIT
BULLSHITBULLSHIT
BULLSHIT BULLSHIT
BULLSHIT
BULLSHIT
BULLSHIT BULLSHIT
BULLSHIT BULLSHIT
BULLSHIT
BULLSHIT
FOCUS.
INVEST IN YOUR CONTENT.
MAKE APIsNOT WAR
CONTENT LIKE WATER
GET YOUR CONTENT READY TO GO
ANYWHEREBECAUSE IT’S GOING TO GO
EVERYWHERE
WE DON’T KNOW WHAT WILL BE UNDERNEATH CHRISTMAS TREES 2 YEARS FROM NOW...
BUT THAT’S WHAT WE NEED TO DESIGN FOR TODAY.
WEB WEB WEBWEB
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
TODAY’S LANDSCAPE IS BOOTCAMPFOR TOMORROW’S INSANITY.
UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
DEMO
TUTORIAL
WALKTHROUGH
http://bit.ly/mobilefirstrwd
http://bit.ly/rwdanatomy
http://bit.ly/rwdtutorial
EXHIBIT A: MASTHEAD
GET TO THE MEAT.
EXHIBIT B: LOGO
Make the logo bigger!-Every Client Ever
RESOURCEhttp://blog.netvlies.nl/design-interactie/retina-revolution/
EXHIBIT C: NAVIGATION
NAVIGATION SHOULD BE LIKE A GOOD FRIEND...THERE WHEN YOU NEED THEM, BUT COOL ENOUGH TO GIVE YOU YOUR SPACE
EXHIBIT D: SEARCH FORM
EXHIBIT E: PRODUCT INFO
http://pewinternet.org/Reports/2012/Smartphone-Update-2012/Findings.aspx
79%PEOPLE USING THEIR SMARTPHONES IN STORES
EXHIBIT F: PRODUCT IMAGES
CAROUSEL BEST PRACTICES
CAROUSEL BEST PRACTICES๏ Make sure you actually need one
CAROUSEL BEST PRACTICES๏ Make sure you actually need one๏ Cycle through like items
CAROUSEL BEST PRACTICES๏ Make sure you actually need one๏ Cycle through like items๏ Only load what you need
CAROUSEL BEST PRACTICES๏ Make sure you actually need one๏ Cycle through like items๏ Only load what you need๏ Be explicit with navigation
INSUFFICIENT
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
EXHIBIT G: PRODUCT FORM
EXHIBIT H: SHARE BUTTONS
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/
RESOURCEhttp://filamentgroup.com/lab/socialcount/
EXHIBIT I: FIND NEARBY
COMFORTABLE
STATIONARY
FOCUSEDCAPABLE BROWSER
EFFICIENT INPUT
LARGE SCREEN
FAST CONNECTION
POWERFUL CPU
OLD CONTEXT
NEW CONTEXT
RESOURCEhttp://karenmcgrane.com/2012/07/10/mobile-local/
ASK QUESTIONS.
EXHIBIT J: AUXILIARY CONTENT
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/
86%
AGGRESSIVE ENHANCEMENT
THE THING
NOT THE THING
NOT THE THING
NOT THE THING
NOT THE THING
NOT THE THING
THE THING
NOT THE THING
NOT THE THING
NOT THE THING
NOT THE THING
NOT THE THING
LINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENTLINK TO FRAGMENT
SCANNABILITY
PERFORMANCE
SCROLLING
WHEN WE SCROLL ON MOBILE
GOING BACKIN TIME
THROUGHGROUPED ITEMS
DEEP DIVEINTO CONTENT
WHEN WE SCROLL ON MOBILE
GOING BACKIN TIME
WHEN WE SCROLL ON MOBILE
THROUGHGROUPED ITEMS
WHEN WE SCROLL ON MOBILE
DEEP DIVEINTO CONTENT
ALWAYS SCROLLING THROUGH A SINGULAR CONTENT TYPE
EXHIBIT J: FOOTER NAV
EXHIBIT K: CALL NUMBER
THESE THINGS ARE COMMUNICATION DEVICEScode block
<a href="tel:+18005550199">1-800-555-0199</a>
http://bradfrostweb.com/blog/mobile/a-tel-tale-sign/
EXHIBIT C: BACK TO TOP LINK
THERE’S LOTS MORE.
THIS STUFF IS LEGITIMATELY HARD.
BUT IT’S 100% NECESSARY.
WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.
THIS IS FUN!
http://www.itu.int/net/pressoffice/press_releases/2012/70.aspx#.UQXLOkrHen0
6,000,000,000
WORLDWIDE MOBILE SUBSCRIPTIONS
MOBILE WEB
MOBILE WEB
THANKS! @brad_frost