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  ...
@slicknet(Complaints: @reybango)
Used with permission. Copyright 2010 Xtresshttp://www.flickr.com/photos/noelboss/4549392694/
@paul_irish              @slicknetsmom
A Brief History ofWeb Development
http://www.flickr.com/photos/marc_smith/447183492/
1993
1994
1995
1996
Now  incolor!
1995
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, ...
Graceful Degradation
http://www.digital-web.com/articles/fluid_thinking/
<noscript>
<noscript>Your browser doesntsupport JavaScript. Sucks to be you.          Bye.</noscript>
Progressive Enhancement
http://www.alistapart.com/articles/understandingprogressiveenhancement/
http://www.alistapart.com/articles/understandingprogressiveenhancement/
"An escalator can never break;  it can only become stairs."       Mitch Hedberg, Comedian                          http://...
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
Why?
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...
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.co...
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       ...
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 : te...
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/navd...
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       ...
The best possible experiencegiven the device capabilities
Awesome!   OK                 OK   Bad!Value        Effort
Browser Marketshare     11 8                                                       IE6                                    ...
Development Time Spent 40                    IE6 & IE7                    Others               60                         ...
Used with permission. Copyright 2008 BoyShapedBox.http://www.flickr.com/photos/boyshapedbox/2282655473/
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 bug...
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...
After                                 566 bytes<div class="pa-app" id="{$id}-app">    <button class="do-app-close y-fp-pg-...
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/
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 : te...
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
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Upcoming SlideShare
Loading in...5
×

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)

23,477

Published on

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.

Published in: Technology
1 Comment
37 Likes
Statistics
Notes
No Downloads
Views
Total Views
23,477
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
254
Comments
1
Likes
37
Embeds 0
No embeds

No notes for slide

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)

  1. 1. Progressive Enhancement 2.0 Because the Web isnt PrintNicholas C. ZakasApril 16, 2011
  2. 2. Whos this guy? Presentation Contributor, Architect Creator of YUI TestAuthor Lead Author Contributor Lead Author
  3. 3. @slicknet(Complaints: @reybango)
  4. 4. Used with permission. Copyright 2010 Xtresshttp://www.flickr.com/photos/noelboss/4549392694/
  5. 5. @paul_irish @slicknetsmom
  6. 6. A Brief History ofWeb Development
  7. 7. http://www.flickr.com/photos/marc_smith/447183492/
  8. 8. 1993
  9. 9. 1994
  10. 10. 1995
  11. 11. 1996
  12. 12. Now incolor!
  13. 13. 1995
  14. 14. Also in color!1996
  15. 15. "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
  16. 16. Graceful Degradation
  17. 17. http://www.digital-web.com/articles/fluid_thinking/
  18. 18. <noscript>
  19. 19. <noscript>Your browser doesntsupport JavaScript. Sucks to be you. Bye.</noscript>
  20. 20. Progressive Enhancement
  21. 21. http://www.alistapart.com/articles/understandingprogressiveenhancement/
  22. 22. http://www.alistapart.com/articles/understandingprogressiveenhancement/
  23. 23. "An escalator can never break; it can only become stairs." Mitch Hedberg, Comedian http://www.flickr.com/photos/midiman/336647596/
  24. 24. BehaviorPresentation Content
  25. 25. JavaScript CSS HTML
  26. 26. A-GradeJavaScript CSS HTML
  27. 27. C-Grade HTML
  28. 28. Progressive Enhancement 1.0
  29. 29. Were having some problems
  30. 30. Development takes too long http://www.flickr.com/photos/athomeinscottsdale/4507847940/
  31. 31. Too many bugs http://www.flickr.com/photos/kaibara/4632384645/
  32. 32. http://www.flickr.com/photos/drb62/4990651560/ Our pages are slow
  33. 33. Why?
  34. 34. We got confused
  35. 35. Web page : ?
  36. 36. Web sites look like print
  37. 37. Web page : Printed page
  38. 38. 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
  39. 39. http://www.flickr.com/photos/chrisschroeder/4096627359/ Every printed book is exactly the same
  40. 40. We became obsessed with identical experiences across all browsers http://www.flickr.com/photos/joanna8555/5554285729/
  41. 41. http://www.flickr.com/photos/denisdervisevic/5327974794/ People got angry if you suggested otherwise
  42. 42. Quality?
  43. 43. Professional?
  44. 44. Consistency?
  45. 45. Unity of messaging combinedwith brand identification while setting user expectations appropriately?
  46. 46. http://xark.typepad.com/my_weblog/2008/01/bullshit-still.html
  47. 47. 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
  48. 48. http://www.flickr.com/photos/ramdac/377087239/
  49. 49. We started the analogy in the wrong spot
  50. 50. Web page : ?
  51. 51. N GWeb page : Printed page R O W
  52. 52. Web browser : Web page
  53. 53. 1) WEB BROWSER : WEB PAGE :: (a) telephone : call (b) computer : email (c) printed book : printed page (d) television : television show (e) mailbox : letter
  54. 54. Old browsers are like black & white TVs http://www.flickr.com/photos/stevestein1982/4047834684/
  55. 55. New browsers are like HD TVs http://www.flickr.com/photos/lge/3988988400/
  56. 56. TV already solved this problemhttp://www.flickr.com/photos/navdeepraj/504596529/
  57. 57. This would be silly Yet this is what web developers have been doinghttp://www.flickr.com/photos/navdeepraj/504596529/
  58. 58. Do web sites need to look exactly the same in every browser?
  59. 59. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  60. 60. Your site SHOULD look different in different browsers
  61. 61. Give users an incentive to upgrade
  62. 62. Progressive Enhancement 1.0 JavaScript CSS HTML
  63. 63. Progressive Enhancement 2.0 OMG CSS OMG JS Nice CSS Nice JS Base CSS Base JS HTML
  64. 64. ChromeOMG CSS Base JS OMGNice CSS Base JS NiceBase CSS Base JS HTML
  65. 65. Firefox OMG JSNice CSS Base JS NiceBase CSS Base JS HTML
  66. 66. Internet Explorer 9Nice CSS Base JS NiceBase CSS Base JS HTML
  67. 67. Internet Explorer 6Base CSS Base JS HTML
  68. 68. Netscape 4 HTML
  69. 69. New Browser CapabilitiesRounded Corners Drag and DropDrop Shadows GeolocationGradients Cross-Domain AjaxTransitions Cross-Domain MessagingTransforms Client-Side Data StorageMultiple Background Images Canvas/WebGL
  70. 70. The best possible experiencegiven the device capabilities
  71. 71. Awesome! OK OK Bad!Value Effort
  72. 72. Browser Marketshare 11 8 IE6 IE7 Others 81 Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2
  73. 73. Development Time Spent 40 IE6 & IE7 Others 60 Source: Me
  74. 74. Used with permission. Copyright 2008 BoyShapedBox.http://www.flickr.com/photos/boyshapedbox/2282655473/
  75. 75. http://www.flickr.com/photos/myphotoshopbrushes/3242490894/
  76. 76. Rounded CornersDrop ShadowsGradients Only with CSS
  77. 77. Advanced scripting and behaviorOnly with native APIs
  78. 78. Long development timeTrying to makeolder browsersdo things they werenever meant to do Too many bugs Slow pages
  79. 79. Older browsers often need *a lot*more code to do the same thing
  80. 80. 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>
  81. 81. 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>
  82. 82. Less code = Faster
  83. 83. Wont people notice?
  84. 84. Crying baby! Oh nos! http://www.flickr.com/photos/tudor/318123668/
  85. 85. What did you see?
  86. 86. Crying baby! Oh nos! http://www.flickr.com/photos/tudor/318123668/
  87. 87. Crying baby! Oh nos! http://www.flickr.com/photos/tudor/318123668/
  88. 88. Your users only use one browser
  89. 89. You are not alone
  90. 90. Summary
  91. 91. 1) WEB BROWSER : WEB PAGE :: (a) telephone : call (b) computer : email (c) printed book : printed page (d) television : television show (e) mailbox : letter
  92. 92. Progressive Enhancement 1.0 JavaScript CSS HTML
  93. 93. Progressive Enhancement 2.0 OMG CSS OMG JS Nice CSS Nice JS Base CSS Base JS HTML
  94. 94. http://www.flickr.com/photos/navdeepraj/504596529/
  95. 95. @paul_irish @slicknetsmom
  96. 96. The End
  97. 97. Etcetera• My blog: www.nczonline.net• Twitter: @slicknet• Rate me: http://spkr8.com/t/7213
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×