Beyond Squishy: The Principles of Adaptive Design

dBEYONDOFSQUISHYTHE PRINCIPLES ADAPTIVE DESIGN #ADAPTIVE

GENERIC TM

NEW AND SHINY

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/

RESPONSIVE WEB DESIGN

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

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

RESPONSIVE WEB DESIGN: THE MOVIE WINTER 2013

FLUID GRIDS FLEXIBLE MEDIA MEDIA QUERIES

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

RAISED EYEBROW IS RAISED

THIS IS JUST THE TIP OF THE ICEBERG.

RWD

PRINCIPLES OFADAPTIVE DESIGN

UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY

B-SIDE THIS 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, wesuggest checking outthe site from your tabletif you have one...”

Mobile users will do anything andeverything 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 ABOUTMOBILE CONTEXT?

WHAT EXACTLY IS “MOBILE CONTEXT”?

“ON THE GO” IS STILL TRUE...

BUT LOTS OF OTHERUSE CASES EXIST TOO

76% ACCESS MOBILE WHILE WAITING IN LINEhttp://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 DOWNTIMEhttp://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience

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

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

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

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/

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

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

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

EMBRACE THE SQUISHINESS. TM

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

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

YOU HAVE 5 SECONDS OF SOMEONE’S TIME.

1.3MBAVERAGE PAGE SIZE http://httparchive.org/

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/

REQUESTS: 136PAGE WEIGHT: 5.9MBLOAD TIME: 2M 46S

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

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

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/

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

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

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’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/

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 evenopened. Suddenly, the site waswithout navigation...at all.-Stephanie Rieger HTTP://STEPHANIERIEGER.COM/A-PLEA-FOR-PROGRESSIVE-ENHANCEMENT/

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

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/

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

THIS IS FOUNDATIONAL WORK.

THERE IS A DIFFERENCE BETWEEN SUPPORT AND OPTIMIZATION.

MAN, THIS BLU-RAY QUALITY SUCKS.

ACKNOWLEDGE AND EMBRACEUNPREDICTABILITY

WEB WEB

THERE’S NO SUCH THING AS FUTURE-PROOF

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

PEOPLE’S CAPACITY FOR BULLSHIT IS RAPIDLY DIMINISHING.

BULLSHIT BULLSHIT BULLSHITThis is a quote. This is where youput the quote text. BULLSHIT BULLSHIT-Quote AuthorBULLSHIT CONTENT BULLSHIT BULLSHITBULLSHIT

This is a quote. This is where youput the quote text.-Quote Author

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

FOCUS.

INVEST IN YOUR CONTENT. MAKE APIs NOT WAR

CONTENT LIKE WATER

GET YOUR CONTENT READY TO GOANYWHEREBECAUSE IT’S GOING TO GOEVERYWHERE

WE DON’T KNOW WHAT WILLBE UNDERNEATH CHRISTMASTREES 2 YEARS FROM NOW...

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

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

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

DEMO http://bit.ly/mobilefirstrwd TUTORIAL http://bit.ly/rwdtutorialWALKTHROUGH http://bit.ly/rwdanatomy

EXHIBIT A: MASTHEAD

GET TO THE MEAT.

EXHIBIT B: LOGO

Make the logo bigger!-Every Client Ever

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

EXHIBIT C: NAVIGATION

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

EXHIBIT D: SEARCH FORM

EXHIBIT E: PRODUCT INFO

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

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

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

EXHIBIT I: FIND NEARBY

OLD CONTEXT CAPABLE BROWSER FOCUSED LARGE SCREEN STATIONARY EFFICIENT INPUT FAST CONNECTION COMFORTABLEPOWERFUL CPU

NEW CONTEXT

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

ASK QUESTIONS.

EXHIBIT J: AUXILIARY CONTENT

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/

AGGRESSIVE ENHANCEMENT

NOT THE THING NOT THE THING THE THING NOT THE THING NOT THE THINGNOT THE THING

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

SCANNABILITYPERFORMANCE

SCROLLING

WHEN WE SCROLL ON MOBILEGOING BACK THROUGH DEEP DIVE IN TIME GROUPED ITEMS INTO CONTENT

WHEN WE SCROLL ON MOBILEGOING BACK IN TIME

WHEN WE SCROLL ON MOBILE THROUGH GROUPED ITEMS

WHEN WE SCROLL ON MOBILE DEEP DIVE INTO 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 CHANGINGYOU’RE FINISHED.

THIS IS FUN!

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

MOBILE WEB

THANKS!@brad_frost

Beyond Squishy: The Principles of Adaptive Design

Brad Frost

Beyond Squishy: The Principles of Adaptive Design