1 / 54

Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]

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.

AaronGustafson
Download Presentation

Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CRAFTING RICH EXPERIENCES with progressive enhancement

  2. progressive enhancement ?

  3. TECHNOLOGICAL RESTRICTIONS

  4. MCMLXXVII

  5. MCMLXXVII (that’s 1977)

  6. HTML CSS

  7. fault tolerance n. a system’s ability to continue to operate when it encounters and unexpected error.

  8. BROWSERS IGNORE WHAT THEY DON’T UNDERSTAND

  9. GRACEFUL DEGRADATION

  10. MODERN BROWSERS OLDER BROWSERS

  11. PROGRESSIVE ENHANCEMENT

  12. CONTENT

  13. ACCESSIBILITY

  14. “SPECIAL NEEDS”

  15. “SPECIAL NEEDS” CAN BE CONTEXTUAL

  16. PROGRESSIVE ENHANCEMENT GRACEFUL DEGRADATION

  17. OOOH SHINY! ,

  18. PROGRESSIVE ENHANCEMENT ISN’T ABOUT BROWSERS

  19. BROWSERS AND TECHNOLOGIES COME AND GO

  20. DON’T LOSE SIGHT OF YOUR USERS

  21. User Experience BASIC ADVANCED Browser Capabilities

  22. User Experience BASIC ADVANCED Browser Capabilities Content

  23. User Experience Browser Capabilities Semantics BASIC ADVANCED Content

  24. User Experience Design Browser Capabilities Semantics BASIC ADVANCED Content

  25. User Experience Interactivity Design Browser Capabilities Semantics BASIC ADVANCED Content

  26. User Experience Accessibility Interactivity Design Browser Capabilities Semantics BASIC ADVANCED Content

  27. User Experience ARIA JavaScript CSS Browser Capabilities HTML BASIC ADVANCED 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 */ }

More Related