progressive enhancement 2.0 (conference agnostic)

Progressive Enhancement 2.0Because the Web isn't Print

Nicholas C. ZakasPresentation Architect, Yahoo!

Who's this guy?

Presentation Architect

Contributor,Creator of YUI Test

Author Lead Author Contributor Lead Author

@slicknet

A Brief History ofWeb Development

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

Nowin

color!

Nowin

color!

1996

Alsoin

color!

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

"Property of Bri ifzombies attack."

"Property of Bri ifzombies attack."

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

Progressive Enhancement

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

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

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

Mitch Hedberg, Comedian

BehaviorBehavior

PresentationPresentation

ContentContent

JavaScriptJavaScript

CSSCSS

HTMLHTML


CSSCSS

HTMLHTML

A-Grade

HTMLHTML

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/

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


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


CSSCSS

HTMLHTML



Base JSBase JSBase JSBase JSBase JSBase JS

OMG CSSOMG CSS OMG JSOMG JS

Nice CSSNice CSS Nice JSNice JS

Base CSSBase CSS Base JSBase JS

HTMLHTML

Chrome


Base JSBase JSBase JSBase JSBase JSBase JSOMG CSSOMG CSS OMG JSOMG JS

Base JSBase JSBase JSBase JSBase JSBase JSNice CSSNice CSS Nice JSNice JS


HTMLHTML

Firefox


OMG JSOMG JS



HTMLHTML

Internet Explorer 9




HTMLHTML

Internet Explorer 6

Base JSBase JSBase JSBase JSBase JSBase JSBase CSSBase CSS Base JSBase JS

HTMLHTML

Netscape 4

HTMLHTML

New Browser Capabilities

Rounded CornersDrop ShadowsGradientsTransitionsTransformsMultiple Background Images

Rounded CornersDrop ShadowsGradientsTransitionsTransformsMultiple Background Images

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

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

The best possible experiencegiven the device capabilities

Awesome!Awesome!

OKOK

OKOK

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

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

Rounded CornersDrop ShadowsGradients

Rounded CornersDrop ShadowsGradients

Only with CSSOnly with CSS

Advanced scripting andbehaviorAdvanced scripting andbehavior

Only with nativeAPIs

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 bytes1467 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 bytes566 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/

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


CSSCSS

HTMLHTML




OMG CSSOMG CSS OMG JSOMG JS

Nice CSSNice CSS Nice JSNice JS


HTMLHTML

Don't be horrible

Do be awesome

The End

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

progressive enhancement 2.0 (conference agnostic)

Technology

web sites

bugs http

web developers

author c web browser

authorn c web browser

printed page d television

web isnt printnicholas

n gweb page