Progressive Enhancement 2.0 (Conference Agnostic)
•
47 likes•42,539 views
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!
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Progressive Enhancement 2.0 (Conference Agnostic)
Similar to Progressive Enhancement 2.0 (Conference Agnostic) (20)
More from Nicholas Zakas
More from Nicholas Zakas (10)
Recently uploaded
Recently uploaded (20)
Progressive Enhancement 2.0 (Conference Agnostic)
- 1. Progressive Enhancement 2.0 Because the Web isn't Print Nicholas C. Zakas Presentation Architect, Yahoo!
- 2. Who's this guy? Presentation Contributor, Architect Creator of YUI Test Author Lead Author Contributor Lead Author
- 3. @slicknet
- 4. A Brief History of Web Development
- 7. 1993
- 9. 1994
- 10. 1995
- 11. 1996
- 12. Now in color!
- 16. 1995
- 17. Also in color! 1996
- 21. "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
- 23. "Property of Bri if zombies attack."
- 25. <noscript>
- 26. <noscript>Your browser doesn't support JavaScript. Sucks to be you. Bye.</noscript>
- 33. "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/
- 36. JavaScript CSS HTML
- 38. A-Grade JavaScript CSS HTML
- 39. C-Grade HTML
- 42. We're having some problems
- 43. Development takes too long http://www.flickr.com/photos/athomeinscottsdale/4507847940/
- 44. Too many bugs http://www.flickr.com/photos/kaibara/4632384645/
- 45. http://www.flickr.com/photos/drb62/4990651560/ Our pages are slow
- 47. Why?
- 49. We got confused
- 50. Web page : ?
- 51. Web sites look like print
- 52. Web page : Printed page
- 53. 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
- 54. http://www.flickr.com/photos/chrisschroeder/4096627359/ Every printed book is exactly the same
- 55. We became obsessed with identical experiences across all browsers http://www.flickr.com/photos/joanna8555/5554285729/
- 56. http://www.flickr.com/photos/denisdervisevic/5327974794/ People got angry if you suggested otherwise
- 57. Quality?
- 58. Professional?
- 59. Consistency?
- 60. Unity of messaging combined with brand identification while setting user expectations appropriately?
- 62. 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
- 66. We started the analogy in the wrong spot
- 67. Web page : ?
- 68. N G Web page : Printed page R O W
- 69. Web browser : Web page
- 70. 1) WEB BROWSER : WEB PAGE :: (a) telephone : call (b) computer : email (c) printed book : printed page (d) television : television show (e) mailbox : letter
- 73. Old browsers are like black & white TVs http://www.flickr.com/photos/stevestein1982/4047834684/
- 74. New browsers are like HD TVs http://www.flickr.com/photos/lge/3988988400/
- 75. TV already solved this problem http://www.flickr.com/photos/navdeepraj/504596529/
- 76. This would be silly Yet this is what web developers have been doing http://www.flickr.com/photos/navdeepraj/504596529/
- 77. Do web sites need to look exactly the same in every browser?
- 79. Your site SHOULD look different in different browsers
- 80. Give users an incentive to upgrade
- 81. Progressive Enhancement 1.0 JavaScript CSS HTML
- 82. Progressive Enhancement 2.0 OMG CSS OMG JS Nice CSS Nice JS Base CSS Base JS HTML
- 83. Chrome OMG CSS Base JS OMG JS Nice CSS Base JS Nice JS Base CSS Base JS HTML
- 84. Firefox OMG JS Nice CSS Base JS Nice JS Base CSS Base JS HTML
- 85. Internet Explorer 9 Nice CSS Base JS Nice JS Base CSS Base JS HTML
- 86. Internet Explorer 6 Base CSS Base JS HTML
- 87. Netscape 4 HTML
- 88. 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
- 89. The best possible experience given the device capabilities
- 90. Awesome! OK OK Bad! Value Effort
- 91. Browser Marketshare 11 8 IE6 IE7 Others 81 Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2
- 92. Development Time Spent 40 IE6 & IE7 Others 60 Source: Me
- 93. Used with permission. Copyright 2008 BoyShapedBox. http://www.flickr.com/photos/boyshapedbox/2282655473/
- 95. Rounded Corners Drop Shadows Gradients Only with CSS
- 96. Advanced scripting and behavior Only with native APIs
- 97. Long development time Trying to make older browsers do things they were never meant to do Too many bugs Slow pages
- 98. Older browsers often need *a lot* more code to do the same thing
- 99. 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>
- 100. 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>
- 101. Less code = Faster
- 102. Won't people notice?
- 103. Crying baby! Oh nos! http://www.flickr.com/photos/tudor/318123668/
- 104. What did you see?
- 105. Crying baby! Oh nos! http://www.flickr.com/photos/tudor/318123668/
- 106. Crying baby! Oh nos! http://www.flickr.com/photos/tudor/318123668/
- 107. Your users only use one browser
- 108. @slicknetsmom
- 109. @slicknetsmom
- 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. Don't be horrible
- 123. Do be awesome
- 124. The End
- 125. Etcetera • My blog: www.nczonline.net • Twitter: @slicknet • These Slides: slideshare.net/nzakas