Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Post on 27-Jan-2015
104 Views
Preview:
DESCRIPTION
Transcript
Aaron Gustafson
FUNDAMENTALPROGRESSIVE
ENHANCEMENT
WHAT IS PROGRESSIVE
ENHANCEMENT?
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
Graceful Degradation
3
NEWER OLDER
User
Experi
ence
Browser Age
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
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 DESIGN WORLD
CSS
JavaScript
XHTML + HTTP only
13
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
CSS
JavaScript
XHTML + HTTP only
13
some JavaScript
some CSS
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD 14
BASIC ADVANCED
User
Experi
ence
Browser Capabilities
LEVELS OFSERVICE
LEVELS OFSUPPORT
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
User
Experi
ence
Rise to meet needs
16
XHTML & HTTP
robust JavaScript
some JavaScript
robust CSS
some CSS
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
User
Experi
ence
Rise to meet needs
16
XHTML & HTTP
robust JavaScript
some JavaScript
robust CSS
some CSS
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
User
Experi
ence
Rise to meet needs
16
XHTML & HTTP
robust JavaScript
some JavaScript
robust CSS
some CSS
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
User
Experi
ence
Rise to meet needs
16
XHTML & HTTP
robust JavaScript
some JavaScript
robust CSS
some CSS
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
User
Experi
ence
Rise to meet needs
16
XHTML & HTTP
robust JavaScript
some JavaScript
robust CSS
some CSS
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
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 DESIGN WORLD 21
type.csslayout.csscolor.cssmain.css
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD 21
type.css
layout.css color.css
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
<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 DESIGN WORLD
<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 DESIGN WORLD
<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 DESIGN WORLD
<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 DESIGN WORLD
<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 DESIGN WORLD
<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 DESIGN WORLD
<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 DESIGN WORLD 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 DESIGN WORLD 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 DESIGN WORLD 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 DESIGN WORLD 27
Make smart decisions
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
<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 DESIGN WORLD
<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 DESIGN WORLD
<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 DESIGN WORLD 27
Make smart decisionslabel:after {
content: ":";
}
QUESTIONS?
inspired?
PROGRESSIVE ENHANCEMENT
WITH JAVASCRIPT
proper planning...Photo credit: andyburnfield
...can keep you from looking
foolish
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
User
Experi
ence
34
XHTML & HTTP
robust JavaScript
some JavaScript
robust CSS
some CSS
XHTML & HTTP
Photo credit: ambery
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
Consider lala.com
36
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
Without JavaScript
37
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
And looking at the markup...
38
Photo credit: spike55151
Photo credit: drp
Photo credit: Giando
listen?
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
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 DESIGN WORLD
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 DESIGN WORLD
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 DESIGN WORLD
No style before its time
47
<div id="main" class="tabbed">
becomes
<div id="main" class="tabbed-on">
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
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 DESIGN WORLD
Look for methods
49
function someFunction(){ if( !document.getElementsByTagName ) return; // code that uses document.getElementsByTagName()
...}
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
Look for methods
50
function someFunction(){ if( !document.getElementsByTagName || !document.getElementById ) return;
/* code that uses document.getElementsByTagName() and document.getElementById() */}
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
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 DESIGN WORLD
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 DESIGN WORLD
Look for objects
53
function someFunction(){ if( typeof( Prototype ) == 'undefined' ) return; // code that uses Prototype
...}
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
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 DESIGN WORLD
Look before you leap
55
window.onload = function(){ if( document.getElementsByTagName && document.getElementById ){
someFunction(); }};
QUESTIONS?
Photo credit: masstistraction
it’s easier than this
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
Example: Tab Interface
59
Goal: to create a panel-based widget
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
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 DESIGN WORLD
Static HTML with no style
61
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
A little typography
62
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
Typography and color
63
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
Static HTML with no style
64
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
Static HTML with no style
64
.tabbed
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
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 DESIGN WORLD
Understanding the flow
66
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
The full experience
67
QUESTIONS?
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
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 DESIGN WORLD
Collapsing Form as HTML
70
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
Collapsing Form with CSS
71
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
Collapsing Form with CSS
72
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
Collapsing Form with CSS
73
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
HTML hooks
74
form.collapsing
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
HTML hooks
74
fieldset.optional
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
Understanding the flow
75
FUNDAMENTAL PROGRESSIVE ENHANCEMENT
WEB DESIGN WORLD
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