Progressive Enhancement
Upcoming SlideShare
Loading in...5

Progressive Enhancement






Total Views
Views on SlideShare
Embed Views



2 Embeds 4 2 2



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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 Progressive Enhancement Presentation Transcript

  • Progressive Enhancement Building accessible web pages  or What is a Turducken? Bruce Morrison Brisbane Web Design - 17 June 2010
  • How things used to be done.
  • Graceful Degradation
  • Complex Simple
  • Progressive Enhancement
  • Simple Complex
  • (x)HTML Content
  • Presentation CSS
  • Behavior JavaScript
  • Turducken! Yum!
  • Core Principles
  • Basic content should be accessible to all browsers
  • Basic functionality should be accessible to all browsers
  • Sparse, semantic markup contains all content
  • Enhanced layout is provided by externally linked CSS
  • Enhanced behavior is provided by unobtrusive, externally linked JavaScript
  • End user browser preferences are respected
  • Pros
      • Greater accessibility
      • Better SEO 
      • Usable site on more browsers and devices 
  • Cons
      • Requires upfront planning
      • Can be difficult to execute
  • Example
  • <a href=&quot;;     class=&quot;external&quot; > An external site </a> Content
  • Presentation a.external {    background:transparent      url(../images/external-link.png)      no-repeat scroll right center;    padding-right:17px; }
  • Behavior $(document).ready(function(){    $(&quot; a.external &quot;).click(function() {;      return false;    }); });
  • Links
      • Wikipedia
      • A List Apart
      • Smashing Magazine
      • Dev.Opera
  • @brucemorrison