Progressive enhancement is an approach to web development that builds accessible web pages by starting with basic content and functionality that work for all users and then is enhanced for users with more advanced browsers and devices. The core principles are to provide basic content accessible to all browsers, basic functionality to all browsers, and then enhance layout with CSS and behavior with JavaScript while respecting user preferences. The benefits are greater accessibility, better search engine optimization, and a usable site for more browsers and devices, though it requires upfront planning and can be difficult to execute.

1. Progressive Enhancement Building accessible web pages or What is a Turducken? Bruce Morrison Brisbane Web Design - 17 June 2010

2. How things used to be done.

3. Graceful Degradation

4. Complex Simple

6. Progressive Enhancement

7. Simple Complex

8. (x)HTML Content

9. Presentation CSS

10. Behavior JavaScript

11. Turducken! Yum!

12. Core Principles

13. Basic content should be accessible to all browsers

14. Basic functionality should be accessible to all browsers

15. Sparse, semantic markup contains all content

16. Enhanced layout is provided by externally linked CSS

17. Enhanced behavior is provided by unobtrusive, externally linked JavaScript

18. End user browser preferences are respected

19. Pros

20. Greater accessibility Better SEO Usable site on more browsers and devices

21. Cons

22. Requires upfront planning Can be difficult to execute

23. Example

24. <a href=&quot;http://www.external.site.com/&quot; class=&quot;external&quot; > An external site </a> Content

25. Presentation a.external { background:transparent url(../images/external-link.png) no-repeat scroll right center; padding-right:17px; }

26. Behavior $(document).ready(function(){ $(&quot; a.external &quot;).click(function() { window.open(this.href); return false; }); });

27. Links Wikipedia http://en.wikipedia.org/wiki/Progressive_enhancement A List Apart http://www.alistapart.com/articles/understandingprogressiveenhancement/ Smashing Magazine http://www.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it/ Dev.Opera http://dev.opera.com/articles/view/graceful-degradation-progressive-enhance/

28. @brucemorrison