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 g...
RESPONSIVE WEB DESIGN
http://alistapart.com/article/responsive-web-design                                                        RCE            ...
http://www.abookapart.com/products/responsive-web-design                                                             RCE  ...
RESPONSIVE WEB DESIGN: THE MOVIE            WINTER 2013
FLUID GRIDS   FLEXIBLE MEDIA   MEDIA QUERIES
RESPONSIVE WEB DESIGN                RESI                IMPR       ZE H                       ESS                        ...
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 capabilitie...
Just make quality, relevant content withappropriate tasks, and offer all of these toall users...then make it easy for the ...
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 limita...
http://static.lukew.com/unified_device_design.png                                                        E                ...
http://bradfrostweb.com/demo/ish/                                        E                                      RC        ...
http://bradfrostweb.com/demo/ish/                                        E                                      RC        ...
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/...
74%     MOBILE VISITORS WHO WILL ABANDON A SITE     IF IT TAKES LONGER THAN 5 SECONDS TO LOADhttp://www.gomez.com/wp-conte...
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...
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/ph...
If your website is 15MB it’s not HTML5,it’s stupid.-Christian HeilmannHTTPS://HACKS.MOZILLA.ORG/2012/10/BROKEN-PROMISES-OF...
http://bradfrostweb.com/blog/post/performance-as-design/
http://bradfrostweb.com/blog/post/performance-as-design/
http://mobitest.akamai.com                                 E                               RC                             ...
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...
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://STEP...
WORKED               DIDN’T WORK๏ Galaxy Nexus       ๏ iPhone 4 (iOS 4.3)๏ iPhone 4 (iOS 5)   ๏ iPod Touch                ...
Not everything on the Web needs tobe a new Facebook, Google Readeror Google Mail.-Christian Heilmann      HTTP://CHRISTIAN...
The bottom line is that a client-sidearchitecture leads to slowerperformance because most of thecode is being executed on ...
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 wher...
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                   ...
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  ...
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/                                                              ...
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 w...
INSUFFICIENT
CAROUSEL BEST PRACTICES๏ Make sure you actually need one๏ Cycle through like items๏ Only load what you need๏ Be explicit w...
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://deve...
http://filamentgroup.com/lab/socialcount/                                                E                                ...
EXHIBIT I: FIND NEARBY
OLD CONTEXT                        CAPABLE BROWSER     FOCUSED         LARGE SCREEN                                       ...
NEW CONTEXT
http://karenmcgrane.com/2012/07/10/mobile-local/                                                       E                  ...
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/perform...
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                 ...
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....
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#.UQXLO...
MOBILE   WEB
MOBILE   WEB
THANKS!@brad_frost
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Upcoming SlideShare
Loading in...5
×

Beyond Squishy: The Principles of Adaptive Design

43,674

Published on

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.

Published in: Technology
3 Comments
153 Likes
Statistics
Notes
  • I was at your presentation. Loved it. Entertaining and informative.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Brad. Your presentation is beautifully designed. Wish you could include speaker notes for more context (hint). Thanks for posting.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
43,674
On Slideshare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
577
Comments
3
Likes
153
Embeds 0
No embeds

No notes for slide

Beyond Squishy: The Principles of Adaptive Design

  1. 1. dBEYONDOFSQUISHYTHE PRINCIPLES ADAPTIVE DESIGN #ADAPTIVE
  2. 2. GENERIC TM
  3. 3. NEW AND SHINY
  4. 4. 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/
  5. 5. RESPONSIVE WEB DESIGN
  6. 6. http://alistapart.com/article/responsive-web-design RCE OU RES
  7. 7. http://www.abookapart.com/products/responsive-web-design RCE OU RES
  8. 8. RESPONSIVE WEB DESIGN: THE MOVIE WINTER 2013
  9. 9. FLUID GRIDS FLEXIBLE MEDIA MEDIA QUERIES
  10. 10. RESPONSIVE WEB DESIGN RESI IMPR ZE H ESS YOUR FR ERE! IEND S!
  11. 11. RAISED EYEBROW IS RAISED
  12. 12. THIS IS JUST THE TIP OF THE ICEBERG.
  13. 13. THIS IS JUST THE TIP OF THE ICEBERG.
  14. 14. THIS IS JUST THE TIP OF THE ICEBERG.
  15. 15. RWD
  16. 16. PRINCIPLES OFADAPTIVE DESIGN
  17. 17. UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
  18. 18. UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
  19. 19. B-SIDE THIS IS NOT THE WEB.
  20. 20. WEB WEB
  21. 21. Diversity is not a bug, it’s an opportunity.-Stephanie Rieger http://stephanierieger.com/diversity-is-not-a-bug/
  22. 22. “...Alternately, wesuggest checking outthe site from your tabletif you have one...”
  23. 23. Mobile users will do anything andeverything desktop users will do,provided it’s presented in a usable way.
  24. 24. ONE WEB.
  25. 25. ONE WEB.THEMATIC CONSISTENCY.
  26. 26. ONE WEB.THEMATIC CONSISTENCY.GIVE PEOPLE WHAT THEY WANT.
  27. 27. CONTENT PARITY
  28. 28. CONTENT PARITY TRUMPS ALL?
  29. 29. BUT WHAT ABOUTMOBILE CONTEXT?
  30. 30. WHAT EXACTLY IS “MOBILE CONTEXT”?
  31. 31. “ON THE GO” IS STILL TRUE...
  32. 32. BUT LOTS OF OTHERUSE CASES EXIST TOO
  33. 33. 76% ACCESS MOBILE WHILE WAITING IN LINEhttp://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  34. 34. 86%ACCESS MOBILE DEVICES WHILE WATCHING TV http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  35. 35. 80%ACCESS MOBILE DURING GENERAL DOWNTIMEhttp://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  36. 36. 69% ACCESS MOBILE IN RETAIL STOREShttp://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  37. 37. 39% WHILE #POOPINhttp://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
  38. 38. QUANTITATIVE QUALITATIVE๏ Screen size ๏ User goals๏ Connectivity ๏ User environment๏ Device capabilities ๏ User attention๏ Processing power ๏ User capabilities๏ Input methods
  39. 39. 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/
  40. 40. UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
  41. 41. 320PX.
  42. 42. 320PX.480PX.
  43. 43. 320PX.480PX.768PX.
  44. 44. 320PX.480PX.768PX.1024PX.
  45. 45. 320PX.480PX.768PX.1024PX.THE FOLD.
  46. 46. 320PX.480PX.768PX.1024PX.THE FOLD.OH GOD THE FOLD.
  47. 47. scha·den·freu·de ˈshä-dən-ˌfrȯi-də n.enjoyment obtained from the troubles of others
  48. 48. 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
  49. 49. http://static.lukew.com/unified_device_design.png E RC OU RES
  50. 50. http://bradfrostweb.com/demo/ish/ E RC OU RES
  51. 51. http://bradfrostweb.com/demo/ish/ E RC OU RES
  52. 52. EMBRACE THE SQUISHINESS. TM
  53. 53. UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
  54. 54. 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
  55. 55. 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
  56. 56. YOU HAVE 5 SECONDS OF SOMEONE’S TIME.
  57. 57. 1.3MBAVERAGE PAGE SIZE http://httparchive.org/
  58. 58. 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/
  59. 59. REQUESTS: 136PAGE WEIGHT: 5.9MBLOAD TIME: 2M 46S
  60. 60. http://www.flickr.com/photos/philhawksworth/7562460356/sizes/l/in/photostream/
  61. 61. REQUESTS: 388PAGE WEIGHT: 24.29MBLOAD TIME: 2M 01S http://www.flickr.com/photos/philhawksworth/7562460356/sizes/l/in/photostream/
  62. 62. 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/
  63. 63. http://bradfrostweb.com/blog/post/performance-as-design/
  64. 64. http://bradfrostweb.com/blog/post/performance-as-design/
  65. 65. http://mobitest.akamai.com E RC OU RES
  66. 66. UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
  67. 67. RESPONSIVE DESIGN != ONE SIZE FITS ALL
  68. 68. PROGRESSIVE ENHANCEMENT
  69. 69. MOBILE-LAST (DEGRADED, SHOE-HORNED, SHORT-SIGHTED, CRAPPY)MOBILE-FIRST (PROGRESSIVELY-ENHANCED, FUTURE-FRIENDLY, AWESOME)
  70. 70. 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/
  71. 71. A BRIEF WORD ABOUT MOBILE WEB APPS
  72. 72. It’s 2013, nobody has Javascript disabled!-Plenty of developers
  73. 73. SUPPORT IS NOT BINARY
  74. 74. JAVASCRIPT CAN FAIL.
  75. 75. JAVASCRIPT CAN WILL FAIL.
  76. 76. https://twitter.com/zachleat/status/151748039072157696
  77. 77. And the menu failed. Never evenopened. Suddenly, the site waswithout navigation...at all.-Stephanie Rieger HTTP://STEPHANIERIEGER.COM/A-PLEA-FOR-PROGRESSIVE-ENHANCEMENT/
  78. 78. 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
  79. 79. 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/
  80. 80. 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
  81. 81. THIS IS FOUNDATIONAL WORK.
  82. 82. THERE IS A DIFFERENCE BETWEEN SUPPORT AND OPTIMIZATION.
  83. 83. MAN, THIS BLU-RAY QUALITY SUCKS.
  84. 84. UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
  85. 85. ACKNOWLEDGE AND EMBRACEUNPREDICTABILITY
  86. 86. WEB WEB
  87. 87. WEB WEB
  88. 88. WEB WEB
  89. 89. THERE’S NO SUCH THING AS FUTURE-PROOF
  90. 90. BUT WE CAN BE FUTURE-FRIENDLY http://futurefriend.ly/
  91. 91. PEOPLE’S CAPACITY FOR BULLSHIT IS RAPIDLY DIMINISHING.
  92. 92. BULLSHIT BULLSHIT BULLSHITThis is a quote. This is where youput the quote text. BULLSHIT BULLSHIT-Quote AuthorBULLSHIT CONTENT BULLSHIT BULLSHITBULLSHIT
  93. 93. This is a quote. This is where youput the quote text.-Quote Author
  94. 94. This is a quote. This is where youput the quote text.-Quote Author
  95. 95. This is a quote. This is where youput the quote text.-Quote Author
  96. 96. 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
  97. 97. FOCUS.
  98. 98. INVEST IN YOUR CONTENT. MAKE APIs NOT WAR
  99. 99. CONTENT LIKE WATER
  100. 100. GET YOUR CONTENT READY TO GOANYWHEREBECAUSE IT’S GOING TO GOEVERYWHERE
  101. 101. WE DON’T KNOW WHAT WILLBE UNDERNEATH CHRISTMASTREES 2 YEARS FROM NOW...
  102. 102. BUT THAT’S WHAT WE NEED TO DESIGN FOR TODAY. WEB WEBWEB WEB
  103. 103. 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
  104. 104. TODAY’S LANDSCAPE IS BOOTCAMP FOR TOMORROW’S INSANITY.
  105. 105. UBIQUITYFLEXIBILITYPERFORMANCEENHANCEMENTFUTURE FRIENDLY
  106. 106. DEMO http://bit.ly/mobilefirstrwd TUTORIAL http://bit.ly/rwdtutorialWALKTHROUGH http://bit.ly/rwdanatomy
  107. 107. EXHIBIT A: MASTHEAD
  108. 108. GET TO THE MEAT.
  109. 109. EXHIBIT B: LOGO
  110. 110. Make the logo bigger!-Every Client Ever
  111. 111. http://blog.netvlies.nl/design-interactie/retina-revolution/ RCE OU RES
  112. 112. EXHIBIT C: NAVIGATION
  113. 113. NAVIGATION SHOULD BE LIKE A GOOD FRIEND...THERE WHEN YOU NEED THEM, BUT COOL ENOUGHTO GIVE YOU YOUR SPACE
  114. 114. EXHIBIT D: SEARCH FORM
  115. 115. EXHIBIT E: PRODUCT INFO
  116. 116. 79%PEOPLE USING THEIR SMARTPHONES IN STORES http://pewinternet.org/Reports/2012/Smartphone-Update-2012/Findings.aspx
  117. 117. EXHIBIT F: PRODUCT IMAGES
  118. 118. CAROUSEL BEST PRACTICES
  119. 119. CAROUSEL BEST PRACTICES๏ Make sure you actually need one
  120. 120. CAROUSEL BEST PRACTICES๏ Make sure you actually need one๏ Cycle through like items
  121. 121. CAROUSEL BEST PRACTICES๏ Make sure you actually need one๏ Cycle through like items๏ Only load what you need
  122. 122. CAROUSEL BEST PRACTICES๏ Make sure you actually need one๏ Cycle through like items๏ Only load what you need๏ Be explicit with navigation
  123. 123. INSUFFICIENT
  124. 124. 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
  125. 125. EXHIBIT G: PRODUCT FORM
  126. 126. EXHIBIT H: SHARE BUTTONS
  127. 127. 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/
  128. 128. http://filamentgroup.com/lab/socialcount/ E RC OU RES
  129. 129. EXHIBIT I: FIND NEARBY
  130. 130. OLD CONTEXT CAPABLE BROWSER FOCUSED LARGE SCREEN STATIONARY EFFICIENT INPUT FAST CONNECTION COMFORTABLEPOWERFUL CPU
  131. 131. NEW CONTEXT
  132. 132. http://karenmcgrane.com/2012/07/10/mobile-local/ E RC OU RES
  133. 133. ASK QUESTIONS.
  134. 134. EXHIBIT J: AUXILIARY CONTENT
  135. 135. 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/
  136. 136. AGGRESSIVE ENHANCEMENT
  137. 137. NOT THE THING NOT THE THING THE THING NOT THE THING NOT THE THINGNOT THE THING
  138. 138. 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
  139. 139. SCANNABILITYPERFORMANCE
  140. 140. SCROLLING
  141. 141. WHEN WE SCROLL ON MOBILEGOING BACK THROUGH DEEP DIVE IN TIME GROUPED ITEMS INTO CONTENT
  142. 142. WHEN WE SCROLL ON MOBILEGOING BACK IN TIME
  143. 143. WHEN WE SCROLL ON MOBILE THROUGH GROUPED ITEMS
  144. 144. WHEN WE SCROLL ON MOBILE DEEP DIVE INTO CONTENT
  145. 145. ALWAYS SCROLLING THROUGH A SINGULAR CONTENT TYPE
  146. 146. EXHIBIT J: FOOTER NAV
  147. 147. EXHIBIT K: CALL NUMBER
  148. 148. THESE THINGS ARE COMMUNICATION DEVICEScode block<a href="tel:+18005550199">1-800-555-0199</a> http://bradfrostweb.com/blog/mobile/a-tel-tale-sign/
  149. 149. EXHIBIT C: BACK TO TOP LINK
  150. 150. THERE’S LOTS MORE.
  151. 151. THIS STUFF IS LEGITIMATELY HARD.
  152. 152. BUT IT’S 100% NECESSARY.
  153. 153. WHEN YOU’RE FINISHED CHANGINGYOU’RE FINISHED.
  154. 154. THIS IS FUN!
  155. 155. 6,000,000,000 WORLDWIDE MOBILE SUBSCRIPTIONShttp://www.itu.int/net/pressoffice/press_releases/2012/70.aspx#.UQXLOkrHen0
  156. 156. MOBILE WEB
  157. 157. MOBILE WEB
  158. 158. THANKS!@brad_frost
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×