Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]

6,449 views
6,255 views

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
6,449
On SlideShare
0
From Embeds
0
Number of Embeds
471
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/

×