Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive Enhancement

760 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Progressive Enhancement

  1. 1. Progressive Enhancement Building accessible web pages  or What is a Turducken? Bruce Morrison Brisbane Web Design - 17 June 2010
  2. 2. How things used to be done.
  3. 3. Graceful Degradation
  4. 4. Complex Simple
  5. 6. Progressive Enhancement
  6. 7. Simple Complex
  7. 8. (x)HTML Content
  8. 9. Presentation CSS
  9. 10. Behavior JavaScript
  10. 11. Turducken! Yum!
  11. 12. Core Principles
  12. 13. Basic content should be accessible to all browsers
  13. 14. Basic functionality should be accessible to all browsers
  14. 15. Sparse, semantic markup contains all content
  15. 16. Enhanced layout is provided by externally linked CSS
  16. 17. Enhanced behavior is provided by unobtrusive, externally linked JavaScript
  17. 18. End user browser preferences are respected
  18. 19. Pros
  19. 20. <ul><ul><li>Greater accessibility </li></ul></ul><ul><ul><li>Better SEO  </li></ul></ul><ul><ul><li>Usable site on more browsers and devices  </li></ul></ul>
  20. 21. Cons
  21. 22. <ul><ul><li>Requires upfront planning </li></ul></ul><ul><ul><li>Can be difficult to execute </li></ul></ul>
  22. 23. Example
  23. 24. <a href=&quot;http://www.external.site.com/&quot;     class=&quot;external&quot; > An external site </a> Content
  24. 25. Presentation a.external {    background:transparent      url(../images/external-link.png)      no-repeat scroll right center;    padding-right:17px; }
  25. 26. Behavior $(document).ready(function(){    $(&quot; a.external &quot;).click(function() {      window.open(this.href);      return false;    }); });
  26. 27. Links <ul><ul><li>Wikipedia  http://en.wikipedia.org/wiki/Progressive_enhancement </li></ul></ul><ul><ul><li>A List Apart http://www.alistapart.com/articles/understandingprogressiveenhancement/ </li></ul></ul><ul><ul><li>Smashing Magazine http://www.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it/ </li></ul></ul><ul><ul><li>Dev.Opera http://dev.opera.com/articles/view/graceful-degradation-progressive-enhance/ </li></ul></ul>
  27. 28. @brucemorrison

×