progressive enhancement

28
Progressive Enhancement Building accessible web pages or What is a Turducken? Bruce Morrison Brisbane Web Design - 17 June 2010

Upload: bruce-morrison

Post on 11-Nov-2014

767 views

Category:

Technology


4 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Progressive Enhancement

Progressive Enhancement

Building accessible web pages or

What is a Turducken?

Bruce MorrisonBrisbane Web Design - 17 June 2010

Page 2: Progressive Enhancement

How things used to be done.

Page 3: Progressive Enhancement

Graceful Degradation

Page 4: Progressive Enhancement

Complex

Simple

Page 5: Progressive Enhancement
Page 6: Progressive Enhancement

Progressive Enhancement

Page 7: Progressive Enhancement

Simple

Complex

Page 8: Progressive Enhancement

(x)HTML

Content

Page 9: Progressive Enhancement

Presentation

CSS

Page 10: Progressive Enhancement

Behavior

JavaScript

Page 11: Progressive Enhancement

Turducken!

Yum!

Page 12: Progressive Enhancement

Core Principles

Page 13: Progressive Enhancement

Basic content should be accessible to all browsers

Page 14: Progressive Enhancement

Basic functionality should be accessible to all browsers

Page 15: Progressive Enhancement

Sparse, semantic markup contains all content

Page 16: Progressive Enhancement

Enhanced layout is provided by externally linked CSS

Page 17: Progressive Enhancement

Enhanced behavior is provided by unobtrusive, externally linked JavaScript

Page 18: Progressive Enhancement

End user browser preferences are respected

Page 19: Progressive Enhancement

Pros

Page 20: Progressive Enhancement

•Greater accessibility•Better SEO •Usable site on more browsers and devices 

Page 21: Progressive Enhancement

Cons

Page 22: Progressive Enhancement

•Requires upfront planning

•Can be difficult to execute

Page 23: Progressive Enhancement

Example

Page 24: Progressive Enhancement

<a href="http://www.external.site.com/"    class="external">An external site</a>

Content

Page 25: Progressive Enhancement

Presentation

a.external {  background:transparent    url(../images/external-link.png)    no-repeat scroll right center;  padding-right:17px;}

Page 26: Progressive Enhancement

Behavior

$(document).ready(function(){  $("a.external").click(function() {    window.open(this.href);    return false;  });});

Page 27: Progressive Enhancement

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/

Page 28: Progressive Enhancement

@brucemorrison