Downloaded 270 times
Uploaded byNicholas Zakas
Progressive Enhancement 2.0 (Conference Agnostic)
The presentation highlights the concept of progressive enhancement in web development, contrasting it with traditional graceful degradation. It emphasizes the importance of creating web experiences that cater to varying browser capabilities rather than striving for identical appearances across all platforms. The speaker argues for prioritizing user experience and leveraging modern browser features while acknowledging the need for compatibility with older systems.
More Related Content
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Progressive Enhancement 2.0 (Conference Agnostic)
![Progressive Enhancement & Mobile [Funka 2012]](https://cdn.slidesharecdn.com/ss_thumbnails/progressiveenhancementmobile-120418173201-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
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.
- 4. A Brief Historyof Web Development
- 6.
- 7.
- 9.
- 10.
- 11.
- 12.
- 16.
- 17. Also in color! 1996
- 21. "Anyone who slapsa '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
- 22.
- 23. "Property of Briif zombies attack."
- 24.
- 25.
- 26. <noscript>Your browser doesn't supportJavaScript. Sucks to be you. Bye.</noscript>
- 28.
- 29.
- 32.
- 33. "An escalator cannever break; it can only become stairs." Mitch Hedberg, Comedian http://www.flickr.com/photos/midiman/336647596/ http://www.flickr.com/photos/midiman/336647596/
- 35.
- 36. JavaScript CSS HTML
- 38. A-Grade JavaScript CSS HTML
- 39.
- 40.
- 42. We're having someproblems
- 43. Development takes toolong 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.
- 49.
- 50.
- 51. Web sites looklike 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 obsessedwith 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.
- 58.
- 59.
- 60. Unity of messagingcombined with brand identification while setting user expectations appropriately?
- 61.
- 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
- 64.
- 66. We started theanalogy in the wrong spot
- 67.
- 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 arelike black & white TVs http://www.flickr.com/photos/stevestein1982/4047834684/
- 74. New browsers arelike HD TVs http://www.flickr.com/photos/lge/3988988400/
- 75. TV already solvedthis problem http://www.flickr.com/photos/navdeepraj/504596529/
- 76. This would besilly Yet this is what web developers have been doing http://www.flickr.com/photos/navdeepraj/504596529/
- 77. Do web sitesneed to look exactly the same in every browser?
- 78.
- 79. Your site SHOULDlook different in different browsers
- 80. Give users anincentive 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 NiceCSS Base JS Nice JS Base CSS Base JS HTML
- 86. Internet Explorer 6 BaseCSS Base JS HTML
- 87. Netscape 4 HTML
- 88. New Browser Capabilities RoundedCorners 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 possibleexperience 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/
- 94.
- 95. Rounded Corners Drop Shadows Gradients Only with CSS
- 96. Advanced scripting and behavior Only with native APIs
- 97. Long development time Tryingto make older browsers do things they were never meant to do Too many bugs Slow pages
- 98. Older browsers oftenneed *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.
- 103. Crying baby! Ohnos! http://www.flickr.com/photos/tudor/318123668/
- 104. What did yousee?
- 105. Crying baby! Ohnos! http://www.flickr.com/photos/tudor/318123668/
- 106. Crying baby! Ohnos! http://www.flickr.com/photos/tudor/318123668/
- 107. Your users onlyuse one browser
- 108.
- 109.
- 110. You are notalone
- 117.
- 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
- 121.
- 122.
- 123.
- 124.
- 125. Etcetera • My blog: www.nczonline.net • Twitter: @slicknet • These Slides: slideshare.net/nzakas