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.

1. Progressive Enhancement 2.0
Because the Web isn't Print
Nicholas C. Zakas
April 16, 2011

2. Who's this guy?
Presentation Contributor,
Architect Creator of YUI Test
Author Lead Author Contributor Lead Author

3. @slicknet
(Complaints: @reybango)

4. Used with permission. Copyright 2010 Xtress
http://www.flickr.com/photos/noelboss/4549392694/

6. @paul_irish
@slicknetsmom

8. A Brief History of
Web Development

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

11. 1993

13. 1994

14. 1995

15. 1996

16. Now
in
color!

20. 1995

21. Also
in
color!
1996

25. "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

26. Graceful Degradation

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

28. <noscript>

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

31. Progressive Enhancement

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

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

36. "An escalator can never break;
it can only become stairs."
Mitch Hedberg, Comedian
http://www.flickr.com/photos/midiman/336647596/

38. Behavior
Presentation
Content

39. JavaScript
CSS
HTML

41. A-Grade
JavaScript
CSS
HTML

42. C-Grade
HTML

43. Progressive Enhancement 1.0

45. We're having some problems

46. Development takes too long
http://www.flickr.com/photos/athomeinscottsdale/4507847940/

47. Too many bugs
http://www.flickr.com/photos/kaibara/4632384645/

48. http://www.flickr.com/photos/drb62/4990651560/
Our pages are slow

49. Why?

51. We got confused

52. Web page : ?

53. Web sites look like print

54. Web page : Printed page

55. 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

56. http://www.flickr.com/photos/chrisschroeder/4096627359/
Every printed book is exactly the same

57. We became obsessed with identical experiences
across all browsers
http://www.flickr.com/photos/joanna8555/5554285729/

58. http://www.flickr.com/photos/denisdervisevic/5327974794/
People got angry if you suggested otherwise

59. Quality?

60. Professional?

61. Consistency?

62. Unity of messaging combined
with brand identification while
setting user expectations
appropriately?

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

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

68. We started the analogy in the
wrong spot

69. Web page : ?

70. N G
Web page : Printed page
R O
W

71. Web browser : Web page

72. 1) WEB BROWSER : WEB PAGE ::
(a) telephone : call
(b) computer : email
(c) printed book : printed page
(d) television : television show
(e) mailbox : letter

75. Old browsers are like black & white TVs
http://www.flickr.com/photos/stevestein1982/4047834684/

76. New browsers are like HD TVs
http://www.flickr.com/photos/lge/3988988400/

77. TV already solved this problem
http://www.flickr.com/photos/navdeepraj/504596529/

78. This would be silly
Yet this is what web developers have been doing
http://www.flickr.com/photos/navdeepraj/504596529/

79. Do web sites need to look exactly
the same in every browser?

80. http://dowebsitesneedtolookexactlythesameineverybrowser.com/

81. Your site SHOULD look different
in different browsers

82. Give users an incentive to
upgrade

83. Progressive Enhancement 1.0
JavaScript
CSS
HTML

84. Progressive Enhancement 2.0
OMG CSS OMG JS
Nice CSS Nice JS
Base CSS Base JS
HTML

85. Chrome
OMG CSS Base JS
OMG
Nice CSS Base JS
Nice
Base CSS Base JS
HTML

86. Firefox
OMG JS
Nice CSS Base JS
Nice
Base CSS Base JS
HTML

87. Internet Explorer 9
Nice CSS Base JS
Nice
Base CSS Base JS
HTML

88. Internet Explorer 6
Base CSS Base JS
HTML

89. Netscape 4
HTML

90. 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

91. The best possible experience
given the device capabilities

92. Awesome! OK
OK Bad!
Value
Effort

93. Browser Marketshare
11
8
IE6
IE7
Others
81
Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2

94. Development Time Spent
40
IE6 & IE7
Others
60
Source: Me

95. Used with permission. Copyright 2008 BoyShapedBox.
http://www.flickr.com/photos/boyshapedbox/2282655473/

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

97. Rounded Corners
Drop Shadows
Gradients
Only with CSS

98. Advanced scripting and
behavior
Only with native
APIs

99. Long development time
Trying to make
older browsers
do things they were
never meant to do
Too many bugs
Slow pages

100. Older browsers often need
*a lot*
more code to do the same thing

101. 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>

102. 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>

103. Less code
=
Faster

104. Won't people notice?

105. Crying baby! Oh nos!
http://www.flickr.com/photos/tudor/318123668/

106. What did you see?

107. Crying baby! Oh nos!
http://www.flickr.com/photos/tudor/318123668/

108. Crying baby! Oh nos!
http://www.flickr.com/photos/tudor/318123668/

109. Your users only use one browser

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. @paul_irish
@slicknetsmom

123. The End

124. Etcetera
• My blog: www.nczonline.net
• Twitter: @slicknet
• Rate me: http://spkr8.com/t/7213