Successfully reported this slideshow.
Your SlideShare is downloading. ×

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Keypoints html5
Keypoints html5
Loading in …3
×

Check these out next

1 of 124 Ad

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Advertisement

Similar to Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011) (20)

More from Nicholas Zakas (17)

Advertisement

Recently uploaded (20)

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)

  1. 1. Progressive Enhancement 2.0 Because the Web isn't Print Nicholas C. Zakas April 16, 2011
  2. 2. Who's this guy? Presentation Contributor, Architect Creator of YUI Test Author Lead Author Contributor Lead Author
  3. 3. @slicknet (Complaints: @reybango)
  4. 4. Used with permission. Copyright 2010 Xtress http://www.flickr.com/photos/noelboss/4549392694/
  5. 5. @paul_irish @slicknetsmom
  6. 6. A Brief History of Web 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 in color!
  13. 13. 1995
  14. 14. Also in color! 1996
  15. 15. "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
  16. 16. Graceful Degradation
  17. 17. http://www.digital-web.com/articles/fluid_thinking/
  18. 18. <noscript>
  19. 19. <noscript>Your browser doesn't support 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. Behavior Presentation Content
  25. 25. JavaScript CSS HTML
  26. 26. A-Grade JavaScript CSS HTML
  27. 27. C-Grade HTML
  28. 28. Progressive Enhancement 1.0
  29. 29. We're 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 combined with 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 G Web 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 problem http://www.flickr.com/photos/navdeepraj/504596529/
  57. 57. This would be silly Yet this is what web developers have been doing http://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. Chrome OMG CSS Base JS OMG Nice CSS Base JS Nice Base CSS Base JS HTML
  65. 65. Firefox OMG JS Nice CSS Base JS Nice Base CSS Base JS HTML
  66. 66. Internet Explorer 9 Nice CSS Base JS Nice Base CSS Base JS HTML
  67. 67. Internet Explorer 6 Base CSS Base JS HTML
  68. 68. Netscape 4 HTML
  69. 69. New Browser Capabilities Rounded Corners Drag and Drop Drop Shadows Geolocation Gradients Cross-Domain Ajax Transitions Cross-Domain Messaging Transforms Client-Side Data Storage Multiple Background Images Canvas/WebGL
  70. 70. The best possible experience given 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 Corners Drop Shadows Gradients Only with CSS
  77. 77. Advanced scripting and behavior Only with native APIs
  78. 78. Long development time Trying to make older browsers do things they were never 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. Won't 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

×