FUNDAMENTAL
PROGRESSIVE
ENHANCEMENT
Aaron Gustafson

WHAT IS
PROGRESSIVE
ENHANCEMENT?

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Graceful Degradation
User Experience
NEWER OLDER
Browser Age
WEB BUILDER 2.0 3

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Progressive Enhancement
User Experience
BASIC ADVANCED
Browser Capabilities
WEB BUILDER 2.0 4

it’s about
service

you wouldn’t do this...

Photo credit: dansays
but sites do...

Photo credit: dansays
but sites do...

HOW DOES
IT WORK?

a little treat
for everyone
Photo credit: madam.furie

(viewed another way)

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
XHTML + HTTP only
WEB BUILDER 2.0 13

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
CSS
XHTML + HTTP only
WEB BUILDER 2.0 13

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
JavaScript
CSS
XHTML + HTTP only
WEB BUILDER 2.0 13

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
JavaScript
some JavaScript
CSS
some CSS
XHTML + HTTP only
WEB BUILDER 2.0 13

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
User Experience
BASIC ADVANCED
Browser Capabilities
WEB BUILDER 2.0 14

LEVELS OF
SERVICE

LEVELS OF
SUPPORT

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Rise to meet needs
robust JavaScript
User Experience
some JavaScript
robust CSS
some CSS
XHTML & HTTP
WEB BUILDER 2.0 16

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Rise to meet needs
robust JavaScript
User Experience
some JavaScript
robust CSS
some CSS
XHTML & HTTP
WEB BUILDER 2.0 16

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Rise to meet needs
robust JavaScript
User Experience
some JavaScript
robust CSS
some CSS
XHTML & HTTP
WEB BUILDER 2.0 16

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Rise to meet needs
robust JavaScript
User Experience
some JavaScript
robust CSS
some CSS
XHTML & HTTP
WEB BUILDER 2.0 16

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Rise to meet needs
robust JavaScript
User Experience
some JavaScript
robust CSS
some CSS
XHTML & HTTP
WEB BUILDER 2.0 16

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Rise to meet needs
robust JavaScript
User Experience
some JavaScript
robust CSS
some CSS
XHTML & HTTP
WEB BUILDER 2.0 16

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Rely on your baseline
robust JavaScript
User Experience
some JavaScript
robust CSS
some CSS
XHTML & HTTP
WEB BUILDER 2.0 17

Photo credit: PetitPlat by sk_
you can
still be
creative

every key we press
a!ects user experience
Photo credit: JasonRogers

PROGRESSIVE
ENHANCEMENT
WITH CSS

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
layout.css
color.css
main.css
type.css
WEB BUILDER 2.0 21

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
type.css
layout.css color.css
WEB BUILDER 2.0 21

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=\"stylesheet\" type=\"text/css\" href=\"type.css\" />
href=\"main.css\"
href=\"color.css\" />
WEB BUILDER 2.0 22

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=\"stylesheet\" type=\"text/css\" href=\"type.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"main.css\" />/>
href=\"layout.css\"
<link rel=\"stylesheet\" type=\"text/css\" href=\"color.css\" />
WEB BUILDER 2.0 22

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=\"stylesheet\" type=\"text/css\" href=\"type.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"layout.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"color.css\" />
WEB BUILDER 2.0 23

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=\"stylesheet\" type=\"text/css\" href=\"type.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"layout.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"color.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"print.css\" media=\"print\" />
WEB BUILDER 2.0 23

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=\"stylesheet\" type=\"text/css\" href=\"type.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"layout.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"color.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"print.css\" media=\"print\" />
WEB BUILDER 2.0 23

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
@import 'screen.css';
<link rel=\"stylesheet\" type=\"text/css\" href=\"type.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"layout.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"color.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"print.css\" media=\"print\" />
WEB BUILDER 2.0 23

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
@import 'screen.css';screen;
'screen.css' s;
@import 'print.css' print;
@import 'mobile.css' handheld;
<link rel=\"stylesheet\" type=\"text/css\" href=\"type.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"layout.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"color.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"print.css\" media=\"print\" />
WEB BUILDER 2.0 23

(the browser that wouldn’t die)
Photo credit: oskay

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=\"stylesheet\" type=\"text/css\" href=\"type.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"layout.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"color.css\" />
WEB BUILDER 2.0 25

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=\"stylesheet\" type=\"text/css\" href=\"type.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"layout.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"color.css\" />
<!--[if IE lte 7]>
<link rel=\"stylesheet\" type=\"text/css\" href=\"ie7.css\" />
<![endif]-->
WEB BUILDER 2.0 25

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=\"stylesheet\" type=\"text/css\" href=\"type.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"layout.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"color.css\" />
<!--[if IE lte 7]>
<link rel=\"stylesheet\" type=\"text/css\" href=\"ie7.css\" />
<![endif]-->
<!--[if IE lte 6]>
<link rel=\"stylesheet\" type=\"text/css\" href=\"ie6.css\" />
<![endif]-->
WEB BUILDER 2.0 25

p\\roperty: value;
html>/**/body
_property: value;
* html voice-family: \"\\\"}\\\"\";
-property: value;
voice-family:inherit;
*:first-child+html

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Make smart decisions
WEB BUILDER 2.0 27

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Make smart decisions
<form id=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
<legend>Contact Us</legend>
<p>Send us a message. All fields are required.</p>
<ol>
<li>
<label for=\"contact-name\">Name</label>
<input type=\"text\" id=\"contact-name\" name=\"name\" />
</li>
<li>
<label for=\"contact-email\">Email</label>
<input type=\"text\" id=\"contact-email\" name=\"email\" />
</li>
<li>
<label for=\"contact-message\">Message</label>
<textarea id=\"contact-message\" name=\"message\" rows=\"4\"
cols=\"30\"></textarea>
</li>
</ol>
<button type=\"submit\">Send It</button>
</fieldset>
</form>
WEB BUILDER 2.0 27

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Make smart decisions
<form id=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
<legend>Contact Us</legend>
<p>Send us a message. All fields are required.</p>
<ol>
<li>
<label for=\"contact-name\">Name</label>
<input type=\"text\" id=\"contact-name\" name=\"name\" />
</li>
<li>
<label for=\"contact-email\">Email</label>
<input type=\"text\" id=\"contact-email\" name=\"email\" />
</li>
<li>
<label for=\"contact-message\">Message</label>
<textarea id=\"contact-message\" name=\"message\" rows=\"4\"
cols=\"30\"></textarea>
</li>
</ol>
<button type=\"submit\">Send It</button>
</fieldset>
</form>
WEB BUILDER 2.0 27

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Make smart decisions
<form id=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
<legend>Contact Us</legend>
<p>Send us a message. All fields are required.</p>
<ol>
<li>
<label for=\"contact-name\">Name</label>
<input type=\"text\" id=\"contact-name\" name=\"name\" />
</li>
<li>
<label for=\"contact-email\">Email</label>
<input type=\"text\" id=\"contact-email\" name=\"email\" />
</li>
<li>
<label for=\"contact-message\">Message</label>
<textarea id=\"contact-message\" name=\"message\" rows=\"4\"
cols=\"30\"></textarea>
</li>
</ol>
<button type=\"submit\">Send It</button>
</fieldset>
</form>
WEB BUILDER 2.0 27

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Make smart decisions
label:after {
content: \":\";
}
WEB BUILDER 2.0 27

PROGRESSIVE
ENHANCEMENT
WITH CSS

QUESTIONS?

inspired?

PROGRESSIVE
ENHANCEMENT
WITH JAVASCRIPT

Photo credit: andyburnfield
proper planning...

...can keep you from looking
foolish

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Consider lala.com
WEB BUILDER 2.0 36

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Without JavaScript
WEB BUILDER 2.0 37

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
And looking at the markup...
WEB BUILDER 2.0 38

Photo credit: spike55151

Photo credit: drp

listen?
Photo credit: Giando

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Event Listening
window.onload = handleExternalLinks;
function handleExternalLinks(){
var server = document.location.hostname;
var anchors = document.getElementsByTagName(\"a\");
var i, href;
for( i=0; i < anchors.length; i++ ){
href = anchors[i].href;
if( href.indexOf(\"http://\" + server) == -1 &&
href.indexOf(\"https://\" + server) == -1 ){
// HREF is not a file on my server
anchors[i].onclick = function(){
newWin( this.href );
};
}
}
}
WEB BUILDER 2.0 42

or
delegate?
Photo credit: hebedesign

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Event delegation
document.getElementsByTagName( 'body' )[0].onclick = \"
clickDelegator;
function clickDelegator( e ){
e = ( e ) ? e : event;
var el = e.target || e.srcElement;
// external links
if( el.nodeName.toLowerCase() == 'a' &&
el.getAttribute( 'rel' ) == 'external' ){
newWin( el.href );
}
}
WEB BUILDER 2.0 44

style
can get out of hand
Photo credit: thus spake drake

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Smart styles
ul.TabInterface-tab-list {
position: absolute;
top: 0;
left: 0;
width: 100%;
border-bottom: 3px solid;
margin: 0 0 3px;
}
ul.TabInterface- tab-list li {
border-left: 1px solid;
cursor: pointer;
float: left;
display: inline;
width: 25%;
padding-bottom: 1em;
margin-right: -1px;
}
WEB BUILDER 2.0 46

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
No style before its time
<div id=\"main\" class=\"tabbed\">
becomes
<div id=\"main\" class=\"tabbed-on\">
WEB BUILDER 2.0 47

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
No style before its time
Default Activated
add “-on” to the class .tabbed .tabbed-on
add an activation class .auto-submit .auto-submit.active
change the form of the class .replace-me .replaced
WEB BUILDER 2.0 47

before you
LEAP
Photo credit: josh-n

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Look for methods
function someFunction(){
if( !document.getElementsByTagName ) return;
// code that uses document.getElementsByTagName()
...
}
WEB BUILDER 2.0 49

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Look for methods
function someFunction(){
if( !document.getElementsByTagName ||
!document.getElementById ) return;
/* code that uses document.getElementsByTagName()
and document.getElementById() */
}
WEB BUILDER 2.0 50

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Look for elements
function someFunction(){
if( !document.getElementsByTagName ||
!document.getElementsByTagName( 'p' ) ) return;
/* code that uses document.getElementsByTagName()
and requires the presence of a P element */
...
}
WEB BUILDER 2.0 51

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Look for identified elements
function someFunction(){
if( !document.getElementById ||
!document.getElementById( 'content' ) ) return;
// code that requires the presence of #content
...
}
WEB BUILDER 2.0 52

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Look for objects
function someFunction(){
if( typeof( Prototype ) == 'undefined' ) return;
// code that uses Prototype
...
}
WEB BUILDER 2.0 53

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Look for object versions
function someFunction(){
if( typeof( Prototype ) == 'undefined' ||
parseFloat( Prototype.Version ) < 1.5 ) return;
// code that uses Prototype 1.5 or higher
...
}
WEB BUILDER 2.0 54

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Look before you leap
window.onload = function(){
if( document.getElementsByTagName &&
document.getElementById ){
someFunction();
}
};
WEB BUILDER 2.0 55

PROGRESSIVE
ENHANCEMENT
WITH JAVASCRIPT

QUESTIONS?

Photo credit: masstistraction
it’s easier than this

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Example: Tab Interface
Goal: to create a panel-based widget
WEB BUILDER 2.0 59

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Traditional approach
<h1>Pumpkin Pie</h1>
<div class=\"container\">
<div class=\"section\">
<h2>Overview</h2>
<img src=\"pie.jpg\" alt=\"\">
<p>Whether you're hosting a festive party or a casual get-together with
friends, our Pumpkin Pie will make entertaining easy!</p>
...
</div>
...
<ul class=\"tabs\">
<li><a href=\"#\">Overview</a></li>
<li><a href=\"#\">Ingredients</a></li>
<li><a href=\"#\">Directions</a></li>
<li><a href=\"#\">Nutrition</a></li>
</ul>
</div>
WEB BUILDER 2.0 60

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Traditional approach
<h1>Pumpkin Pie</h1>
<div class=\"container\">
<div class=\"section\">
<h2>Overview</h2>
<img src=\"pie.jpg\" alt=\"\">
<p>Whether you're hosting a festive party or a casual get-together with
friends, our Pumpkin Pie will make entertaining easy!</p>
...
</div>
...
<ul class=\"tabs\">
<li><a href=\"#\">Overview</a></li>
<li><a href=\"#\">Ingredients</a></li>
<li><a href=\"#\">Directions</a></li>
<li><a href=\"#\">Nutrition</a></li>
</ul>
</div>
WEB BUILDER 2.0 60

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Traditional approach
<h1>Pumpkin Pie</h1>
<div class=\"container\">
<div class=\"section\">
<h2>Overview</h2>
<img src=\"pie.jpg\" alt=\"\">
<p>Whether you're hosting a festive party or a casual get-together with
friends, our Pumpkin Pie will make entertaining easy!</p>
...
</div>
...
<ul class=\"tabs\">
<li><a href=\"#\">Overview</a></li>
<li><a href=\"#\">Ingredients</a></li>
<li><a href=\"#\">Directions</a></li>
<li><a href=\"#\">Nutrition</a></li>
</ul>
</div>
WEB BUILDER 2.0 60

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Traditional approach
<h1>Pumpkin Pie</h1>
<div class=\"container\">
<div class=\"section\">
<h2>Overview</h2>
<img src=\"pie.jpg\" alt=\"\">
<p>Whether you're hosting a festive party or a casual get-together with
friends, our Pumpkin Pie will make entertaining easy!</p>
...
</div>
...
<ul class=\"tabs\">
<li><a href=\"#\">Overview</a></li>
<li><a href=\"#\">Ingredients</a></li>
<li><a href=\"#\">Directions</a></li>
<li><a href=\"#\">Nutrition</a></li>
</ul>
</div>
WEB BUILDER 2.0 60

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Static HTML with no style
WEB BUILDER 2.0 61

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
A little typography
WEB BUILDER 2.0 62

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Typography and color
WEB BUILDER 2.0 63

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Static HTML with no style
WEB BUILDER 2.0 64

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Static HTML with no style
.tabbed
WEB BUILDER 2.0 64

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
The actual source
<h1>Pumpkin Pie</h1>
<div class=\"tabbed\">
<h2>Overview</h2>
<img src=\"pie.jpg\" alt=\"\" />
<p>Whether you're hosting a festive party or a casual get-together with friends,
our Pumpkin Pie will make entertaining easy!</p>
...
<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title=\"inch\">in</abbr>) unbaked deep dish pie crust</li>
<li>! cup white sugar</li>
<li>1 <abbr title=\"teaspoon\">tsp</abbr> ground cinnamon</li>
...
</ul>
<h2>Directions</h2>
...
</div>
WEB BUILDER 2.0 65

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
The actual source
<h1>Pumpkin Pie</h1>
<div class=\"tabbed\">
<h2>Overview</h2>
<img src=\"pie.jpg\" alt=\"\" />
<p>Whether you're hosting a festive party or a casual get-together with friends,
our Pumpkin Pie will make entertaining easy!</p>
...
<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title=\"inch\">in</abbr>) unbaked deep dish pie crust</li>
<li>! cup white sugar</li>
<li>1 <abbr title=\"teaspoon\">tsp</abbr> ground cinnamon</li>
...
</ul>
<h2>Directions</h2>
...
</div>
WEB BUILDER 2.0 65

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Understanding the flow
WEB BUILDER 2.0 66

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
The full experience
WEB BUILDER 2.0 67

QUESTIONS?

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Example: Collapsing Form
Goal: to create a search form with optional advanced filters.
By default the optional filters should be hidden, but users
should be able to show and hide them as they need to.
WEB BUILDER 2.0 69

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Collapsing Form as HTML
WEB BUILDER 2.0 70

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Collapsing Form with CSS
WEB BUILDER 2.0 71

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Collapsing Form with CSS
WEB BUILDER 2.0 72

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Collapsing Form with CSS
WEB BUILDER 2.0 73

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
HTML hooks
WEB BUILDER 2.0 74

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
HTML hooks
form.collapsing
WEB BUILDER 2.0 74

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
HTML hooks
fieldset.optional
WEB BUILDER 2.0 74

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Understanding the flow
WEB BUILDER 2.0 75

FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Collapsing Form with JS
WEB BUILDER 2.0 76

QUESTIONS?

FUNDAMENTAL
PROGRESSIVE
ENHANCEMENT
Aaron Gustafson

Slides available at
http://slideshare.net/AaronGustafson
This presentation is licensed under
Creative Commons
Attribution-Noncommercial-Share Alike 3.0
flickr Photo Credits
“MacBook Pro” by dansays
“M&M” by madame.furie
“Six-layered chocolate cake” by PetitPlat
“Day 486 / 365 - Late Night High Level Coding” by JasonRogers
“Leghoul” by oskay
“Risk” by andyburnfield
“fr tom” by ambery
“CORNERSTONE” by spike55151
“Freedom” by drp
“Headphone” by Giando
“Shout, shout” by hebedesign
“The writing is on the wall” by thus spake drake
“Tiger Leaping Gorge - Ram” by josh-n
“some assembly required” by massdistraction