1 / 151

Progressive EEnhancement [EECI 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 and your mastery of progressive enhancement in ExpressionEngine.

AaronGustafson
Download Presentation

Progressive EEnhancement [EECI 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. Progressive nhancement by Aaron Gustafson @aarongustafson http://slideshare.net/AaronGustafson

  2. ?

  3. TECHNOLOGICAL RESTRICTIONS

  4. MCMLXXVII (that’s 1977)

  5. HTML CSS

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

  7. BROWSERS IGNORE WHAT THEY DON’T UNDERSTAND

  8. GRACEFUL DEGRADATION

  9. MODERN BROWSERS OLDER BROWSERS

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

  29. Content is WHY we build websites

  30. Clear, well-written prose is key.

  31. Don’t put up roadblocks.

  32. Semantics

  33. Progressive EEnhancement Fault tolerance <p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p> <p>Please fill out the form below. <strong>Note: all fields are required.</strong></p> <p>I like to work with markup languages because <strong>they are simple and easy to read</strong>. They also have that certain <i lang="fr" title="I don&#8217;t know what">je ne sais quoi</i>.</p> EECI - October 2011 46

  34. Progressive EEnhancement Fault tolerance HTML5 introduces several really useful elements and a ton of new APIs. Please fill out the form below. Note: all fields are required. I like to work with markup languages because they are simple and easy to read. They also have that certain je ne sais quoi. EECI - October 2011 47

  35. Progressive EEnhancement Fault tolerance <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> EECI - October 2011 48

  36. Progressive EEnhancement Fault tolerance <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> EECI - October 2011 49

More Related