• Like
  • Save
Beyond Squishy: The Principles of Adaptive Design
Upcoming SlideShare
Loading in...5
×
 

Beyond Squishy: The Principles of Adaptive Design

on

  • 40,033 views

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!" ...

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.

Statistics

Views

Total Views
40,033
Views on SlideShare
21,508
Embed Views
18,525

Actions

Likes
142
Downloads
494
Comments
3

61 Embeds 18,525

http://bradfrostweb.com 8958
http://tableless.com.br 3140
http://www.cossa.ru 2805
https://twitter.com 1777
http://www.lancegarcia.com 429
http://www.betterwaytosayit.com 242
http://www.scoop.it 207
http://lanyrd.com 126
http://sitegoals.com 125
http://betalab.logotel.it 94
http://experienceengineer.com 93
http://tumblr.kdnewman.com 66
http://flavors.me 59
http://notes.ofisia.name 48
http://www.iphone-entreprise.com 41
http://kdnewman.com 36
http://rlance.tumblr.com 31
http://www.ostraining.com 28
http://eventifier.co 26
http://prezi4u.tistory.com 24
http://www.cs.ubbcluj.ro 22
http://mymobilebrain.wordpress.com 18
http://www.newsblur.com 12
http://newsblur.com 11
http://dl.dropboxusercontent.com 9
http://ivanov.uz 9
http://www.bckto.com 8
http://www.promodo.com 7
https://www.rebelmouse.com 7
http://www.facebook.com 6
http://fabiocabula.altervista.org 5
http://www.pinterest.com 4
http://nuevospowerpoints.blogspot.com.es 4
http://tweetedtimes.com 4
http://feeds.feedburner.com 4
http://nuevospowerpoints.blogspot.com.ar 4
http://dmduplessis.com 2
http://webcache.googleusercontent.com 2
http://translate.googleusercontent.com 2
http://pinterest.com 2
http://ivnew.uz 2
http://abtasty.com 2
http://nuevospowerpoints.blogspot.mx 2
http://www.behance.net 2
http://mahinth.blogspot.com 2
http://fever.thomas-ruffier.com 2
http://jp.flavors.me 2
http://www.instapaper.com 1
http://www.dublinschool.org 1
http://www.google.fr 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • I was at your presentation. Loved it. Entertaining and informative.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi Brad. Your presentation is beautifully designed. Wish you could include speaker notes for more context (hint). Thanks for posting.
    Are you sure you want to
    Your message goes here
    Processing…
  • Thx for sharing!

    Just for convenience, some fixed links:

    * on slide 169:

    http://bit.ly/mobilefirstrwd

    http://bit.ly/rwdtutorial

    http://bit.ly/rwdanatomy

    * on slide 177:

    http://blog.netvlies.nl/design-interactie/retina-revolution/
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Beyond Squishy: The Principles of Adaptive Design Beyond Squishy: The Principles of Adaptive Design Presentation Transcript

    • 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.
    • THIS IS JUST THE TIP OF THE ICEBERG.
    • THIS IS JUST THE TIP OF THE ICEBERG.
    • RWD
    • PRINCIPLES OFADAPTIVE DESIGN
    • UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
    • 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/
    • 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 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
    • http://bradfrostweb.com/demo/ish/ E RC OU RES
    • EMBRACE THE SQUISHINESS. TM
    • UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
    • 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://bradfrostweb.com/blog/post/performance-as-design/
    • http://mobitest.akamai.com E RC OU RES
    • 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’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.
    • UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
    • ACKNOWLEDGE AND EMBRACEUNPREDICTABILITY
    • WEB WEB
    • WEB WEB
    • 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
    • This is a quote. This is where youput the quote text.-Quote Author
    • 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.
    • UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
    • 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
    • MOBILE WEB
    • THANKS!@brad_frost