In this session, Aaron Gustafson covers the current best practice in Web standards development: progressive enhancement. Staring with an introduction to the topic, Aaron will walk you through the best ways to apply style and behavior to your pages, providing concrete examples and implementations that you can start using right away.

1. FUNDAMENTAL
PROGRESSIVE
ENHANCEMENT
Aaron Gustafson

2. WHAT IS
PROGRESSIVE
ENHANCEMENT?

3. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Graceful Degradation
User Experience
NEWER OLDER
Browser Age
WEB BUILDER 2.0 3

4. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Progressive Enhancement
User Experience
BASIC ADVANCED
Browser Capabilities
WEB BUILDER 2.0 4

6. it’s about
service

7. you wouldn’t do this...

8. Photo credit: dansays
but sites do...

9. Photo credit: dansays
but sites do...

10. HOW DOES
IT WORK?

11. a little treat
for everyone
Photo credit: madam.furie

15. (viewed another way)

16. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
XHTML + HTTP only
WEB BUILDER 2.0 13

17. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
CSS
XHTML + HTTP only
WEB BUILDER 2.0 13

18. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
JavaScript
CSS
XHTML + HTTP only
WEB BUILDER 2.0 13

19. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
JavaScript
some JavaScript
CSS
some CSS
XHTML + HTTP only
WEB BUILDER 2.0 13

20. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
User Experience
BASIC ADVANCED
Browser Capabilities
WEB BUILDER 2.0 14

21. LEVELS OF
SERVICE

22. LEVELS OF
SUPPORT

23. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Rise to meet needs
robust JavaScript
User Experience
some JavaScript
robust CSS
some CSS
XHTML & HTTP
WEB BUILDER 2.0 16

24. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Rise to meet needs
robust JavaScript
User Experience
some JavaScript
robust CSS
some CSS
XHTML & HTTP
WEB BUILDER 2.0 16

25. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Rise to meet needs
robust JavaScript
User Experience
some JavaScript
robust CSS
some CSS
XHTML & HTTP
WEB BUILDER 2.0 16

26. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Rise to meet needs
robust JavaScript
User Experience
some JavaScript
robust CSS
some CSS
XHTML & HTTP
WEB BUILDER 2.0 16

27. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Rise to meet needs
robust JavaScript
User Experience
some JavaScript
robust CSS
some CSS
XHTML & HTTP
WEB BUILDER 2.0 16

28. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Rise to meet needs
robust JavaScript
User Experience
some JavaScript
robust CSS
some CSS
XHTML & HTTP
WEB BUILDER 2.0 16

29. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Rely on your baseline
robust JavaScript
User Experience
some JavaScript
robust CSS
some CSS
XHTML & HTTP
WEB BUILDER 2.0 17

30. Photo credit: PetitPlat by sk_
you can
still be
creative

31. every key we press
a!ects user experience
Photo credit: JasonRogers

32. PROGRESSIVE
ENHANCEMENT
WITH CSS

33. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
layout.css
color.css
main.css
type.css
WEB BUILDER 2.0 21

34. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
type.css
layout.css color.css
WEB BUILDER 2.0 21

35. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; />
href=quot;main.cssquot;
href=quot;color.cssquot; />
WEB BUILDER 2.0 22

36. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;main.cssquot; />/>
href=quot;layout.cssquot;
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; />
WEB BUILDER 2.0 22

37. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; />
WEB BUILDER 2.0 23

38. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;print.cssquot; media=quot;printquot; />
WEB BUILDER 2.0 23

39. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;print.cssquot; media=quot;printquot; />
WEB BUILDER 2.0 23

40. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
@import 'screen.css';
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;print.cssquot; media=quot;printquot; />
WEB BUILDER 2.0 23

41. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
@import 'screen.css';screen;
'screen.css' s;
@import 'print.css' print;
@import 'mobile.css' handheld;
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;print.cssquot; media=quot;printquot; />
WEB BUILDER 2.0 23

42. (the browser that wouldn’t die)
Photo credit: oskay

43. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; />
WEB BUILDER 2.0 25

44. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; />
<!--[if IE lte 7]>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;ie7.cssquot; />
<![endif]-->
WEB BUILDER 2.0 25

45. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; />
<!--[if IE lte 7]>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;ie7.cssquot; />
<![endif]-->
<!--[if IE lte 6]>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;ie6.cssquot; />
<![endif]-->
WEB BUILDER 2.0 25

46. property: value;
html>/**/body
_property: value;
* html voice-family: quot;quot;}quot;quot;;
-property: value;
voice-family:inherit;
*:first-child+html

47. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Make smart decisions
WEB BUILDER 2.0 27

48. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Make smart decisions
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Contact Us</legend>
<p>Send us a message. All fields are required.</p>
<ol>
<li>
<label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
</li>
<li>
<label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
</li>
<li>
<label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
cols=quot;30quot;></textarea>
</li>
</ol>
<button type=quot;submitquot;>Send It</button>
</fieldset>
</form>
WEB BUILDER 2.0 27

49. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Make smart decisions
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Contact Us</legend>
<p>Send us a message. All fields are required.</p>
<ol>
<li>
<label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
</li>
<li>
<label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
</li>
<li>
<label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
cols=quot;30quot;></textarea>
</li>
</ol>
<button type=quot;submitquot;>Send It</button>
</fieldset>
</form>
WEB BUILDER 2.0 27

50. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Make smart decisions
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Contact Us</legend>
<p>Send us a message. All fields are required.</p>
<ol>
<li>
<label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
</li>
<li>
<label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
</li>
<li>
<label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
cols=quot;30quot;></textarea>
</li>
</ol>
<button type=quot;submitquot;>Send It</button>
</fieldset>
</form>
WEB BUILDER 2.0 27

51. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Make smart decisions
label:after {
content: quot;:quot;;
}
WEB BUILDER 2.0 27

52. PROGRESSIVE
ENHANCEMENT
WITH CSS

53. QUESTIONS?

54. inspired?

55. PROGRESSIVE
ENHANCEMENT
WITH JAVASCRIPT

56. Photo credit: andyburnfield
proper planning...

57. ...can keep you from looking
foolish

58. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Consider lala.com
WEB BUILDER 2.0 36

59. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Without JavaScript
WEB BUILDER 2.0 37

60. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
And looking at the markup...
WEB BUILDER 2.0 38

61. Photo credit: spike55151

62. Photo credit: drp

63. listen?
Photo credit: Giando

64. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Event Listening
window.onload = handleExternalLinks;
function handleExternalLinks(){
var server = document.location.hostname;
var anchors = document.getElementsByTagName(quot;aquot;);
var i, href;
for( i=0; i < anchors.length; i++ ){
href = anchors[i].href;
if( href.indexOf(quot;http://quot; + server) == -1 &&
href.indexOf(quot;https://quot; + server) == -1 ){
// HREF is not a file on my server
anchors[i].onclick = function(){
newWin( this.href );
};
}
}
}
WEB BUILDER 2.0 42

65. or
delegate?
Photo credit: hebedesign

66. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Event delegation
document.getElementsByTagName( 'body' )[0].onclick = quot;
clickDelegator;
function clickDelegator( e ){
e = ( e ) ? e : event;
var el = e.target || e.srcElement;
// external links
if( el.nodeName.toLowerCase() == 'a' &&
el.getAttribute( 'rel' ) == 'external' ){
newWin( el.href );
}
}
WEB BUILDER 2.0 44

67. style
can get out of hand
Photo credit: thus spake drake

68. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Smart styles
ul.TabInterface-tab-list {
position: absolute;
top: 0;
left: 0;
width: 100%;
border-bottom: 3px solid;
margin: 0 0 3px;
}
ul.TabInterface- tab-list li {
border-left: 1px solid;
cursor: pointer;
float: left;
display: inline;
width: 25%;
padding-bottom: 1em;
margin-right: -1px;
}
WEB BUILDER 2.0 46

69. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
No style before its time
<div id=quot;mainquot; class=quot;tabbedquot;>
becomes
<div id=quot;mainquot; class=quot;tabbed-onquot;>
WEB BUILDER 2.0 47

70. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
No style before its time
Default Activated
add “-on” to the class .tabbed .tabbed-on
add an activation class .auto-submit .auto-submit.active
change the form of the class .replace-me .replaced
WEB BUILDER 2.0 47

71. before you
LEAP
Photo credit: josh-n

72. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Look for methods
function someFunction(){
if( !document.getElementsByTagName ) return;
// code that uses document.getElementsByTagName()
...
}
WEB BUILDER 2.0 49

73. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Look for methods
function someFunction(){
if( !document.getElementsByTagName ||
!document.getElementById ) return;
/* code that uses document.getElementsByTagName()
and document.getElementById() */
}
WEB BUILDER 2.0 50

74. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Look for elements
function someFunction(){
if( !document.getElementsByTagName ||
!document.getElementsByTagName( 'p' ) ) return;
/* code that uses document.getElementsByTagName()
and requires the presence of a P element */
...
}
WEB BUILDER 2.0 51

75. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Look for identified elements
function someFunction(){
if( !document.getElementById ||
!document.getElementById( 'content' ) ) return;
// code that requires the presence of #content
...
}
WEB BUILDER 2.0 52

76. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Look for objects
function someFunction(){
if( typeof( Prototype ) == 'undefined' ) return;
// code that uses Prototype
...
}
WEB BUILDER 2.0 53

77. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Look for object versions
function someFunction(){
if( typeof( Prototype ) == 'undefined' ||
parseFloat( Prototype.Version ) < 1.5 ) return;
// code that uses Prototype 1.5 or higher
...
}
WEB BUILDER 2.0 54

78. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Look before you leap
window.onload = function(){
if( document.getElementsByTagName &&
document.getElementById ){
someFunction();
}
};
WEB BUILDER 2.0 55

79. PROGRESSIVE
ENHANCEMENT
WITH JAVASCRIPT

80. QUESTIONS?

81. Photo credit: masstistraction
it’s easier than this

82. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Example: Tab Interface
Goal: to create a panel-based widget
WEB BUILDER 2.0 59

83. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Traditional approach
<h1>Pumpkin Pie</h1>
<div class=quot;containerquot;>
<div class=quot;sectionquot;>
<h2>Overview</h2>
<img src=quot;pie.jpgquot; alt=quot;quot;>
<p>Whether you're hosting a festive party or a casual get-together with
friends, our Pumpkin Pie will make entertaining easy!</p>
...
</div>
...
<ul class=quot;tabsquot;>
<li><a href=quot;#quot;>Overview</a></li>
<li><a href=quot;#quot;>Ingredients</a></li>
<li><a href=quot;#quot;>Directions</a></li>
<li><a href=quot;#quot;>Nutrition</a></li>
</ul>
</div>
WEB BUILDER 2.0 60

84. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Traditional approach
<h1>Pumpkin Pie</h1>
<div class=quot;containerquot;>
<div class=quot;sectionquot;>
<h2>Overview</h2>
<img src=quot;pie.jpgquot; alt=quot;quot;>
<p>Whether you're hosting a festive party or a casual get-together with
friends, our Pumpkin Pie will make entertaining easy!</p>
...
</div>
...
<ul class=quot;tabsquot;>
<li><a href=quot;#quot;>Overview</a></li>
<li><a href=quot;#quot;>Ingredients</a></li>
<li><a href=quot;#quot;>Directions</a></li>
<li><a href=quot;#quot;>Nutrition</a></li>
</ul>
</div>
WEB BUILDER 2.0 60

85. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Traditional approach
<h1>Pumpkin Pie</h1>
<div class=quot;containerquot;>
<div class=quot;sectionquot;>
<h2>Overview</h2>
<img src=quot;pie.jpgquot; alt=quot;quot;>
<p>Whether you're hosting a festive party or a casual get-together with
friends, our Pumpkin Pie will make entertaining easy!</p>
...
</div>
...
<ul class=quot;tabsquot;>
<li><a href=quot;#quot;>Overview</a></li>
<li><a href=quot;#quot;>Ingredients</a></li>
<li><a href=quot;#quot;>Directions</a></li>
<li><a href=quot;#quot;>Nutrition</a></li>
</ul>
</div>
WEB BUILDER 2.0 60

86. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Traditional approach
<h1>Pumpkin Pie</h1>
<div class=quot;containerquot;>
<div class=quot;sectionquot;>
<h2>Overview</h2>
<img src=quot;pie.jpgquot; alt=quot;quot;>
<p>Whether you're hosting a festive party or a casual get-together with
friends, our Pumpkin Pie will make entertaining easy!</p>
...
</div>
...
<ul class=quot;tabsquot;>
<li><a href=quot;#quot;>Overview</a></li>
<li><a href=quot;#quot;>Ingredients</a></li>
<li><a href=quot;#quot;>Directions</a></li>
<li><a href=quot;#quot;>Nutrition</a></li>
</ul>
</div>
WEB BUILDER 2.0 60

87. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Static HTML with no style
WEB BUILDER 2.0 61

88. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
A little typography
WEB BUILDER 2.0 62

89. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Typography and color
WEB BUILDER 2.0 63

90. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Static HTML with no style
WEB BUILDER 2.0 64

91. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Static HTML with no style
.tabbed
WEB BUILDER 2.0 64

92. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
The actual source
<h1>Pumpkin Pie</h1>
<div class=quot;tabbedquot;>
<h2>Overview</h2>
<img src=quot;pie.jpgquot; alt=quot;quot; />
<p>Whether you're hosting a festive party or a casual get-together with friends,
our Pumpkin Pie will make entertaining easy!</p>
...
<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title=quot;inchquot;>in</abbr>) unbaked deep dish pie crust</li>
<li>! cup white sugar</li>
<li>1 <abbr title=quot;teaspoonquot;>tsp</abbr> ground cinnamon</li>
...
</ul>
<h2>Directions</h2>
...
</div>
WEB BUILDER 2.0 65

93. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
The actual source
<h1>Pumpkin Pie</h1>
<div class=quot;tabbedquot;>
<h2>Overview</h2>
<img src=quot;pie.jpgquot; alt=quot;quot; />
<p>Whether you're hosting a festive party or a casual get-together with friends,
our Pumpkin Pie will make entertaining easy!</p>
...
<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title=quot;inchquot;>in</abbr>) unbaked deep dish pie crust</li>
<li>! cup white sugar</li>
<li>1 <abbr title=quot;teaspoonquot;>tsp</abbr> ground cinnamon</li>
...
</ul>
<h2>Directions</h2>
...
</div>
WEB BUILDER 2.0 65

94. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Understanding the flow
WEB BUILDER 2.0 66

95. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
The full experience
WEB BUILDER 2.0 67

96. QUESTIONS?

97. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Example: Collapsing Form
Goal: to create a search form with optional advanced filters.
By default the optional filters should be hidden, but users
should be able to show and hide them as they need to.
WEB BUILDER 2.0 69

98. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Collapsing Form as HTML
WEB BUILDER 2.0 70

99. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Collapsing Form with CSS
WEB BUILDER 2.0 71

100. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Collapsing Form with CSS
WEB BUILDER 2.0 72

101. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Collapsing Form with CSS
WEB BUILDER 2.0 73

102. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
HTML hooks
WEB BUILDER 2.0 74

103. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
HTML hooks
form.collapsing
WEB BUILDER 2.0 74

104. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
HTML hooks
fieldset.optional
WEB BUILDER 2.0 74

105. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Understanding the flow
WEB BUILDER 2.0 75

106. FUNDAMENTAL PROGRESSIVE ENHANCEMENT
Collapsing Form with JS
WEB BUILDER 2.0 76

107. QUESTIONS?

108. FUNDAMENTAL
PROGRESSIVE
ENHANCEMENT
Aaron Gustafson

109. Slides available at
http://slideshare.net/AaronGustafson
This presentation is licensed under
Creative Commons
Attribution-Noncommercial-Share Alike 3.0
flickr Photo Credits
“MacBook Pro” by dansays
“M&M” by madame.furie
“Six-layered chocolate cake” by PetitPlat
“Day 486 / 365 - Late Night High Level Coding” by JasonRogers
“Leghoul” by oskay
“Risk” by andyburnfield
“fr tom” by ambery
“CORNERSTONE” by spike55151
“Freedom” by drp
“Headphone” by Giando
“Shout, shout” by hebedesign
“The writing is on the wall” by thus spake drake
“Tiger Leaping Gorge - Ram” by josh-n
“some assembly required” by massdistraction