Progressive Enhancement 2.0 (Conference Agnostic)

Progressive Enhancement 2.0 Because the Web isnt PrintNicholas C. ZakasPresentation Architect, Yahoo!

Whos this guy? Presentation Contributor, Architect Creator of YUI TestAuthor 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/

Now incolor!

Also in color!1996

"Anyone who slaps a this page is bestviewed with Browser X label on a Webpage appears to be yearning for the badold days, before the Web, when you hadvery little chance of reading a documentwritten on another computer, anotherword processor, or another network." Tim Berners-Lee, 1996

Graceful Degradation

"Property of Bri if zombies attack."

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

Progressive Enhancement

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/

BehaviorPresentation Content

JavaScript CSS HTML

A-GradeJavaScript CSS HTML

C-Grade HTML

Progressive Enhancement 1.0

Were 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

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 combinedwith 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 GWeb 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 problemhttp://www.flickr.com/photos/navdeepraj/504596529/

This would be silly Yet this is what web developers have been doinghttp://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

ChromeOMG CSS Base JS OMG JSNice CSS Base JS Nice JSBase CSS Base JS HTML

Firefox OMG JSNice CSS Base JS Nice JSBase CSS Base JS HTML

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

Internet Explorer 6Base CSS Base JS HTML

Netscape 4 HTML

New Browser CapabilitiesRounded Corners Drag and DropDrop Shadows GeolocationGradients Cross-Domain AjaxTransitions Cross-Domain MessagingTransforms Client-Side Data StorageMultiple Background Images Canvas/WebGL

The best possible experiencegiven 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

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

Rounded CornersDrop ShadowsGradients Only with CSS

Advanced scripting and behaviorOnly with native APIs

Long development timeTrying to makeolder browsersdo things they werenever 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

Wont 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

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/

Dont be horrible

Do be awesome

The End

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

http://paper.li	250
http://blog.inside-box.net	201
http://www.ryanbay.com	164
http://iroylabs.blogspot.com	149
http://gizmocado.com	72
http://pixelify.com	69
http://localhost	64
https://twitter.com	52
http://krzychukula.blogspot.com	50
https://twimg0-a.akamaihd.net	48
http://iroylabs.blogspot.in	26
http://ntlwth1799m00.nml.com	25
http://jacktse.com	16
http://www.zuixiami.com	15
https://si0.twimg.com	13
http://us-w1.rockmelt.com	10
http://www.pages.drexel.edu	7
http://gizmocado.tumblr.com	6
http://iroylabs.blogspot.de	5
http://tweetedtimes.com	5
http://feeds.feedburner.com	5
http://twitter.com	3
http://iroylabs.blogspot.ca	2
http://iroylabs.blogspot.se	2
http://iroylabs.blogspot.sg	2
http://iroylabs.blogspot.dk	2
http://iroylabs.blogspot.it	2
http://iroylabs.blogspot.fr	2
http://iroylabs.blogspot.com.ar	1
http://drizzlin.com	1
http://flow3.typo3.org	1
http://iroylabs.blogspot.hk	1
http://blog.stefanoepifani.it	1
http://thecheerfulscout.blogspot.com	1
http://iroylabs.blogspot.jp	1
http://iroylabs.blogspot.be	1
http://krzychukula.blogspot.tw	1
http://iroylabs.blogspot.hu	1
http://iroylabs.blogspot.com.es	1
http://iroylabs.blogspot.co.uk	1
http://www.ryanbay.com} {914759190\|\|\|pingback	1
http://iroylabs.blogspot.com.br	1
http://www.linkedin.com	1

Progressive Enhancement 2.0 (Conference Agnostic)

by Nicholas Zakas on Apr 24, 2011

Accessibility

Categories

Upload Details

Usage Rights

43 Embeds 1,282

Statistics

Progressive Enhancement 2.0 (Conference Agnostic) Presentation Transcript