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

3

NEWER OLDER

User

Experi

ence

Browser Age


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

HOW DOESIT WORK?

Photo credit: madam.furie

a little treat for everyone

(viewed another way)


WEB BUILDER 2.0

XHTML + HTTP only

13


WEB BUILDER 2.0

CSS

XHTML + HTTP only

13


WEB BUILDER 2.0

CSS

JavaScript

XHTML + HTTP only

13


WEB BUILDER 2.0

CSS

JavaScript

XHTML + HTTP only

13

some JavaScript

some CSS


WEB BUILDER 2.0 14

BASIC ADVANCED

User

Experi

ence

Browser Capabilities

LEVELS OFSERVICE

LEVELS OFSUPPORT


WEB BUILDER 2.0

User

Experi

ence

Rise to meet needs

16

XHTML & HTTP

robust JavaScript

some JavaScript

robust CSS

some CSS


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


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

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


WEB BUILDER 2.0


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


23


WEB BUILDER 2.0




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

23


WEB BUILDER 2.0




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


23


WEB BUILDER 2.0




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




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




WEB BUILDER 2.0 25








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

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

Make smart decisions


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



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>


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

36


WEB BUILDER 2.0

Without JavaScript

37


WEB BUILDER 2.0

And looking at the markup...

38

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

42

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

44

Photo credit: thus spake drake

can get out of hand

style


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


WEB BUILDER 2.0

No style before its time

47

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

becomes

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


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


WEB BUILDER 2.0

Look for methods

49

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

...}


WEB BUILDER 2.0

Look for methods

50

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

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


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


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


WEB BUILDER 2.0

Look for objects

53

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

...}


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


WEB BUILDER 2.0

Look before you leap

55

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

59

Goal: to create a panel-based widget


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>


WEB BUILDER 2.0


60




<h2>Overview</h2>




...

</div>

...

<ul class="tabs">





</ul>

</div>


</div>


WEB BUILDER 2.0


60




<h2>Overview</h2>




...

</div>

...

<ul class="tabs">





</ul>

</div>

<ul class="tabs">





</ul>


WEB BUILDER 2.0

Static HTML with no style

61


WEB BUILDER 2.0

A little typography

62


WEB BUILDER 2.0

Typography and color

63


WEB BUILDER 2.0


64


WEB BUILDER 2.0


64

.tabbed


WEB BUILDER 2.0

The actual source

65


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


WEB BUILDER 2.0

The actual source

65



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


WEB BUILDER 2.0

Understanding the flow

66


WEB BUILDER 2.0

The full experience

67

QUESTIONS?


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.


WEB BUILDER 2.0

Collapsing Form as HTML

70


WEB BUILDER 2.0

Collapsing Form with CSS

71


WEB BUILDER 2.0


72


WEB BUILDER 2.0


73


WEB BUILDER 2.0

HTML hooks

74


WEB BUILDER 2.0

HTML hooks

74

form.collapsing


WEB BUILDER 2.0

HTML hooks

74

fieldset.optional


WEB BUILDER 2.0

Understanding the flow

75


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

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

http://slideshare.net/AaronGustafson

http://slideshare.net/AaronGustafson




Fundamental Progressive Enhancement [Web Builder 2.0 - 2008]

Technology

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