Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]

2,107 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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,107
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]

  1. 1. CRAFTING RICHEXPERIENCESwith progressive enhancement
  2. 2. progressive enhancement ?
  3. 3. TECHNOLOGICAL RESTRICTIONS
  4. 4. MCMLXXVII
  5. 5. MCMLXXVII (that’s 1977)
  6. 6. HTML CSS
  7. 7. fault tolerancen. a system’s ability to continue tooperate when it encounters andunexpected error.
  8. 8. BROWSERSIGNORE WHAT THEY DON’TUNDERSTAND
  9. 9. GRACEFULDEGRADATION
  10. 10. MODERNBROWSERS OLDER BROWSERS
  11. 11. PROGRESSIVEENHANCEMENT
  12. 12. CONTENT
  13. 13. ACCESSIBILITY
  14. 14. “SPECIAL NEEDS”
  15. 15. “SPECIAL NEEDS” CAN BE CONTEXTUAL
  16. 16. PROGRESSIVEGRACEFUL DEGRADATION ENHANCEMENT
  17. 17. OOOH, SHINY!
  18. 18. PROGRESSIVEENHANCEMENT ISN’T ABOUT BROWSERS
  19. 19. BROWSERS ANDTECHNOLOGIES COME AND GO
  20. 20. DON’T LOSE SIGHT OFYOUR USERS
  21. 21. User Experience BASIC ADVANCED Browser Capabilities
  22. 22. User Experience BASIC ADVANCED Browser Capabilities Content
  23. 23. User Experience Semantics BASIC ADVANCED Browser Capabilities Content
  24. 24. User Experience Design Semantics BASIC ADVANCED Browser Capabilities Content
  25. 25. User Experience Interactivity Design Semantics BASIC ADVANCED Browser Capabilities Content
  26. 26. User Experience Accessibility Interactivity Design Semantics BASIC ADVANCED Browser Capabilities Content
  27. 27. User Experience ARIA JavaScript CSS HTML BASIC ADVANCED Browser Capabilities Text & HTTP
  28. 28. FOR EXAMPLE
  29. 29. <input type="date" name="dob"/>
  30. 30. <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>
  31. 31. <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>
  32. 32. p { color: #ccc; color: rgba( 0, 0, 0, .5 );}
  33. 33. html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 );}
  34. 34. IE6 & under MOSe
  35. 35. #intro { /* Basic Layout */}/* ... */body[id=css-zen-garden] #intro { /* Advanced Layout */}
  36. 36. #intro { /* Basic Layout */}/* ... */[foo],#intro { /* Advanced Layout */}
  37. 37. @import not-for-IE7-or-below.css screen;@media screen, print, refrigerator { /* IE will get these rules */}
  38. 38. @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 */}
  39. 39. ARIAJavaScript CSS HTMLText & HTTP
  40. 40. 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 “Drumming circle” by Explore The Bruce “Usability Fail” by soopahgrover “ferris wheel? not yet…” by drcorneilus

×