Progressive Enhancement
Upcoming SlideShare
Loading in...5
×
 

Progressive Enhancement

on

  • 728 views

 

Statistics

Views

Total Views
728
Views on SlideShare
724
Embed Views
4

Actions

Likes
0
Downloads
1
Comments
0

2 Embeds 4

http://www.slideshare.net 2
http://www.linkedin.com 2

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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;http://www.external.site.com/&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() {      window.open(this.href);      return false;    }); });
  • 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/
  • @brucemorrison