Upload
bruce-morrison
View
767
Download
4
Embed Size (px)
DESCRIPTION
Citation preview
Progressive Enhancement
Building accessible web pages or
What is a Turducken?
Bruce MorrisonBrisbane 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="http://www.external.site.com/" class="external">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(){ $("a.external").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 Magazinehttp://www.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it/
• Dev.Operahttp://dev.opera.com/articles/view/graceful-degradation-progressive-enhance/
@brucemorrison