Progressive Enhancement 2.0 (Conference Agnostic)

Download Progressive Enhancement 2.0 (Conference Agnostic)

Post on 15-Jan-2015

15.943 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

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!

TRANSCRIPT

<ul><li> 1. Progressive Enhancement 2.0Because the Web isnt PrintNicholas C. ZakasPresentation Architect, Yahoo!</li></ul> <p> 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. Nowincolor! 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. 18. Your browser doesntsupport JavaScript. Sucks to be you.Bye. 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, Comedianhttp://www.flickr.com/photos/midiman/336647596/http://www.flickr.com/photos/midiman/336647596/ 23. BehaviorPresentationContent 24. JavaScript CSSHTML 25. A-GradeJavaScript CSSHTML 26. C-Grade HTML 27. Progressive Enhancement 1.0 28. Were having some problems 29. Development takes too longhttp://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 experiencesacross all browsershttp://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 whilesetting user expectationsappropriately? 45. http://xark.typepad.com/my_weblog/2008/01/bullshit-still.html 46. 1) WEB PAGE : PRINTED PAGE :: (a) dairy : diary (b) spider : authorN (c) web browser : book GR 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 pageR 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 &amp; white TVshttp://www.flickr.com/photos/stevestein1982/4047834684/ 54. New browsers are like HD TVshttp://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 exactlythe same in every browser? 58. http://dowebsitesneedtolookexactlythesameineverybrowser.com/ 59. Your site SHOULD look different in different browsers 60. Give users an incentive toupgrade 61. Progressive Enhancement 1.0 JavaScriptCSS HTML 62. Progressive Enhancement 2.0OMG CSSOMG JSNice CSSNice JSBase CSS Base JS HTML 63. ChromeOMG CSSBase JS OMG JSNice CSS Base JS Nice JSBase CSS Base JS HTML 64. FirefoxOMG JSNice CSSBase JSNice JSBase CSSBase JS HTML 65. Internet Explorer 9Nice CSSBase JSNice JSBase CSSBase JS HTML 66. Internet Explorer 6Base CSSBase JS HTML 67. Netscape 4HTML 68. New Browser CapabilitiesRounded CornersDrag and DropDrop Shadows GeolocationGradientsCross-Domain AjaxTransitionsCross-Domain MessagingTransforms Client-Side Data StorageMultiple Background Images Canvas/WebGL 69. The best possible experiencegiven the device capabilities 70. Awesome! OK OK Bad!ValueEffort 71. Browser Marketshare118 IE6 IE7 Others 81 Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2 72. Development Time Spent 40IE6 &amp; IE7 Others60 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 ShadowsGradientsOnly 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. Before1467 bytes</p> <div><div><div><div><ul><li> STR.PA.EXPANDED.CLOSE!!&gt;</li></ul></div><div>STR.PA.EXPANDED.CLOSE!!&gt;</div></div></div></div> <p> 80. After 566 bytes</p> <div>STR.PA.EXPANDED.CLOSE!!&gt;STR.PA.EXPANDED.CLOSE!!&gt;</div> <p> 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 JavaScriptCSS HTML 94. Progressive Enhancement 2.0OMG CSSOMG JSNice CSSNice JSBase 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 </p>