progressive enhancement 2.0 (jquery conference sf bay area 2011)
DESCRIPTION
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.TRANSCRIPT
![Page 1: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/1.jpg)
Progressive Enhancement 2.0Because the Web isn't Print
Nicholas C. ZakasApril 16, 2011
![Page 2: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/2.jpg)
Who's this guy?
Presentation Architect
Contributor,Creator of YUI Test
Author Lead Author Contributor Lead Author
![Page 3: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/3.jpg)
@slicknet
(Complaints: @reybango)
![Page 4: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/4.jpg)
Used with permission. Copyright 2010 Xtress
http://www.flickr.com/photos/noelboss/4549392694/
![Page 5: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/5.jpg)
![Page 6: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/6.jpg)
@paul_irish
@slicknetsmom
![Page 7: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/7.jpg)
![Page 8: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/8.jpg)
A Brief History ofWeb Development
![Page 9: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/9.jpg)
![Page 10: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/10.jpg)
http://www.flickr.com/photos/marc_smith/447183492/
![Page 11: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/11.jpg)
1993
![Page 12: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/12.jpg)
![Page 13: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/13.jpg)
1994
![Page 14: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/14.jpg)
1995
![Page 15: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/15.jpg)
1996
![Page 16: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/16.jpg)
Nowin
color!
![Page 17: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/17.jpg)
![Page 18: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/18.jpg)
![Page 19: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/19.jpg)
![Page 20: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/20.jpg)
1995
![Page 21: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/21.jpg)
1996
Alsoin
color!
![Page 22: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/22.jpg)
![Page 23: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/23.jpg)
![Page 24: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/24.jpg)
![Page 25: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/25.jpg)
"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
![Page 26: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/26.jpg)
Graceful Degradation
![Page 27: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/27.jpg)
http://www.digital-web.com/articles/fluid_thinking/
![Page 28: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/28.jpg)
<noscript>
![Page 29: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/29.jpg)
<noscript>Your browser doesn't support JavaScript. Sucks to be you.
Bye.</noscript>
![Page 30: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/30.jpg)
![Page 31: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/31.jpg)
Progressive Enhancement
![Page 32: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/32.jpg)
http://www.alistapart.com/articles/understandingprogressiveenhancement/
![Page 33: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/33.jpg)
![Page 34: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/34.jpg)
![Page 35: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/35.jpg)
http://www.alistapart.com/articles/understandingprogressiveenhancement/
![Page 36: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/36.jpg)
http://www.flickr.com/photos/midiman/336647596/
"An escalator can never break;it can only become stairs."
Mitch Hedberg, Comedian
![Page 37: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/37.jpg)
![Page 38: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/38.jpg)
Behavior
Presentation
Content
![Page 39: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/39.jpg)
JavaScript
CSS
HTML
![Page 40: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/40.jpg)
![Page 41: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/41.jpg)
JavaScript
CSS
HTML
A-Grade
![Page 42: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/42.jpg)
HTML
C-Grade
![Page 43: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/43.jpg)
Progressive Enhancement 1.0
![Page 44: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/44.jpg)
![Page 45: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/45.jpg)
We're having some problems
![Page 46: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/46.jpg)
Development takes too long
http://www.flickr.com/photos/athomeinscottsdale/4507847940/
![Page 47: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/47.jpg)
Too many bugs
http://www.flickr.com/photos/kaibara/4632384645/
![Page 48: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/48.jpg)
Our pages are slow
http://www.flickr.com/photos/drb62/4990651560/
![Page 49: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/49.jpg)
Why?
![Page 50: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/50.jpg)
![Page 51: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/51.jpg)
We got confused
![Page 52: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/52.jpg)
Web page : ?
![Page 53: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/53.jpg)
Web sites look like print
![Page 54: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/54.jpg)
Web page : Printed page
![Page 55: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/55.jpg)
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
![Page 56: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/56.jpg)
http://www.flickr.com/photos/chrisschroeder/4096627359/
Every printed book is exactly the same
![Page 57: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/57.jpg)
http://www.flickr.com/photos/joanna8555/5554285729/
We became obsessed with identical experiencesacross all browsers
![Page 58: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/58.jpg)
http://www.flickr.com/photos/denisdervisevic/5327974794/
People got angry if you suggested otherwise
![Page 59: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/59.jpg)
Quality?
![Page 60: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/60.jpg)
Professional?
![Page 61: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/61.jpg)
Consistency?
![Page 62: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/62.jpg)
Unity of messaging combined with brand identification while
setting user expectations appropriately?
![Page 63: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/63.jpg)
http://xark.typepad.com/my_weblog/2008/01/bullshit-still.html
![Page 64: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/64.jpg)
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
![Page 65: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/65.jpg)
![Page 66: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/66.jpg)
http://www.flickr.com/photos/ramdac/377087239/
![Page 67: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/67.jpg)
![Page 68: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/68.jpg)
We started the analogy in the wrong spot
![Page 69: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/69.jpg)
Web page : ?
![Page 70: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/70.jpg)
Web page : Printed page
WRONG
![Page 71: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/71.jpg)
Web browser : Web page
![Page 72: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/72.jpg)
1) WEB BROWSER : WEB PAGE ::
(a) telephone : call (b) computer : email (c) printed book : printed page (d) television : television show (e) mailbox : letter
![Page 73: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/73.jpg)
![Page 74: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/74.jpg)
![Page 75: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/75.jpg)
Old browsers are like black & white TVs
http://www.flickr.com/photos/stevestein1982/4047834684/
![Page 76: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/76.jpg)
New browsers are like HD TVs
http://www.flickr.com/photos/lge/3988988400/
![Page 77: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/77.jpg)
TV already solved this problem
http://www.flickr.com/photos/navdeepraj/504596529/
![Page 78: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/78.jpg)
This would be sillyYet this is what web developers have been doing
http://www.flickr.com/photos/navdeepraj/504596529/
![Page 79: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/79.jpg)
Do web sites need to look exactly the same in every browser?
![Page 80: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/80.jpg)
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
![Page 81: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/81.jpg)
Your site SHOULD look different in different browsers
![Page 82: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/82.jpg)
Give users an incentive to upgrade
![Page 83: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/83.jpg)
JavaScript
CSS
HTML
Progressive Enhancement 1.0
![Page 84: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/84.jpg)
Progressive Enhancement 2.0
Base JSBase JSBase JS
OMG CSS OMG JS
Nice CSS Nice JS
Base CSS Base JS
HTML
![Page 85: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/85.jpg)
Chrome
Base JSBase JSBase JS
Base JSBase JSBase JSOMG CSS OMG JS
Base JSBase JSBase JSNice CSS Nice JS
Base CSS Base JS
HTML
![Page 86: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/86.jpg)
Firefox
Base JSBase JSBase JS
OMG JS
Base JSBase JSBase JSNice CSS Nice JS
Base CSS Base JS
HTML
![Page 87: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/87.jpg)
Internet Explorer 9
Base JSBase JSBase JS
Base JSBase JSBase JSNice CSS Nice JS
Base CSS Base JS
HTML
![Page 88: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/88.jpg)
Internet Explorer 6
Base JSBase JSBase JSBase CSS Base JS
HTML
![Page 89: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/89.jpg)
Netscape 4
HTML
![Page 90: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/90.jpg)
New Browser Capabilities
Rounded CornersDrop ShadowsGradientsTransitionsTransformsMultiple Background Images
Drag and DropGeolocationCross-Domain AjaxCross-Domain MessagingClient-Side Data StorageCanvas/WebGL
![Page 91: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/91.jpg)
The best possible experiencegiven the device capabilities
![Page 92: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/92.jpg)
Awesome!
OK
OK
Bad!
Effort
Valu
e
![Page 93: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/93.jpg)
11
8
81
IE6IE7Others
Browser Marketshare
Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2
![Page 94: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/94.jpg)
40
60
IE6 & IE7Others
Development Time Spent
Source: Me
![Page 95: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/95.jpg)
Used with permission. Copyright 2008 BoyShapedBox.http://www.flickr.com/photos/boyshapedbox/2282655473/
![Page 96: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/96.jpg)
http://www.flickr.com/photos/myphotoshopbrushes/3242490894/
![Page 97: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/97.jpg)
Rounded CornersDrop ShadowsGradients
Only with CSS
![Page 98: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/98.jpg)
Advanced scripting andbehavior
Only with nativeAPIs
![Page 99: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/99.jpg)
Trying to make older browsers do things they were never meant to do
Too many bugs
Slow pages
Long development time
![Page 100: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/100.jpg)
Older browsers often need*a lot*
more code to do the same thing
![Page 101: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/101.jpg)
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 bytes
![Page 102: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/102.jpg)
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 bytes
![Page 103: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/103.jpg)
Less code=
Faster
![Page 104: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/104.jpg)
Won't people notice?
![Page 105: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/105.jpg)
Crying baby! Oh nos!
http://www.flickr.com/photos/tudor/318123668/
![Page 106: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/106.jpg)
What did you see?
![Page 107: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/107.jpg)
Crying baby! Oh nos!
http://www.flickr.com/photos/tudor/318123668/
![Page 108: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/108.jpg)
Crying baby! Oh nos!
http://www.flickr.com/photos/tudor/318123668/
![Page 109: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/109.jpg)
Your users only use one browser
![Page 110: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/110.jpg)
You are not alone
![Page 111: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/111.jpg)
![Page 112: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/112.jpg)
![Page 113: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/113.jpg)
![Page 114: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/114.jpg)
![Page 115: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/115.jpg)
![Page 116: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/116.jpg)
![Page 117: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/117.jpg)
Summary
![Page 118: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/118.jpg)
1) WEB BROWSER : WEB PAGE ::
(a) telephone : call (b) computer : email (c) printed book : printed page (d) television : television show (e) mailbox : letter
![Page 119: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/119.jpg)
JavaScript
CSS
HTML
Progressive Enhancement 1.0
![Page 120: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/120.jpg)
Progressive Enhancement 2.0
Base JSBase JSBase JS
OMG CSS OMG JS
Nice CSS Nice JS
Base CSS Base JS
HTML
![Page 121: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/121.jpg)
http://www.flickr.com/photos/navdeepraj/504596529/
![Page 122: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/122.jpg)
@paul_irish
@slicknetsmom
![Page 123: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/123.jpg)
The End
![Page 124: Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)](https://reader034.vdocument.in/reader034/viewer/2022051818/54b783e04a79592a758b45fa/html5/thumbnails/124.jpg)
Etcetera• My blog: www.nczonline.net• Twitter: @slicknet• Rate me: http://spkr8.com/t/7213