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

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 [WebVisions 2011]

1,695

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

No Downloads
Views
Total Views
1,695
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
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 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

×