Fundamental Progressive Enhancement [Web Builder 2.0 - 2008]

Aaron Gustafson

FUNDAMENTALPROGRESSIVE

ENHANCEMENT

WHAT IS PROGRESSIVE

ENHANCEMENT?

FUNDAMENTAL PROGRESSIVE ENHANCEMENT

WEB BUILDER 2.0

Graceful Degradation

NEWER OLDER

Experi

Browser Age

WEB BUILDER 2.0

Progressive Enhancement

BASIC ADVANCED

Experi

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 BUILDER 2.0

XHTML + HTTP only

WEB BUILDER 2.0

XHTML + HTTP only

WEB BUILDER 2.0

JavaScript

XHTML + HTTP only

WEB BUILDER 2.0

JavaScript

XHTML + HTTP only

some JavaScript

some CSS

WEB BUILDER 2.0 14

BASIC ADVANCED

Experi

Browser Capabilities

LEVELS OFSERVICE

LEVELS OFSUPPORT

WEB BUILDER 2.0

Experi

Rise to meet needs

XHTML & HTTP

robust JavaScript

some JavaScript

robust CSS

some CSS

WEB BUILDER 2.0

Experi

Rise to meet needs

XHTML & HTTP

robust JavaScript

some JavaScript

robust CSS

some CSS

WEB BUILDER 2.0

Experi

Rise to meet needs

XHTML & HTTP

robust JavaScript

some JavaScript

robust CSS

some CSS

WEB BUILDER 2.0

Experi

Rise to meet needs

XHTML & HTTP

robust JavaScript

some JavaScript

robust CSS

some CSS

WEB BUILDER 2.0

Experi

Rise to meet needs

XHTML & HTTP

robust JavaScript

some JavaScript

robust CSS

some CSS

WEB BUILDER 2.0

Experi

Rise to meet needs

XHTML & HTTP

robust JavaScript

some JavaScript

robust CSS

some CSS

WEB BUILDER 2.0

Experi

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 BUILDER 2.0 21

type.csslayout.csscolor.cssmain.css

WEB BUILDER 2.0 21

type.css

layout.css color.css

WEB BUILDER 2.0

WEB BUILDER 2.0

WEB BUILDER 2.0

WEB BUILDER 2.0

WEB BUILDER 2.0

WEB BUILDER 2.0

@import 'screen.css';

WEB BUILDER 2.0

@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 BUILDER 2.0 25

<!--[if IE lte 7]>

<![endif]-->

<!--[if IE lte 7]>

<![endif]-->

WEB BUILDER 2.0 25

<!--[if IE lte 7]>

<![endif]-->

<!--[if IE lte 7]>

<![endif]-->

<!--[if IE lte 6]>

<![endif]-->

*:first-child+html

* html

p\roperty: value;

html>/**/body

-property: value;

_property: value;

voice-family: "\"}\"";voice-family:inherit;

WEB BUILDER 2.0 27

Make smart decisions

WEB BUILDER 2.0

<legend>Contact Us</legend>

<p>Send us a message. All fields are required.</p>

<label for="contact-email">Email</label>

<label for="contact-message">Message</label>

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

cols="30"></textarea>

</fieldset>

</form>

WEB BUILDER 2.0

</fieldset>

</form>

WEB BUILDER 2.0

</fieldset>

</form>

WEB BUILDER 2.0 27

Make smart decisionslabel:after {

content: ":";

WITH CSS

QUESTIONS?

inspired?

WITH JAVASCRIPT

proper planning...Photo credit: andyburnfield

...can keep you from looking

foolish

WEB BUILDER 2.0

Consider lala.com

WEB BUILDER 2.0

Without JavaScript

WEB BUILDER 2.0

And looking at the markup...

Photo credit: spike55151

Photo credit: drp

Photo credit: Giando

listen?

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

delegate?or

Photo credit: hebedesign

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

Photo credit: thus spake drake

can get out of hand

WEB BUILDER 2.0

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

No style before its time

becomes

WEB BUILDER 2.0

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

before you

Photo credit: josh-n

WEB BUILDER 2.0

Look for methods

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

WEB BUILDER 2.0

Look for methods

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

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

WEB BUILDER 2.0

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

Look for identified elements

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

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

WEB BUILDER 2.0

Look for objects

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

WEB BUILDER 2.0

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

Look before you leap

window.onload = function(){ if( document.getElementsByTagName && document.getElementById ){

someFunction(); }};

WITH JAVASCRIPT

QUESTIONS?

Photo credit: masstistraction

it’s easier than this

WEB BUILDER 2.0

Example: Tab Interface

Goal: to create a panel-based widget

WEB BUILDER 2.0

Traditional approach

<h1>Pumpkin Pie</h1>

<h2>Overview</h2>

<p>Whether you're hosting a festive party or a casual get-together with

friends, our Pumpkin Pie will make entertaining easy!</p>

</div>

<li><a href="#">Overview</a></li>

<li><a href="#">Ingredients</a></li>

<li><a href="#">Directions</a></li>

<li><a href="#">Nutrition</a></li>

</div>

WEB BUILDER 2.0

<h2>Overview</h2>

</div>

</div>

WEB BUILDER 2.0

<h2>Overview</h2>

</div>

</div>

WEB BUILDER 2.0

<h2>Overview</h2>

</div>

</div>

WEB BUILDER 2.0

Static HTML with no style

WEB BUILDER 2.0

A little typography

WEB BUILDER 2.0

Typography and color

WEB BUILDER 2.0

.tabbed

WEB BUILDER 2.0

The actual source

<h2>Overview</h2>

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

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

<h2>Directions</h2>

</div>

WEB BUILDER 2.0

The actual source

<h2>Overview</h2>

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

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

<h2>Directions</h2>

</div>

WEB BUILDER 2.0

Understanding the flow

WEB BUILDER 2.0

The full experience

QUESTIONS?

WEB BUILDER 2.0

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

Collapsing Form as HTML

WEB BUILDER 2.0

Collapsing Form with CSS

WEB BUILDER 2.0

HTML hooks

WEB BUILDER 2.0

HTML hooks

form.collapsing

WEB BUILDER 2.0

HTML hooks

fieldset.optional

WEB BUILDER 2.0

Understanding the flow

WEB BUILDER 2.0

Collapsing Form with JS

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

Fundamental Progressive Enhancement [Web Builder 2.0 - 2008]

Technology

Transcript of Fundamental Progressive Enhancement [Web Builder 2.0 - 2008]

Whatever happened to Progressive Enhancement?

Progressive Enhancement with Flash

Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]

Graceful degradation & Progressive enhancement

Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]

Progressive Enhancement using CSS3

Progressive Enhancement with JavaScript and CSSe Enhancement With JavaScript and CSS

Fundamental Progressive Enhancement [Web Design World - Seattle 2009]

Fundamental Progressive Enhancement [Web Design World Boston 2008]

Progressive Enhancement using WSGI

Progressive Enhancement & Mobile [Funka 2012]

Progressive Enhancement with JavaScript and Ajax

Progressive enhancement

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)

Context-driven Progressive Enhancement of Mobile Web ...

Designing speed with progressive enhancement @ NY Web Performance meetup

jQuery Mobile: Progressive Enhancement with HTML5

Rocket packs on escalators - stop messing with progressive enhancement

Text First! Progressive Enhancement for Multimedia Content

JavaScript, Progressive Enhancement & Performance