Fundamental Progressive Enhancement [Web Design World Boston 2008]

FUNDAMENTAL
PROGRESSIVE
ENHANCEMENT
Aaron Gustafson

WHAT IS
PROGRESSIVE
ENHANCEMENT?

FUNDAMENTAL PROGRESSIVE ENHANCEMENT

Graceful Degradation
User Experience

NEWER OLDER

Browser Age

WEB DESIGN WORLD 3


Progressive Enhancement
User Experience

BASIC ADVANCED

Browser Capabilities

WEB DESIGN WORLD 4

Photo credit: dansays

but sites do...

a little treat
for everyone

Photo credit: madam.furie


JavaScript
CSS
XHTML + HTTP only

WEB DESIGN WORLD 13


JavaScript
some JavaScript
CSS
some CSS
XHTML + HTTP only
WEB DESIGN WORLD 13


User Experience

BASIC ADVANCED

Browser Capabilities

WEB DESIGN WORLD 14


Rise to meet needs
robust JavaScript
User Experience

some JavaScript

robust CSS

some CSS

XHTML & HTTP

WEB DESIGN WORLD 16


Rely on your baseline
robust JavaScript
User Experience

some JavaScript

robust CSS

some CSS

XHTML & HTTP

WEB DESIGN WORLD 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


layout.css
color.css
main.css
type.css

WEB DESIGN WORLD 21


type.css

layout.css color.css

WEB DESIGN WORLD 21


@import 'screen.css';


WEB DESIGN WORLD 23


@import 'screen.css';screen;
'screen.css' s;
@import 'print.css' print;
@import 'mobile.css' handheld;


WEB DESIGN WORLD 23

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



WEB DESIGN WORLD 25

WEB DESIGN WORLD 25

WEB DESIGN WORLD 25

property: value;
html>/**/body
_property: value;

* html voice-family: quot;quot;}quot;quot;;
-property: value;
voice-family:inherit;

*:ﬁrst-child+html


Make smart decisions

WEB DESIGN WORLD 27


<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Contact Us</legend>
<p>Send us a message. All fields are required.</p>
<ol>
<li>
<label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
</li>
<li>
<label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
</li>
<li>
<label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
cols=quot;30quot;></textarea>
</li>
</ol>
<button type=quot;submitquot;>Send It</button>
</fieldset>
</form>

WEB DESIGN WORLD 27


label:after {
content: quot;:quot;;
}

WEB DESIGN WORLD 27

PROGRESSIVE
ENHANCEMENT
WITH JAVASCRIPT

Photo credit: andyburnﬁeld

proper planning...

...can keep you from looking

foolish


robust JavaScript
User Experience

some JavaScript

robust CSS

some CSS

XHTML & HTTP

WEB DESIGN WORLD 34


Consider lala.com

WEB DESIGN WORLD 36


Without JavaScript

WEB DESIGN WORLD 37


And looking at the markup...

WEB DESIGN WORLD 38

listen?

Photo credit: Giando


Event Listening
window.onload = handleExternalLinks;

function handleExternalLinks(){
var server = document.location.hostname;
var anchors = document.getElementsByTagName(quot;aquot;);
var i, href;
for( i=0; i < anchors.length; i++ ){
href = anchors[i].href;
if( href.indexOf(quot;http://quot; + server) == -1 &&
href.indexOf(quot;https://quot; + server) == -1 ){
// HREF is not a file on my server
anchors[i].onclick = function(){
newWin( this.href );
};
}
}
}

WEB DESIGN WORLD 42

or
delegate?
Photo credit: hebedesign


Event delegation
document.getElementsByTagName( 'body' )[0].onclick = quot;
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 DESIGN WORLD 44

style

can get out of hand
Photo credit: thus spake drake


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 DESIGN WORLD 46


No style before its time
<div id=quot;mainquot; class=quot;tabbedquot;>

becomes
<div id=quot;mainquot; class=quot;tabbed-onquot;>

WEB DESIGN WORLD 47


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 DESIGN WORLD 47

before you
LEAP

Photo credit: josh-n


Look for methods
function someFunction(){
if( !document.getElementsByTagName ) return;
// code that uses document.getElementsByTagName()
...
}

WEB DESIGN WORLD 49


Look for methods
if( !document.getElementsByTagName ||
!document.getElementById ) return;
/* code that uses document.getElementsByTagName()
and document.getElementById() */
}

WEB DESIGN WORLD 50


Look for elements
if( !document.getElementsByTagName ||
!document.getElementsByTagName( 'p' ) ) return;
/* code that uses document.getElementsByTagName()
and requires the presence of a P element */
...
}

WEB DESIGN WORLD 51


Look for identiﬁed elements
if( !document.getElementById ||
!document.getElementById( 'content' ) ) return;
// code that requires the presence of #content
...
}

WEB DESIGN WORLD 52


Look for objects
if( typeof( Prototype ) == 'undefined' ) return;
// code that uses Prototype
...
}

WEB DESIGN WORLD 53


Look for object versions
if( typeof( Prototype ) == 'undefined' ||
parseFloat( Prototype.Version ) < 1.5 ) return;
// code that uses Prototype 1.5 or higher
...
}

WEB DESIGN WORLD 54


Look before you leap
window.onload = function(){
if( document.getElementsByTagName &&
document.getElementById ){
someFunction();
}
};

WEB DESIGN WORLD 55

Photo credit: masstistraction

it’s easier than this


Example: Tab Interface
Goal: to create a panel-based widget

WEB DESIGN WORLD 59


Traditional approach
<h1>Pumpkin Pie</h1>

<div class=quot;containerquot;>
<div class=quot;sectionquot;>
<h2>Overview</h2>
<img src=quot;pie.jpgquot; alt=quot;quot;>
<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=quot;tabsquot;>
<li><a href=quot;#quot;>Overview</a></li>
<li><a href=quot;#quot;>Ingredients</a></li>
<li><a href=quot;#quot;>Directions</a></li>
<li><a href=quot;#quot;>Nutrition</a></li>
</ul>
</div>

WEB DESIGN WORLD 60


Static HTML with no style

WEB DESIGN WORLD 61


A little typography

WEB DESIGN WORLD 62


Typography and color

WEB DESIGN WORLD 63



WEB DESIGN WORLD 64



.tabbed

WEB DESIGN WORLD 64


The actual source
<h1>Pumpkin Pie</h1>

<div class=quot;tabbedquot;>
<h2>Overview</h2>
<img src=quot;pie.jpgquot; alt=quot;quot; />
<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=quot;inchquot;>in</abbr>) unbaked deep dish pie crust</li>
<li>! cup white sugar</li>
<li>1 <abbr title=quot;teaspoonquot;>tsp</abbr> ground cinnamon</li>
...
</ul>

<h2>Directions</h2>
...
</div>

WEB DESIGN WORLD 65


Understanding the ﬂow

WEB DESIGN WORLD 66


The full experience

WEB DESIGN WORLD 67


Example: Collapsing Form
Goal: to create a search form with optional advanced ﬁlters.
By default the optional ﬁlters should be hidden, but users
should be able to show and hide them as they need to.

WEB DESIGN WORLD 69


Collapsing Form as HTML

WEB DESIGN WORLD 70


Collapsing Form with CSS

WEB DESIGN WORLD 71



WEB DESIGN WORLD 72



WEB DESIGN WORLD 73


HTML hooks

form.collapsing
WEB DESIGN WORLD 74


HTML hooks

fieldset.optional
WEB DESIGN WORLD 74


Understanding the ﬂow

WEB DESIGN WORLD 75


Collapsing Form with JS

WEB DESIGN WORLD 76

Slides available at
http://slideshare.net/AaronGustafson
This presentation is licensed under
Creative Commons
Attribution-Noncommercial-Share Alike 3.0
ﬂickr 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 andyburnﬁeld
“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

Fundamental Progressive Enhancement [Web Design World Boston 2008]

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a Fundamental Progressive Enhancement [Web Design World Boston 2008]

Semelhante a Fundamental Progressive Enhancement [Web Design World Boston 2008] (20)

Mais de Aaron Gustafson

Mais de Aaron Gustafson (20)

Último

Último (20)

Fundamental Progressive Enhancement [Web Design World Boston 2008]