Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
 

Like this? Share it with your network

Share

Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]

on

  • 1,956 views

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 ...

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.

Statistics

Views

Total Views
1,956
Views on SlideShare
1,939
Embed Views
17

Actions

Likes
1
Downloads
23
Comments
0

2 Embeds 17

http://lanyrd.com 16
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011] Presentation Transcript

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