0
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  ...
@slicknet
A Brief History ofWeb Development
http://www.flickr.com/photos/marc_smith/447183492/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
"Property of Bri if zombies attack."
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           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       ...
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
@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 : 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/
Dont 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)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Upcoming SlideShare
Loading in...5
×

Progressive Enhancement 2.0 (Conference Agnostic)

16,544

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.

This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!

Published in: Technology
4 Comments
46 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,544
On Slideshare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
263
Comments
4
Likes
46
Embeds 0
No embeds

No notes for slide

Transcript of "Progressive Enhancement 2.0 (Conference Agnostic)"

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

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

×