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!

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

6. http://www.flickr.com/photos/marc_smith/447183492/
http://www.flickr.com/photos/marc_smith/447183492/

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

22. Graceful Degradation

23. "Property of Bri if
zombies attack."

24. http://www.digital-web.com/articles/fluid_thinking/

25. <noscript>

26. <noscript>Your browser doesn't
support JavaScript. Sucks to be you.
Bye.</noscript>

28. Progressive Enhancement

29. http://www.alistapart.com/articles/understandingprogressiveenhancement/

32. http://www.alistapart.com/articles/understandingprogressiveenhancement/

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/

35. Behavior
Presentation
Content

36. JavaScript
CSS
HTML

38. A-Grade
JavaScript
CSS
HTML

39. C-Grade
HTML

40. Progressive Enhancement 1.0

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?

61. http://xark.typepad.com/my_weblog/2008/01/bullshit-still.html

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. http://www.flickr.com/photos/ramdac/377087239/

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?

78. http://dowebsitesneedtolookexactlythesameineverybrowser.com/

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/

94. http://www.flickr.com/photos/myphotoshopbrushes/3242490894/

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

121. http://www.flickr.com/photos/navdeepraj/504596529/

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