Your SlideShare is downloading. ×
0
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]
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]
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]
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]
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]

5,643

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 …

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,643
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
81
Comments
0
Likes
19
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×