Fundamental Progressive Enhancement [Web Design World - Seattle 2009]

Aaron Gustafson

FUNDAMENTALPROGRESSIVE

ENHANCEMENT

WHAT IS PROGRESSIVE

ENHANCEMENT?

FUNDAMENTAL PROGRESSIVE ENHANCEMENT

WEB DESIGN WORLD

Graceful Degradation

3

NEWER OLDER

User

Experi

ence

Browser Age


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

HOW DOESIT WORK?

Photo credit: madam.furie

a little treat for everyone

(viewed another way)


WEB DESIGN WORLD

CSS

JavaScript

XHTML + HTTP only

13


WEB DESIGN WORLD

CSS

JavaScript

XHTML + HTTP only

13

some JavaScript

some CSS


WEB DESIGN WORLD 14

BASIC ADVANCED

User

Experi

ence

Browser Capabilities

LEVELS OFSERVICE

LEVELS OFSUPPORT


WEB DESIGN WORLD

User

Experi

ence

Rise to meet needs

16

XHTML & HTTP

robust JavaScript

some JavaScript

robust CSS

some CSS


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


WEB DESIGN WORLD 21

type.csslayout.csscolor.cssmain.css


WEB DESIGN WORLD 21

type.css

layout.css color.css


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" />


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" />


WEB DESIGN WORLD


<link rel="stylesheet" type="text/css" href="layout.css" />


23


WEB DESIGN WORLD




<link rel="stylesheet" type="text/css" href="print.css" media="print" />

23


WEB DESIGN WORLD




<link rel="stylesheet" type="text/css" href="print.css" media="print" />


23


WEB DESIGN WORLD




<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';


WEB DESIGN WORLD




<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


WEB DESIGN WORLD 25




WEB DESIGN WORLD 25








<link rel="stylesheet" type="text/css" href="ie7.css" /><link rel="stylesheet" type="text/css" href="ie7.css" />

WEB DESIGN WORLD 25








<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;


WEB DESIGN WORLD 27

Make smart decisions


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



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>


<input type="text" id="contact-name" name="name" />

</li>

<li>


<input type="text" id="contact-email" name="email" />

</li>

<li>


<textarea id="contact-message" name="message" rows="4"

cols="30"></textarea>

</li>

</ol>

<button type="submit">Send It</button>

</fieldset>

</form>

27






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


WEB DESIGN WORLD

User

Experi

ence

34

XHTML & HTTP

robust JavaScript

some JavaScript

robust CSS

some CSS

XHTML & HTTP

Photo credit: ambery


WEB DESIGN WORLD

Consider lala.com

36


WEB DESIGN WORLD

Without JavaScript

37


WEB DESIGN WORLD

And looking at the markup...

38

Photo credit: spike55151

Photo credit: drp

Photo credit: Giando

listen?


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


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


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;}


WEB DESIGN WORLD

No style before its time

47

<div id="main" class="tabbed">

becomes

<div id="main" class="tabbed-on">


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


WEB DESIGN WORLD

Look for methods

49

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

...}


WEB DESIGN WORLD

Look for methods

50

function someFunction(){ if( !document.getElementsByTagName || !document.getElementById ) return;

/* code that uses document.getElementsByTagName() and document.getElementById() */}


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 */ ...}


WEB DESIGN WORLD

Look for identified elements

52

function someFunction(){ if( !document.getElementById || !document.getElementById( 'content' ) ) return;

// code that requires the presence of #content ...}


WEB DESIGN WORLD

Look for objects

53

function someFunction(){ if( typeof( Prototype ) == 'undefined' ) return; // code that uses Prototype

...}


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 ...}


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


WEB DESIGN WORLD

Example: Tab Interface

59

Goal: to create a panel-based widget


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>


WEB DESIGN WORLD

Static HTML with no style

61


WEB DESIGN WORLD

A little typography

62


WEB DESIGN WORLD

Typography and color

63


WEB DESIGN WORLD


64


WEB DESIGN WORLD


64

.tabbed


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>


WEB DESIGN WORLD

Understanding the flow

66


WEB DESIGN WORLD

The full experience

67

QUESTIONS?


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.


WEB DESIGN WORLD

Collapsing Form as HTML

70


WEB DESIGN WORLD

Collapsing Form with CSS

71


WEB DESIGN WORLD


72


WEB DESIGN WORLD


73


WEB DESIGN WORLD

HTML hooks

74

form.collapsing


WEB DESIGN WORLD

HTML hooks

74

fieldset.optional


WEB DESIGN WORLD

Understanding the flow

75


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

http://creativecommons.org/licenses/by-nc-sa/3.0/us/

http://slideshare.net/AaronGustafson

http://slideshare.net/AaronGustafson




Fundamental Progressive Enhancement [Web Design World - Seattle 2009]

Technology

Transcript of Fundamental Progressive Enhancement [Web Design World - Seattle 2009]