Progressive Enhancement 2.0 (Conference Agnostic)

23,338 views
22,029 views

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
23,338
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
264
Comments
4
Likes
46
Embeds 0
No embeds

No notes for slide

Progressive Enhancement 2.0 (Conference Agnostic)

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

×