Progressive Enhancement 2.0Because the Web isn't Print

Nicholas C. ZakasApril 16, 2011

Who's this guy?

Presentation Architect

Contributor,Creator of YUI Test

Author Lead Author Contributor Lead Author

@slicknet

(Complaints: @reybango)

Used with permission. Copyright 2010 Xtress

http://www.flickr.com/photos/noelboss/4549392694/

@paul_irish

@slicknetsmom

A Brief History ofWeb Development

http://www.flickr.com/photos/marc_smith/447183492/

1993

1994

1995

1996

Nowin

color!

1995

1996

Alsoin

color!

"Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network."

Tim Berners-Lee, 1996

Graceful Degradation

http://www.digital-web.com/articles/fluid_thinking/

<noscript>

<noscript>Your browser doesn't support JavaScript. Sucks to be you.

Bye.</noscript>

Progressive Enhancement

http://www.alistapart.com/articles/understandingprogressiveenhancement/

http://www.alistapart.com/articles/understandingprogressiveenhancement/

http://www.flickr.com/photos/midiman/336647596/

"An escalator can never break;it can only become stairs."

Mitch Hedberg, Comedian

Behavior

Presentation

Content

JavaScript

CSS

HTML

JavaScript

CSS

HTML

A-Grade

HTML

C-Grade

Progressive Enhancement 1.0

We're having some problems

Development takes too long

http://www.flickr.com/photos/athomeinscottsdale/4507847940/

Too many bugs

http://www.flickr.com/photos/kaibara/4632384645/

Our pages are slow

http://www.flickr.com/photos/drb62/4990651560/

Why?

We got confused

Web page : ?

Web sites look like print

Web page : Printed page

1) WEB PAGE : PRINTED PAGE ::

(a) dairy : diary (b) spider : author (c) web browser : book (d) digital photo : print photo (e) cell phone: text message

http://www.flickr.com/photos/chrisschroeder/4096627359/

Every printed book is exactly the same

http://www.flickr.com/photos/joanna8555/5554285729/

We became obsessed with identical experiencesacross all browsers

http://www.flickr.com/photos/denisdervisevic/5327974794/

People got angry if you suggested otherwise

Quality?

Professional?

Consistency?

Unity of messaging combined with brand identification while

setting user expectations appropriately?

http://xark.typepad.com/my_weblog/2008/01/bullshit-still.html

1) WEB PAGE : PRINTED PAGE ::

(a) dairy : diary (b) spider : author (c) web browser : book (d) digital photo : print photo (e) cell phone: text messageWRONG

http://www.flickr.com/photos/ramdac/377087239/

We started the analogy in the wrong spot

Web page : ?

Web page : Printed page

WRONG

Web browser : Web page

1) WEB BROWSER : WEB PAGE ::

(a) telephone : call (b) computer : email (c) printed book : printed page (d) television : television show (e) mailbox : letter

Old browsers are like black & white TVs

http://www.flickr.com/photos/stevestein1982/4047834684/

New browsers are like HD TVs

http://www.flickr.com/photos/lge/3988988400/

TV already solved this problem

http://www.flickr.com/photos/navdeepraj/504596529/

This would be sillyYet this is what web developers have been doing

http://www.flickr.com/photos/navdeepraj/504596529/

Do web sites need to look exactly the same in every browser?

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Your site SHOULD look different in different browsers

Give users an incentive to upgrade

JavaScript

CSS

HTML

Progressive Enhancement 1.0

Progressive Enhancement 2.0

Base JSBase JSBase JS

OMG CSS OMG JS

Nice CSS Nice JS

Base CSS Base JS

HTML

Chrome

Base JSBase JSBase JS

Base JSBase JSBase JSOMG CSS OMG JS

Base JSBase JSBase JSNice CSS Nice JS

Base CSS Base JS

HTML

Firefox

Base JSBase JSBase JS

OMG JS

Base JSBase JSBase JSNice CSS Nice JS

Base CSS Base JS

HTML

Internet Explorer 9

Base JSBase JSBase JS

Base JSBase JSBase JSNice CSS Nice JS

Base CSS Base JS

HTML

Internet Explorer 6

Base JSBase JSBase JSBase CSS Base JS

HTML

Netscape 4

HTML

New Browser Capabilities

Rounded CornersDrop ShadowsGradientsTransitionsTransformsMultiple Background Images

Drag and DropGeolocationCross-Domain AjaxCross-Domain MessagingClient-Side Data StorageCanvas/WebGL

The best possible experiencegiven the device capabilities

Awesome!

OK

OK

Bad!

Effort

Valu

e

11

8

81

IE6IE7Others

Browser Marketshare

Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2

40

60

IE6 & IE7Others

Development Time Spent

Source: Me

Used with permission. Copyright 2008 BoyShapedBox.http://www.flickr.com/photos/boyshapedbox/2282655473/

http://www.flickr.com/photos/myphotoshopbrushes/3242490894/

Rounded CornersDrop ShadowsGradients

Only with CSS

Advanced scripting andbehavior

Only with nativeAPIs

Trying to make older browsers do things they were never meant to do

Too many bugs

Slow pages

Long development time

Older browsers often need*a lot*

more code to do the same thing

Before

<div class="y-pa-app pa-app-view" id="{$id}-app-view"><div class="pa-app-chrome-topshadow pa-app-chrome-border-color y-pa-ln-open-dk">

<div class="pa-app-chrome-leftcorner y-fp-pg-controls"></div><div class="pa-app-chrome-rightcorner y-fp-pg-controls"></div>

</div><div class="pa-app-chrome-rightshadow">

<div class="pa-app-chrome-content pa-app-chrome-border-color y-pa-bg-open y-pa-ln-open-dk"><div class="pa-app-chrome-hd">

<ul class="pa-nav"><li>

<a role="button" class="pa-close y-fp-pg-controls-nt hide-textindent" href="#close" {$closeBeacon2}><!!>STR.PA.EXPANDED.CLOSE</!!></a>

</li></ul>

</div><div class="pa-app-chrome-bd">

<div class="pa-mod-ctr" id="{$id}-mod-ctr" style="visibility: visible;"></div><div id="{$id}-module-loading-msg" class="y-pa-ln-open-dk pa-module-loading-msg"></div><a role="button" class="pa-close hide-offscreen" href="#close"

{$closeBeacon2}><!!>STR.PA.EXPANDED.CLOSE</!!></a></div>

</div></div><div class="pa-app-chrome-bottomshadow y-fp-pg-grad pa-app-chrome-border-color y-pa-ln-open-dk">

<div class="pa-app-chrome-leftcorner y-fp-pg-controls"></div><div class="pa-app-chrome-rightcorner y-fp-pg-controls"></div>

</div></div>

1467 bytes

After

<div class="pa-app" id="{$id}-app"><button class="do-app-close y-fp-pg-controls-nt hide-textindent" {$closeBeacon2}><!!>STR.PA.EXPANDED.CLOSE</!!></button><div class="pa-app-bd">

<div id="{$id}-mod" class="pa-app-mod"></div><div id="{$id}-module-loading-msg" class="y-pa-ln-open-dk pa-module-loading-msg"></div>

</div> <div class="pa-app-cort"></div><div class="pa-app-corb"></div><button class="do-app-close y-fp-pg-controls-nt hide-textindent" {$closeBeacon2}><!!>STR.PA.EXPANDED.CLOSE</!!></button>

</div>

566 bytes

Less code=

Faster

Won't people notice?

Crying baby! Oh nos!

http://www.flickr.com/photos/tudor/318123668/

What did you see?

Crying baby! Oh nos!

http://www.flickr.com/photos/tudor/318123668/

Crying baby! Oh nos!

http://www.flickr.com/photos/tudor/318123668/

Your users only use one browser

You are not alone

Summary

1) WEB BROWSER : WEB PAGE ::

(a) telephone : call (b) computer : email (c) printed book : printed page (d) television : television show (e) mailbox : letter

JavaScript

CSS

HTML

Progressive Enhancement 1.0

Progressive Enhancement 2.0

Base JSBase JSBase JS

OMG CSS OMG JS

Nice CSS Nice JS

Base CSS Base JS

HTML

http://www.flickr.com/photos/navdeepraj/504596529/

@paul_irish

@slicknetsmom

The End

Etcetera• My blog: www.nczonline.net• Twitter: @slicknet• Rate me: http://spkr8.com/t/7213