Progressive Enhancement


Published on

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

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Who has Heard of progressive enhancement? Heard of graceful degradation? Remembers the browsers wars and building for IE first and then making it look ok on other browsers? Knows what a turducken is?
  • First a look at how things used to be done.
  • Sounds kind of nice but believe it is wasn't! Build your site to work in the most popular browser (IE) then make it work in other browsers 
  • Created a finished product then retro fit to work in other browsers
  • Ask users to upgrage their browser Best viewed in IE5 Text only alternative site
  • The term Progressive enhancement was coined Steven Champeon in 2003  Attempts to create websites that "work" on the widest number of browser platforms older browsers mobile devices
  • Reverse of GD Start simple and add complexity
  • Content is marked up with  good semantic (x)HTML
  • Add presentation with CSS
  • Add behavior with JavaScript
  • The base layer is the xHTML (chicken) Add the presentation using CSS (duck) Add and behaviors/interaction using JavaScript (turkey)
  • There are 6 core principles of PE
  • End user browser preferences are respected
  • Say we want external links to be indicated as such and open in a new window when clicked.
  • Linked into the HTML There are CSS selectors now that 
  • Linked into the HTML
  • Linked into the HTML
  • 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;;     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() {;      return false;    }); });
    26. 27. Links <ul><ul><li>Wikipedia </li></ul></ul><ul><ul><li>A List Apart </li></ul></ul><ul><ul><li>Smashing Magazine </li></ul></ul><ul><ul><li>Dev.Opera </li></ul></ul>
    27. 28. @brucemorrison