PROGRESSIVE     ENHANCEMENT    &  MOBILEAaron Gustafson@aarongustafsonslideshare.net/AaronGustafson
BROWSERS ARE A PAIN IN THE ASS
AND THEN THERE’S   MOBILE
© Brad Frost
© Brad Frost
WHAT IS MOBILE?
WHAT IS MOBILE?
“There is no WebKit on Mobile           — Peter-Paul Koch
WebKit vs. Acid3http://www.quirksmode.org/webkit_mobile.html
Surely there’s  platformconsistency?!
“There is no Android          — Stephanie Rieger
http://yfrog.com/z/ob5kndj
BUT ANDROIDIS NOT UNIQUE    IN THIS
THE CULPRITS? SCREEN SIZE
THE CULPRITS?EMBEDDED VIEWS
THE CULPRITS?BROWSER CHROME
THE CULPRITS? ZOOM LEVEL
THE CULPRITS? ZOOM LEVEL (Ok, this one’s on Android)
WHAT IS MOBILE?
“The commoditization of smartphone hardware is just the beginning … of a huge new wave of cheap devices about to invade ou...
Um… I think I’ll justbuild an iPhone app.      kthxbye.
NATIVE  vs. WEB
NATIVE  vs. WEB
© Brad Frost
© Brad Frost
WE DON’T KNOW
EVEN WHEN WE THINK WE KNOW,  WE ARE PROBABLY  WRONG
SO HOW DO WE    COPE?
PROGRESSIVEENHANCEMENT
TECHNOLOGICAL RESTRICTIONS
MCMLXXVII  (that’s 1977)
HTML   CSS
fault tolerancen. a system’s ability to continue tooperate when it encounters andunexpected error.
BROWSERSIGNORE WHAT THEY DON’TUNDERSTAND
I like an escalator becausean escalator can never break,it can only become stairs.             — Mitch Hedberg
an electric toothbrushcan never break, itcan only become atoothbrush.
a dynamic web page cannever break, it can onlybecome a web page.
GRACEFULDEGRADATION
MODERNBROWSERS   OLDER BROWSERS
PROGRESSIVEENHANCEMENT
CONTENT
ACCESSIBILITY
“SPECIAL NEEDS”
“SPECIAL NEEDS”    CAN BE  CONTEXTUAL
PROGRESSIVEGRACEFUL DEGRADATION   ENHANCEMENT
OOOH, SHINY!
PROGRESSIVEENHANCEMENT ISN’T ABOUT  BROWSERS
BROWSERS ANDTECHNOLOGIES COME AND GO
DON’T LOSE SIGHT OF YOUR USERS
User Experience            NEWER                          OLDER                          Browser Age                    Gr...
User Experience             BASIC                                     ADVANCED                       Browser & Device Capa...
User Experience             BASIC                                   ADVANCED                     Browser & Device Capabili...
User Experience                          Semantics             BASIC                                   ADVANCED           ...
User Experience                             Design                          Semantics             BASIC                   ...
User Experience                         Interactivity                             Design                          Semantic...
User Experience                         Accessibility                         Interactivity                             De...
User Experience                               ARIA                          JavaScript                                CSS ...
HTML
HTML5HTMLMicroformats  HTML4
EXAMPLES
PROGRESSIVE ENHANCEMENT & MOBILESemantics 101 <p>HTML5 introduces several <em>really</em> useful elements and a ton of new...
PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML <video poster=”poster.png”>  <source src=”video.m4v”/>  <source src=”video.we...
PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML    <img src=”poster.png” alt=””/>    <ul>     <li><a href="video.m4v">Downloa...
PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML <input type="date" name="dob"/>                   I get it!       I don’t get...
PROGRESSIVE ENHANCEMENT & MOBILEPE with Microformats <section class="vcard">  <figure>    <img class="photo" src="aaron-gu...
PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML & ARIA <header role=”banner”>  <h1><img src="i/logo.png"/></h1>  <nav role=”n...
PROGRESSIVE ENHANCEMENT & MOBILEThese are the droids you seek <span role="button">OK</span> <div role="alert">  <p>Somethi...
PROGRESSIVE ENHANCEMENT & MOBILEParsing errors                                   p{                                     co...
PROGRESSIVE ENHANCEMENT & MOBILEParsing errors                                   p{                                     co...
PROGRESSIVE ENHANCEMENT & MOBILEParsing errors                             p{                               color: red;   ...
PROGRESSIVE ENHANCEMENT & MOBILEParsing errors                             p{                               color: red;   ...
PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p {   color: #ccc;   color: rgba( 0, 0, 0, .5 ); }
PROGRESSIVE ENHANCEMENT & MOBILEParsing errors html[lang] p {   color: #ccc;   color: rgba( 0, 0, 0, .5 ); }
PROGRESSIVE ENHANCEMENT & MOBILEParsing errors @-moz-document url-prefix() {   html[lang] p {     color: #ccc;     color: ...
#intro {  /* Basic Layout */}/* ... */body[id=css-zen-garden] #intro { /* Advanced Layout */}
#intro {  /* Basic Layout */}/* ... */[foo], #intro {  /* Advanced Layout */}
PROGRESSIVE ENHANCEMENT & MOBILEParsing errors @import not-for-IE7-or-below.css screen; @media screen, print, refrigerator...
PROGRESSIVE ENHANCEMENT & MOBILE@Media blocks @media screen {   /* Styles for screen media only */ }
PROGRESSIVE ENHANCEMENT & MOBILE@Media blocks+ @media screen and (max-width:450px) {   /* Styles for screen media when bro...
PROGRESSIVE ENHANCEMENT & MOBILEDon’t do this @media   screen and (min-device-width:1024px)          and (max-width:989px)...
PROGRESSIVE ENHANCEMENT & MOBILEMobile First w/ media queries /* Universal Layout */ @media screen {   /* Styles for all s...
PROGRESSIVE ENHANCEMENT & MOBILEMobile First w/ media queries #hd {   background: url(hd-bg-small.png) repeat-x 50% 50%; }...
PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript
PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript
PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <input class="tweet-counter" value="140" disabled="disabled">
PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <span id="chars_left_notice" class="numeric">  <strong id="status-field...
PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <span class="tweet-counter">140  <b class="hidden"> characters remainin...
PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <span class="tweet-counter">maximum of 140 characters</span> <span clas...
PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA <span aria-live="polite" aria-atomic="true"       class="tweet-c...
PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA
PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA
PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA                                   role="application"            ...
PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA                                   role="tablist"
PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA               role="tab"               aria-selected="true"     ...
PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA                                   role="tab"                    ...
PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA                                   role="tabpanel"               ...
PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA
ARIAJavaScript   CSS  HTMLText & HTTP
Available  now  fromeasy-readers.netor me for150 SEK
Progressive Enhancement         & Mobile                       by Aaron Gustafson                        @AaronGustafson  ...
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Upcoming SlideShare
Loading in...5
×

Progressive Enhancement & Mobile [Funka 2012]

62,465

Published on

The concept of progressive enhancement is the way forward for web design, especially on mobile devices. Aaron Gustafson shows you how the latest techniques - mobile first, responsive design, and adaptive UI - fit in to the process.

Published in: Technology, Design
0 Comments
38 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
62,465
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
276
Comments
0
Likes
38
Embeds 0
No embeds

No notes for slide

Progressive Enhancement & Mobile [Funka 2012]

  1. 1. PROGRESSIVE ENHANCEMENT & MOBILEAaron Gustafson@aarongustafsonslideshare.net/AaronGustafson
  2. 2. BROWSERS ARE A PAIN IN THE ASS
  3. 3. AND THEN THERE’S MOBILE
  4. 4. © Brad Frost
  5. 5. © Brad Frost
  6. 6. WHAT IS MOBILE?
  7. 7. WHAT IS MOBILE?
  8. 8. “There is no WebKit on Mobile — Peter-Paul Koch
  9. 9. WebKit vs. Acid3http://www.quirksmode.org/webkit_mobile.html
  10. 10. Surely there’s platformconsistency?!
  11. 11. “There is no Android — Stephanie Rieger
  12. 12. http://yfrog.com/z/ob5kndj
  13. 13. BUT ANDROIDIS NOT UNIQUE IN THIS
  14. 14. THE CULPRITS? SCREEN SIZE
  15. 15. THE CULPRITS?EMBEDDED VIEWS
  16. 16. THE CULPRITS?BROWSER CHROME
  17. 17. THE CULPRITS? ZOOM LEVEL
  18. 18. THE CULPRITS? ZOOM LEVEL (Ok, this one’s on Android)
  19. 19. WHAT IS MOBILE?
  20. 20. “The commoditization of smartphone hardware is just the beginning … of a huge new wave of cheap devices about to invade our lives—a zombie apocalypse of electronics, if you will. — Scott Jenson
  21. 21. Um… I think I’ll justbuild an iPhone app. kthxbye.
  22. 22. NATIVE vs. WEB
  23. 23. NATIVE vs. WEB
  24. 24. © Brad Frost
  25. 25. © Brad Frost
  26. 26. WE DON’T KNOW
  27. 27. EVEN WHEN WE THINK WE KNOW, WE ARE PROBABLY WRONG
  28. 28. SO HOW DO WE COPE?
  29. 29. PROGRESSIVEENHANCEMENT
  30. 30. TECHNOLOGICAL RESTRICTIONS
  31. 31. MCMLXXVII (that’s 1977)
  32. 32. HTML CSS
  33. 33. fault tolerancen. a system’s ability to continue tooperate when it encounters andunexpected error.
  34. 34. BROWSERSIGNORE WHAT THEY DON’TUNDERSTAND
  35. 35. I like an escalator becausean escalator can never break,it can only become stairs. — Mitch Hedberg
  36. 36. an electric toothbrushcan never break, itcan only become atoothbrush.
  37. 37. a dynamic web page cannever break, it can onlybecome a web page.
  38. 38. GRACEFULDEGRADATION
  39. 39. MODERNBROWSERS OLDER BROWSERS
  40. 40. PROGRESSIVEENHANCEMENT
  41. 41. CONTENT
  42. 42. ACCESSIBILITY
  43. 43. “SPECIAL NEEDS”
  44. 44. “SPECIAL NEEDS” CAN BE CONTEXTUAL
  45. 45. PROGRESSIVEGRACEFUL DEGRADATION ENHANCEMENT
  46. 46. OOOH, SHINY!
  47. 47. PROGRESSIVEENHANCEMENT ISN’T ABOUT BROWSERS
  48. 48. BROWSERS ANDTECHNOLOGIES COME AND GO
  49. 49. DON’T LOSE SIGHT OF YOUR USERS
  50. 50. User Experience NEWER OLDER Browser Age Graceful Degradation
  51. 51. User Experience BASIC ADVANCED Browser & Device Capabilities Progressive Enhancement
  52. 52. User Experience BASIC ADVANCED Browser & Device Capabilities Content
  53. 53. User Experience Semantics BASIC ADVANCED Browser & Device Capabilities Content
  54. 54. User Experience Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  55. 55. User Experience Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  56. 56. User Experience Accessibility Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  57. 57. User Experience ARIA JavaScript CSS HTML BASIC ADVANCED Browser & Device Capabilities Text & HTTP
  58. 58. HTML
  59. 59. HTML5HTMLMicroformats HTML4
  60. 60. EXAMPLES
  61. 61. PROGRESSIVE ENHANCEMENT & MOBILESemantics 101 <p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p> <p>Please fill out the form below. <strong>Note: all fields are required.</strong></p> <p>I like to work with markup languages because <strong>they are simple and easy to read</strong>. They also have that certain <i lang="fr" title="I don’t know what">je ne sais quoi</i>.</p>
  62. 62. PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML <video poster=”poster.png”> <source src=”video.m4v”/> <source src=”video.webm”/> <source src=”video.ogv”/> <img src=”poster.png” alt=””/> <ul> <li><a href="video.m4v">Download MP4</a></li> <li><a href="video.webm">Download WebM</a></li> <li><a href="video ogv">Download Ogg</a></li> </ul> </video>
  63. 63. PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML <img src=”poster.png” alt=””/> <ul> <li><a href="video.m4v">Download MP4</a></li> <li><a href="video.webm">Download WebM</a></li> <li><a href="video ogv">Download Ogg</a></li> </ul>
  64. 64. PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML <input type="date" name="dob"/> I get it! I don’t get it :-(
  65. 65. PROGRESSIVE ENHANCEMENT & MOBILEPE with Microformats <section class="vcard"> <figure> <img class="photo" src="aaron-gustafson.jpg" alt=""/> </figure> <h1 class="fn">Aaron Gustafson</h1> … <p>Aaron … is <b class="role">Group Manager</b> of the <a class="org" href="http://webstandards.org">Web Standards Project (WaSP)</a> ….</p> </section>
  66. 66. PROGRESSIVE ENHANCEMENT & MOBILEPE with HTML & ARIA <header role=”banner”> <h1><img src="i/logo.png"/></h1> <nav role=”navigation”> <ol> <li><a href="#details">Details</a></li> <li><a href="#schedule">Schedule</a></li> <li><a href="#instructors">Instructors</a></li> <li><a href="#lodging">Lodging</a></li> <li><a href="#location">Location</a></li> </ol> </nav> </header>
  67. 67. PROGRESSIVE ENHANCEMENT & MOBILEThese are the droids you seek <span role="button">OK</span> <div role="alert"> <p>Something went wrong.</p> </div> <div role="alertdialog"> <p>Something went wrong.</p> <img src="x.png" alt="dismiss" role="button" /> </div>
  68. 68. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p{ color: red; }
  69. 69. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p{ color: red; }
  70. 70. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p{ color: red; font-weight: bold; }
  71. 71. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p{ color: red; font-weight: bold; }
  72. 72. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
  73. 73. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
  74. 74. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors @-moz-document url-prefix() { html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); } }
  75. 75. #intro { /* Basic Layout */}/* ... */body[id=css-zen-garden] #intro { /* Advanced Layout */}
  76. 76. #intro { /* Basic Layout */}/* ... */[foo], #intro { /* Advanced Layout */}
  77. 77. PROGRESSIVE ENHANCEMENT & MOBILEParsing errors @import not-for-IE7-or-below.css screen; @media screen, print, refrigerator { /* IE will get these rules */ }
  78. 78. PROGRESSIVE ENHANCEMENT & MOBILE@Media blocks @media screen { /* Styles for screen media only */ }
  79. 79. PROGRESSIVE ENHANCEMENT & MOBILE@Media blocks+ @media screen and (max-width:450px) { /* Styles for screen media when browser is 450px wide or below */ }
  80. 80. PROGRESSIVE ENHANCEMENT & MOBILEDon’t do this @media screen and (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), screen and (max-device-width:480px) and (orientation:landscape), screen and (min-device-width:481px) and (orientation:portrait) { /* Layout for narrower desktop (below 990px) or iPhone running iOS 3 (or equivalent) or iPhone running iOS 4 (or equivalent) in “landscape” view or iPad (or equivalent) in “portrait” view */ }
  81. 81. PROGRESSIVE ENHANCEMENT & MOBILEMobile First w/ media queries /* Universal Layout */ @media screen { /* Styles for all screens */ } @media screen and (min-width:481px) { /* Styles for all screens 480px+ width */ } @media screen and (min-width:754px) { /* Styles for all screens 754px+ width */ }
  82. 82. PROGRESSIVE ENHANCEMENT & MOBILEMobile First w/ media queries #hd { background: url(hd-bg-small.png) repeat-x 50% 50%; } #hd .logo a { background: url(logo-small.png) no-repeat 50% 0; display: block; width: 240px; height: 109px; /* … */ } @media screen and (min-width: 481px) { #hd { background: url(hd-bg.png) no-repeat 50% 52px; } #hd .logo a { background-image: url(logo.png); width: 342px; height: 155px; } }
  83. 83. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript
  84. 84. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript
  85. 85. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <input class="tweet-counter" value="140" disabled="disabled">
  86. 86. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>
  87. 87. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span> .hidden { position: absolute; left: −999em; }
  88. 88. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript <span class="tweet-counter">maximum of 140 characters</span> <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>
  89. 89. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA <span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>
  90. 90. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA
  91. 91. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA
  92. 92. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="application" aria-activedescendant="folder-1"
  93. 93. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tablist"
  94. 94. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tab" aria-selected="true" aria-controls="folder-1"
  95. 95. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tab" aria-selected="false" aria-controls="folder-4"
  96. 96. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"
  97. 97. PROGRESSIVE ENHANCEMENT & MOBILEPE with JavaScript & ARIA
  98. 98. ARIAJavaScript CSS HTMLText & HTTP
  99. 99. Available now fromeasy-readers.netor me for150 SEK
  100. 100. Progressive Enhancement & Mobile by Aaron Gustafson @AaronGustafson Further reading: http://adaptivewebdesign.info http://blog.easy-designs.net http://mobilewebbestpractices.com Slides available at http://slideshare.net/AaronGustafson This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 except where otherwise noted flickr Photo Creditshttp://www.flickr.com/photos/aarongustafson/galleries/72157629846428745/
  1. A particular slide catching your eye?

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

×