Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)

on

  • 23,290 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 ...

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.

Statistics

Views

Total Views
23,290
Views on SlideShare
21,000
Embed Views
2,290

Actions

Likes
37
Downloads
252
Comments
1

19 Embeds 2,290

http://speakerrate.com 1881
http://lanyrd.com 222
http://www.coreybailey.org 79
http://paper.li 24
https://twitter.com 19
http://81.57.96.143 16
http://twitter.com 16
http://www.onlydoo.com 5
http://reconka.info 5
http://localhost 3
http://efdevs.posterous.com 3
http://www.linkedin.com 3
https://twimg0-a.akamaihd.net 3
http://spkr8-staging.herokuapp.com 3
https://www.linkedin.com 2
http://edicolaeuropea.blogspot.com 2
http://tweetedtimes.com 2
http://www.scoop.it 1
https://lanyrd.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011) Presentation Transcript

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