Aaron Gustafson
FUNDAMENTALPROGRESSIVE
ENHANCEMENT
WHAT IS PROGRESSIVE
ENHANCEMENT?
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Graceful Degradation
3
NEWER OLDER
User
Experi
ence
Browser Age
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Progressive Enhancement
4
BASIC ADVANCED
User
Experi
ence
Browser Capabilities
it’s about service
you wouldn’t do this...
but sites do...Photo credit: dansays
but sites do...Photo credit: dansays
HOW DOESIT WORK?
Photo credit: madam.furie
a little treat for everyone
(viewed another way)
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
XHTML + HTTP only
13
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
CSS
XHTML + HTTP only
13
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
CSS
JavaScript
XHTML + HTTP only
13
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
CSS
JavaScript
XHTML + HTTP only
13
some JavaScript
some CSS
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0 14
BASIC ADVANCED
User
Experi
ence
Browser Capabilities
LEVELS OFSERVICE
LEVELS OFSUPPORT
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
User
Experi
ence
Rise to meet needs
16
XHTML & HTTP
robust JavaScript
some JavaScript
robust CSS
some CSS
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
User
Experi
ence
Rise to meet needs
16
XHTML & HTTP
robust JavaScript
some JavaScript
robust CSS
some CSS
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
User
Experi
ence
Rise to meet needs
16
XHTML & HTTP
robust JavaScript
some JavaScript
robust CSS
some CSS
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
User
Experi
ence
Rise to meet needs
16
XHTML & HTTP
robust JavaScript
some JavaScript
robust CSS
some CSS
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
User
Experi
ence
Rise to meet needs
16
XHTML & HTTP
robust JavaScript
some JavaScript
robust CSS
some CSS
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
User
Experi
ence
Rise to meet needs
16
XHTML & HTTP
robust JavaScript
some JavaScript
robust CSS
some CSS
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
User
Experi
ence
17
XHTML & HTTP
robust JavaScript
some JavaScript
robust CSS
some CSS
Rely on your baseline
Photo credit: PetitPlat by sk_
you canstill be
creative
every key we pressa!ects user experience
Photo credit: JasonRogers
PROGRESSIVE ENHANCEMENT
WITH CSS
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0 21
type.csslayout.csscolor.cssmain.css
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0 21
type.css
layout.css color.css
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
<link rel="stylesheet" type="text/css" href="type.css" /><link rel="stylesheet" type="text/css" href="color.css" />
22
<link rel="stylesheet" type="text/css" href="main.css" />
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
<link rel="stylesheet" type="text/css" href="type.css" />
<link rel="stylesheet" type="text/css" href="color.css" />
22
<link rel="stylesheet" type="text/css" href="main.css" /><link rel="stylesheet" type="text/css" href="layout.css" />
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
<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" />
23
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
<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" />
23
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
<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" />
<link rel="stylesheet" type="text/css" href="layout.css" />
23
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
<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" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />
23
@import 'screen.css';
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
<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" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />
23
@import 'screen.css';@import 'screen.css' s; screen;
@import 'print.css' print;
@import 'mobile.css' handheld;
(the browser that wouldn’t die)Photo credit: oskay
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0 25
<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" />
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0 25
<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]>
<![endif]-->
<!--[if IE lte 7]>
<![endif]-->
<link rel="stylesheet" type="text/css" href="ie7.css" /><link rel="stylesheet" type="text/css" href="ie7.css" />
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0 25
<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]>
<![endif]-->
<!--[if IE lte 7]>
<![endif]-->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<!--[if IE lte 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="ie7.css" />
*:first-child+html
* html
p\roperty: value;
html>/**/body
-property: value;
_property: value;
voice-family: "\"}\"";voice-family:inherit;
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0 27
Make smart decisions
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
<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>
27
Make smart decisions
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
<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>
27
Make smart decisions
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
<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>
27
Make smart decisions
<label for="contact-name">Name</label>
<label for="contact-email">Email</label>
<label for="contact-message">Message</label>
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0 27
Make smart decisionslabel:after {
content: ":";
}
PROGRESSIVE ENHANCEMENT
WITH CSS
QUESTIONS?
inspired?
PROGRESSIVE ENHANCEMENT
WITH JAVASCRIPT
proper planning...Photo credit: andyburnfield
...can keep you from looking
foolish
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Consider lala.com
36
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Without JavaScript
37
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
And looking at the markup...
38
Photo credit: spike55151
Photo credit: drp
Photo credit: Giando
listen?
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
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 );
}; } }}
Event Listening
42
delegate?or
Photo credit: hebedesign
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
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 ); }}
Event delegation
44
Photo credit: thus spake drake
can get out of hand
style
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Smart styles
46
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;}
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
No style before its time
47
<div id="main" class="tabbed">
becomes
<div id="main" class="tabbed-on">
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
No style before its time
47
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
before you
LEAP
Photo credit: josh-n
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Look for methods
49
function someFunction(){ if( !document.getElementsByTagName ) return; // code that uses document.getElementsByTagName()
...}
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Look for methods
50
function someFunction(){ if( !document.getElementsByTagName || !document.getElementById ) return;
/* code that uses document.getElementsByTagName() and document.getElementById() */}
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Look for elements
51
function someFunction(){ if( !document.getElementsByTagName || !document.getElementsByTagName( 'p' ) ) return;
/* code that uses document.getElementsByTagName() and requires the presence of a P element */ ...}
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Look for identified elements
52
function someFunction(){ if( !document.getElementById || !document.getElementById( 'content' ) ) return;
// code that requires the presence of #content ...}
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Look for objects
53
function someFunction(){ if( typeof( Prototype ) == 'undefined' ) return; // code that uses Prototype
...}
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Look for object versions
54
function someFunction(){ if( typeof( Prototype ) == 'undefined' || parseFloat( Prototype.Version ) < 1.5 ) return;
// code that uses Prototype 1.5 or higher ...}
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Look before you leap
55
window.onload = function(){ if( document.getElementsByTagName && document.getElementById ){
someFunction(); }};
PROGRESSIVE ENHANCEMENT
WITH JAVASCRIPT
QUESTIONS?
Photo credit: masstistraction
it’s easier than this
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Example: Tab Interface
59
Goal: to create a panel-based widget
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Traditional approach
60
<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>
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Traditional approach
60
<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>
<div class="container">
</div>
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Traditional approach
60
<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>
<div class="section">
</div>
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Traditional approach
60
<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>
<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>
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Static HTML with no style
61
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
A little typography
62
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Typography and color
63
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Static HTML with no style
64
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Static HTML with no style
64
.tabbed
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
The actual source
65
<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>
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
The actual source
65
<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>
<div class="tabbed">
</div>
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Understanding the flow
66
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
The full experience
67
QUESTIONS?
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Example: Collapsing Form
69
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.
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Collapsing Form as HTML
70
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Collapsing Form with CSS
71
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Collapsing Form with CSS
72
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Collapsing Form with CSS
73
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
HTML hooks
74
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
HTML hooks
74
form.collapsing
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
HTML hooks
74
fieldset.optional
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Understanding the flow
75
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB BUILDER 2.0
Collapsing Form with JS
76
QUESTIONS?
Aaron Gustafson
FUNDAMENTALPROGRESSIVE
ENHANCEMENT
Slides available athttp://slideshare.net/AaronGustafson
This presentation is licensed underCreative 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
Top Related