Progressive Enhancement 2.0 (Conference Agnostic)

transcript

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/

color!

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

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

Bye.</noscript>

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

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

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

The best possible experiencegiven the device capabilities

Awesome!Awesome!

Bad!Bad!

Effort

IE6IE7Others

Browser Marketshare

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

IE6 & IE7Others

Development Time Spent

Source: Me

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

Rounded CornersDrop ShadowsGradients

Only with CSSOnly with CSS

Advanced scripting andbehaviorAdvanced 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><div class="pa-app-chrome-rightshadow">

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

1467 bytes1467 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> <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?

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