Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
38 likes•10,148 views
The document discusses the concept of progressive enhancement in web development, emphasizing the importance of creating web experiences that function across various browsers and devices. It critiques the obsession with identical appearances in all browsers, advocating for a more flexible approach that enhances user experience based on browser capabilities. The author illustrates how embracing progressive enhancement can lead to faster development times and reduced bugs.
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
- 1. Progressive Enhancement 2.0 Because the Web isn't Print Nicholas C. Zakas April 16, 2011
- 2. Who's this guy? Presentation Contributor, Architect Creator of YUI Test Author Lead Author Contributor Lead Author
- 4. Used with permission. Copyright 2010 Xtress http://www.flickr.com/photos/noelboss/4549392694/
- 6. @paul_irish @slicknetsmom
- 8. A Brief History of Web Development
- 11. 1993
- 13. 1994
- 14. 1995
- 15. 1996
- 16. Now in color!
- 20. 1995
- 21. Also in color! 1996
- 25. "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
- 28. <noscript>
- 29. <noscript>Your browser doesn't support JavaScript. Sucks to be you. Bye.</noscript>
- 32. http://www.alistapart.com/articles/understandingprogressiveenhancement/
- 35. http://www.alistapart.com/articles/understandingprogressiveenhancement/
- 36. "An escalator can never break; it can only become stairs." Mitch Hedberg, Comedian http://www.flickr.com/photos/midiman/336647596/
- 39. JavaScript CSS HTML
- 41. A-Grade JavaScript CSS HTML
- 42. C-Grade HTML
- 45. We're having some problems
- 46. Development takes too long http://www.flickr.com/photos/athomeinscottsdale/4507847940/
- 47. Too many bugs http://www.flickr.com/photos/kaibara/4632384645/
- 48. http://www.flickr.com/photos/drb62/4990651560/ Our pages are slow
- 49. Why?
- 51. We got confused
- 52. Web page : ?
- 53. Web sites look like print
- 54. Web page : Printed page
- 55. 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
- 56. http://www.flickr.com/photos/chrisschroeder/4096627359/ Every printed book is exactly the same
- 57. We became obsessed with identical experiences across all browsers http://www.flickr.com/photos/joanna8555/5554285729/
- 58. http://www.flickr.com/photos/denisdervisevic/5327974794/ People got angry if you suggested otherwise
- 59. Quality?
- 60. Professional?
- 61. Consistency?
- 62. Unity of messaging combined with brand identification while setting user expectations appropriately?
- 64. 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
- 68. We started the analogy in the wrong spot
- 69. Web page : ?
- 70. N G Web page : Printed page R O W
- 71. Web browser : Web page
- 72. 1) WEB BROWSER : WEB PAGE :: (a) telephone : call (b) computer : email (c) printed book : printed page (d) television : television show (e) mailbox : letter
- 75. Old browsers are like black & white TVs http://www.flickr.com/photos/stevestein1982/4047834684/
- 76. New browsers are like HD TVs http://www.flickr.com/photos/lge/3988988400/
- 77. TV already solved this problem http://www.flickr.com/photos/navdeepraj/504596529/
- 78. This would be silly Yet this is what web developers have been doing http://www.flickr.com/photos/navdeepraj/504596529/
- 79. Do web sites need to look exactly the same in every browser?
- 81. Your site SHOULD look different in different browsers
- 82. Give users an incentive to upgrade
- 83. Progressive Enhancement 1.0 JavaScript CSS HTML
- 84. Progressive Enhancement 2.0 OMG CSS OMG JS Nice CSS Nice JS Base CSS Base JS HTML
- 85. Chrome OMG CSS Base JS OMG Nice CSS Base JS Nice Base CSS Base JS HTML
- 86. Firefox OMG JS Nice CSS Base JS Nice Base CSS Base JS HTML
- 87. Internet Explorer 9 Nice CSS Base JS Nice Base CSS Base JS HTML
- 88. Internet Explorer 6 Base CSS Base JS HTML
- 89. Netscape 4 HTML
- 90. 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
- 91. The best possible experience given the device capabilities
- 92. Awesome! OK OK Bad! Value Effort
- 93. Browser Marketshare 11 8 IE6 IE7 Others 81 Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2
- 94. Development Time Spent 40 IE6 & IE7 Others 60 Source: Me
- 95. Used with permission. Copyright 2008 BoyShapedBox. http://www.flickr.com/photos/boyshapedbox/2282655473/
- 97. Rounded Corners Drop Shadows Gradients Only with CSS
- 98. Advanced scripting and behavior Only with native APIs
- 99. Long development time Trying to make older browsers do things they were never meant to do Too many bugs Slow pages
- 100. Older browsers often need *a lot* more code to do the same thing
- 101. 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>
- 102. 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>
- 103. Less code = Faster
- 104. Won't people notice?
- 105. Crying baby! Oh nos! http://www.flickr.com/photos/tudor/318123668/
- 106. What did you see?
- 107. Crying baby! Oh nos! http://www.flickr.com/photos/tudor/318123668/
- 108. Crying baby! Oh nos! http://www.flickr.com/photos/tudor/318123668/
- 109. Your users only use one browser
- 110. You are not alone
- 117. Summary
- 118. 1) WEB BROWSER : WEB PAGE :: (a) telephone : call (b) computer : email (c) printed book : printed page (d) television : television show (e) mailbox : letter
- 119. Progressive Enhancement 1.0 JavaScript CSS HTML
- 120. Progressive Enhancement 2.0 OMG CSS OMG JS Nice CSS Nice JS Base CSS Base JS HTML
- 122. @paul_irish @slicknetsmom
- 123. The End
- 124. Etcetera • My blog: www.nczonline.net • Twitter: @slicknet • Rate me: http://spkr8.com/t/7213