CRAFTING RICHEXPERIENCESwith progressive enhancement
progressive enhancement        ?
TECHNOLOGICAL RESTRICTIONS
MCMLXXVII
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
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 OFYOUR USERS
User Experience             BASIC                          ADVANCED                     Browser Capabilities
User Experience             BASIC                          ADVANCED                     Browser Capabilities              ...
User Experience                      Semantics             BASIC                          ADVANCED                     Bro...
User Experience                         Design                      Semantics             BASIC                          A...
User Experience                     Interactivity                         Design                      Semantics           ...
User Experience                     Accessibility                     Interactivity                         Design        ...
User Experience                          ARIA                      JavaScript                           CSS               ...
FOR EXAMPLE
<input type="date" name="dob"/>
<video poster=”poster.png”> <source src=”video.m4v”/> <source src=”video.webm”/> <source src=”video.ogv”/> <img src=”poste...
<header role=”banner”> <h1><img src="i/logo.png"/></h1> <nav role=”navigation”>  <ol>    <li><a href="#details">Details</a...
p {  color: #ccc;  color: rgba( 0, 0, 0, .5 );}
html[lang] p {  color: #ccc;  color: rgba( 0, 0, 0, .5 );}
IE6 & under  MOSe
#intro {  /* Basic Layout */}/* ... */body[id=css-zen-garden] #intro { /* Advanced Layout */}
#intro {  /* Basic Layout */}/* ... */[foo],#intro {  /* Advanced Layout */}
@import not-for-IE7-or-below.css         screen;@media screen, print, refrigerator {  /* IE will get these rules */}
@media  screen and (min-device-width:1024px)         and (max-width:989px),  screen and (max-device-width:480px),  screen ...
ARIAJavaScript   CSS  HTMLText & HTTP
Crafting Rich Experiences with  Progressive Enhancement                 by Aaron Gustafson                 More of the sam...
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Upcoming SlideShare
Loading in...5
×

Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]

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

No Downloads
Views
Total Views
1,725
On Slideshare
0
From Embeds
0
Number of Embeds
0
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
  1. A particular slide catching your eye?

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

×