CRAFTING RICH     EXPERIENCES     with progressive enhancementAaron Gustafson@aarongustafsonslideshare.net/AaronGustafson
progressive enhancement        ?
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.
DIES IST UMSTÄNDLICH
TECHNOLOGICAL RESTRICTIONS
MCMLXXVII
MCMLXXVII  (that’s 1977)
HTML   CSS
fault tolerancen. a system’s ability to continue tooperate when it encounters anunexpected error.
BROWSERSIGNORE WHAT THEY DON’TUNDERSTAND
GRACEFULDEGRADATION
MODERNBROWSERS   OLDER BROWSERS
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 OFYOUR 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
BEYOND TELLERRAND 2011PE with HTML <video poster=”poster.png”>  <source src=”video.m4v”/>  <source src=”video.webm”/>  <so...
BEYOND TELLERRAND 2011PE with HTML    <img src=”poster.png” alt=””/>    <ul>     <li><a href="video.m4v">Download MP4</a><...
BEYOND TELLERRAND 2011PE with HTML <input type="date" name="dob"/>                   I get it!       I don’t get it :-(
BEYOND TELLERRAND 2011PE with CSS p {   color: #ccc;   color: rgba( 0, 0, 0, .5 ); }
BEYOND TELLERRAND 2011PE with CSS html[lang] p {   color: #ccc;   color: rgba( 0, 0, 0, .5 ); }
IE6 & under  MOSe
BEYOND TELLERRAND 2011Fault tolerance #intro {   /* Basic Layout */ } /* ... */ body[id=css-zen-garden] #intro {  /* Advan...
BEYOND TELLERRAND 2011Fault tolerance #intro {   /* Basic Layout */ } /* ... */ [foo], #intro {   /* Advanced Layout */ }
BEYOND TELLERRAND 2011PE with CSS @import not-for-IE7-or-below.css          screen; @media screen, print, refrigerator {  ...
BEYOND TELLERRAND 2011PE with CSS @media   screen and (min-device-width:1024px)          and (max-width:989px),   screen a...
BEYOND TELLERRAND 2011PE with HTML & ARIA <header role=”banner”>  <h1><img src="i/logo.png"/></h1>  <nav role=”navigation”...
BEYOND TELLERRAND 2011PE with JavaScript
BEYOND TELLERRAND 2011PE with JavaScript
BEYOND TELLERRAND 2011PE with JavaScript <input class="tweet-counter" value="140" disabled="disabled">
BEYOND TELLERRAND 2011PE with JavaScript <span id="chars_left_notice" class="numeric">  <strong id="status-field-char-coun...
BEYOND TELLERRAND 2011PE with JavaScript <span class="tweet-counter">140  <b class="hidden"> characters remaining</b></spa...
BEYOND TELLERRAND 2011PE with JavaScript <span class="tweet-counter">maximum of 140 characters</span> <span class="tweet-c...
BEYOND TELLERRAND 2011PE with JavaScript & ARIA <span aria-live="polite" aria-atomic="true"       class="tweet-counter">14...
BEYOND TELLERRAND 2011PE with JavaScript & ARIA
BEYOND TELLERRAND 2011PE with JavaScript & ARIA
BEYOND TELLERRAND 2011PE with JavaScript & ARIA                         role="application"                         aria-ac...
BEYOND TELLERRAND 2011PE with JavaScript & ARIA                         role="tablist"
BEYOND TELLERRAND 2011PE with JavaScript & ARIA               role="tab"               aria-selected="true"               ...
BEYOND TELLERRAND 2011PE with JavaScript & ARIA                         role="tab"                         aria-selected="...
BEYOND TELLERRAND 2011PE with JavaScript & ARIA                         role="tabpanel"                         aria-hidde...
BEYOND TELLERRAND 2011PE with JavaScript & ARIA
ARIAJavaScript   CSS  HTMLText & HTTP
Available now from    easy-readers.net     or Kelly
Crafting Rich Experiences with  Progressive Enhancement                        by Aaron Gustafson                        M...
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Upcoming SlideShare
Loading in...5
×

Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]

5,725

Published on

If you’ve been working on the web for any amount of time, you’ve likely heard (or even used) the term “progressive enhancement” before. As you probably know, it is the gold standard of how to approach web design. But what is progressive enhancement really? What does it mean? How does it work? And how does it fit into our workflow in a time of rapidly evolving languages and browsers? In this session, Aaron Gustafson will answer all of these questions and provide concrete takeaways that will help you improve your web design skills.

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

No Downloads
Views
Total Views
5,725
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
82
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide

Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]

  1. 1. CRAFTING RICH EXPERIENCES with progressive enhancementAaron Gustafson@aarongustafsonslideshare.net/AaronGustafson
  2. 2. progressive enhancement ?
  3. 3. I like an escalator becausean escalator can never break,it can only become stairs. — Mitch Hedberg
  4. 4. an electric toothbrushcan never break, itcan only become atoothbrush.
  5. 5. a dynamic web page cannever break, it can onlybecome a web page.
  6. 6. DIES IST UMSTÄNDLICH
  7. 7. TECHNOLOGICAL RESTRICTIONS
  8. 8. MCMLXXVII
  9. 9. MCMLXXVII (that’s 1977)
  10. 10. HTML CSS
  11. 11. fault tolerancen. a system’s ability to continue tooperate when it encounters anunexpected error.
  12. 12. BROWSERSIGNORE WHAT THEY DON’TUNDERSTAND
  13. 13. GRACEFULDEGRADATION
  14. 14. MODERNBROWSERS OLDER BROWSERS
  15. 15. MODERNBROWSERS OLDER BROWSERS
  16. 16. PROGRESSIVEENHANCEMENT
  17. 17. CONTENT
  18. 18. ACCESSIBILITY
  19. 19. “SPECIAL NEEDS”
  20. 20. “SPECIAL NEEDS” CAN BE CONTEXTUAL
  21. 21. PROGRESSIVEGRACEFUL DEGRADATION ENHANCEMENT
  22. 22. OOOH, SHINY!
  23. 23. PROGRESSIVEENHANCEMENT ISN’T ABOUT BROWSERS
  24. 24. BROWSERS ANDTECHNOLOGIES COME AND GO
  25. 25. DON’T LOSE SIGHT OFYOUR USERS
  26. 26. User Experience NEWER OLDER Browser Age Graceful Degradation
  27. 27. User Experience BASIC ADVANCED Browser & Device Capabilities Progressive Enhancement
  28. 28. User Experience BASIC ADVANCED Browser & Device Capabilities Content
  29. 29. User Experience Semantics BASIC ADVANCED Browser & Device Capabilities Content
  30. 30. User Experience Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  31. 31. User Experience Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  32. 32. User Experience Accessibility Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
  33. 33. User Experience ARIA JavaScript CSS HTML BASIC ADVANCED Browser & Device Capabilities Text & HTTP
  34. 34. HTML
  35. 35. HTML5HTMLMicroformats HTML4
  36. 36. EXAMPLES
  37. 37. BEYOND TELLERRAND 2011PE 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>
  38. 38. BEYOND TELLERRAND 2011PE 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>
  39. 39. BEYOND TELLERRAND 2011PE with HTML <input type="date" name="dob"/> I get it! I don’t get it :-(
  40. 40. BEYOND TELLERRAND 2011PE with CSS p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
  41. 41. BEYOND TELLERRAND 2011PE with CSS html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
  42. 42. IE6 & under MOSe
  43. 43. BEYOND TELLERRAND 2011Fault tolerance #intro { /* Basic Layout */ } /* ... */ body[id=css-zen-garden] #intro { /* Advanced Layout */ }
  44. 44. BEYOND TELLERRAND 2011Fault tolerance #intro { /* Basic Layout */ } /* ... */ [foo], #intro { /* Advanced Layout */ }
  45. 45. BEYOND TELLERRAND 2011PE with CSS @import not-for-IE7-or-below.css screen; @media screen, print, refrigerator { /* IE will get these rules */ }
  46. 46. BEYOND TELLERRAND 2011PE with CSS @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 */ }
  47. 47. BEYOND TELLERRAND 2011PE 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>
  48. 48. BEYOND TELLERRAND 2011PE with JavaScript
  49. 49. BEYOND TELLERRAND 2011PE with JavaScript
  50. 50. BEYOND TELLERRAND 2011PE with JavaScript <input class="tweet-counter" value="140" disabled="disabled">
  51. 51. BEYOND TELLERRAND 2011PE with JavaScript <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>
  52. 52. BEYOND TELLERRAND 2011PE with JavaScript <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span> .hidden { position: absolute; left: −999em; }
  53. 53. BEYOND TELLERRAND 2011PE with JavaScript <span class="tweet-counter">maximum of 140 characters</span> <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>
  54. 54. BEYOND TELLERRAND 2011PE with JavaScript & ARIA <span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>
  55. 55. BEYOND TELLERRAND 2011PE with JavaScript & ARIA
  56. 56. BEYOND TELLERRAND 2011PE with JavaScript & ARIA
  57. 57. BEYOND TELLERRAND 2011PE with JavaScript & ARIA role="application" aria-activedescendant="folder-1"
  58. 58. BEYOND TELLERRAND 2011PE with JavaScript & ARIA role="tablist"
  59. 59. BEYOND TELLERRAND 2011PE with JavaScript & ARIA role="tab" aria-selected="true" aria-controls="folder-1"
  60. 60. BEYOND TELLERRAND 2011PE with JavaScript & ARIA role="tab" aria-selected="false" aria-controls="folder-4"
  61. 61. BEYOND TELLERRAND 2011PE with JavaScript & ARIA role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"
  62. 62. BEYOND TELLERRAND 2011PE with JavaScript & ARIA
  63. 63. ARIAJavaScript CSS HTMLText & HTTP
  64. 64. Available now from easy-readers.net or Kelly
  65. 65. Crafting Rich Experiences with Progressive Enhancement by Aaron Gustafson More of the same: http://adaptivewebdesign.info http://easy-designs.net http://easy-reader.net http://aaron-gustafson.com Slides available at http://slideshare.net/AaronGustafson This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 flickr Photo Credits http://www. ickr.com/photos/aarongustafson/galleries/72157628049759763/
  1. A particular slide catching your eye?

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

×