Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)

Progressive Enhancement 2.0 Because the Web isnt PrintNicholas C. ZakasApril 16, 2011

Whos this guy? Presentation Contributor, Architect Creator of YUI TestAuthor Lead Author Contributor Lead Author

@slicknet(Complaints: @reybango)

@paul_irish @slicknetsmom

A Brief History ofWeb Development

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

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/

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 OMGNice CSS Base JS NiceBase CSS Base JS HTML

Firefox OMG JSNice CSS Base JS NiceBase CSS Base JS HTML

Internet Explorer 9Nice CSS Base JS NiceBase 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

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/

@paul_irish @slicknetsmom

The End

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

http://speakerrate.com	1864
http://lanyrd.com	221
http://www.coreybailey.org	46
http://paper.li	24
http://twitter.com	16
http://81.57.96.143	16
https://twitter.com	7
http://reconka.info	5
http://www.onlydoo.com	5
https://twimg0-a.akamaihd.net	3
http://spkr8-staging.herokuapp.com	3
http://efdevs.posterous.com	3
http://localhost	3
http://edicolaeuropea.blogspot.com	2
http://tweetedtimes.com	2
https://lanyrd.com	1
http://www.linkedin.com	1

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)

by Nicholas Zakas on Apr 16, 2011

Accessibility

Categories

Upload Details

Usage Rights

17 Embeds 2,222

Statistics

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011) Presentation Transcript