beyond squishy: the principles of adaptive design

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.

PRINCIPLES OF ADAPTIVE DESIGN

UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY

B-SIDETHIS IS NOT

THE 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

86%ACCESS MOBILE DEVICES WHILE WATCHING TV

80%ACCESS MOBILE DURING GENERAL DOWNTIME

69%ACCESS MOBILE IN RETAIL STORES

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/

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/

EMBRACE THE SQUISHINESS.TM

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://httparchive.org/

1.3MBAVERAGE PAGE SIZE

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/

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/

RESOURCEhttp://mobitest.akamai.com

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.

ACKNOWLEDGE AND EMBRACEUNPREDICTABILITY

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

BULLSHITBULLSHIT

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

CONTENT

BULLSHIT

BULLSHITBULLSHIT

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.

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/

AGGRESSIVE ENHANCEMENT

THE THING

NOT THE THING

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

GOING BACKIN TIME

THROUGHGROUPED ITEMS

DEEP DIVEINTO CONTENT

ALWAYS SCROLLING THROUGH A SINGULAR CONTENT TYPE

EXHIBIT J: FOOTER NAV

EXHIBIT K: CALL NUMBER

THESE THINGS ARE COMMUNICATION DEVICEScode block

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

THANKS! @brad_frost

beyond squishy: the principles of adaptive design

small screen

large screen

design http

thematic consistency

practices

quote text

quote author

bullshit bullshit

Technology

beyond adaptive capacity checklists: examining the

creating hard & fast from soft & squishy

adaptive learning systems: beyond teaching machines ·...

scary halloween math more fun with squishy … halloween...

invited paper towards systems beyond 3g based on adaptive

squishy ice cream

cnidaria (jellyfish/squishy and corals and anemones)

squishy circuits, lemon batteries, and understanding...

understanding the squishy stuff: making sense of complex...

squishy circuits, voltaic piles, lemon batteries, and...

the squishy future of content

paper squishy collection 123kidsfun.com pineapple front...

squishy problems and quantitative methods - rand corporation

the value of adaptive behavior in promoting wellness and...

squishy soapy jello gels in nano size molds

participatory adaptive management leads to environmental...

the squishy future of content - penn state edition

squishy robotics: developing mobile tensegrity robots to ......

squishy logic

origin and distribution of marine sediments what’s all...