Progressive Enhancement 2.0 Because the
Web isn't Print Nicholas C. Zakas Presentation Architect, Yahoo!

Who's this guy? Presentation Contributor,
Architect Creator of YUI Test Author Lead Author Contributor Lead Author

@slicknet

A Brief History of Web
Development

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

1993

1994

1995

1996

Now
in
color!

1995

Also
in
color!
1996

"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

"Property of Bri if zombies
attack."

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/

"An escalator can never break;
it can only become stairs." Mitch Hedberg, Comedian http://www.flickr.com/photos/midiman/336647596/ http://www.flickr.com/photos/midiman/336647596/

Behavior
Presentation
Content

JavaScript
CSS
HTML

A-Grade
JavaScript
CSS
HTML

C-Grade
HTML

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/

http://www.flickr.com/photos/drb62/4990651560/
Our pages are slow

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

We became obsessed with identical
experiences across all browsers http://www.flickr.com/photos/joanna8555/5554285729/

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 N (c) web browser : book G R O (d) digital photo : print photo (e) cell phone: text message W

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

We started the analogy in
the wrong spot

Web page : ?

N G Web page :
Printed page R O W

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

Progressive Enhancement 1.0 JavaScript CSS
HTML

Progressive Enhancement 2.0 OMG CSS
OMG JS Nice CSS Nice JS Base CSS Base JS HTML

Chrome OMG CSS Base JS
OMG JS Nice CSS Base JS Nice JS Base CSS Base JS HTML

Firefox OMG JS Nice CSS
Base JS Nice JS Base CSS Base JS HTML

Internet Explorer 9 Nice CSS
Base JS Nice JS Base CSS Base JS HTML

Internet Explorer 6 Base CSS
Base JS HTML

Netscape 4
HTML

New Browser Capabilities Rounded Corners
Drag and Drop Drop Shadows Geolocation Gradients Cross-Domain Ajax Transitions Cross-Domain Messaging Transforms Client-Side Data Storage Multiple Background Images Canvas/WebGL

The best possible experience given
the device capabilities

Awesome! OK OK Bad! Value
Effort

Browser Marketshare 11 8 IE6
IE7 Others 81 Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2

Development Time Spent 40 IE6
& IE7 Others 60 Source: Me

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

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

Rounded Corners Drop Shadows Gradients
Only with CSS

Advanced scripting and behavior Only
with native APIs

Long development time Trying to
make older browsers do things they were never meant to do Too many bugs Slow pages

Older browsers often need *a
lot* more code to do the same thing

Before 1467 bytes <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>

After 566 bytes <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>

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

@slicknetsmom

@slicknetsmom

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

Progressive Enhancement 1.0 JavaScript CSS
HTML

Progressive Enhancement 2.0 OMG CSS
OMG JS Nice CSS Nice JS Base CSS Base JS HTML

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

Don't be horrible

Do be awesome

The End

Etcetera • My blog: www.nczonline.net
• Twitter: @slicknet • These Slides: slideshare.net/nzakas