If you’ve been working on the web for any amount of time, you’ve likely heard (or even used) the term “progressive enhancement” before. As you probably know, it is the gold standard of how to approach web design. But what is progressive enhancement really? What does it mean? How does it work? And how does it fit into our workflow in a time of rapidly evolving languages and browsers? In this session, Aaron Gustafson will answer all of these questions and provide concrete takeaways that will help you improve your web design skills.

1. CRAFTING RICH
EXPERIENCES
with progressive enhancement

2. progressive enhancement
?

3. TECHNOLOGICAL
RESTRICTIONS

5. MCMLXXVII

6. MCMLXXVII
(that’s 1977)

14. HTML CSS

15. fault tolerance
n. a system’s ability to continue to
operate when it encounters and
unexpected error.

19. BROWSERS
IGNORE WHAT
THEY DON’T
UNDERSTAND

20. GRACEFUL
DEGRADATION

21. MODERN
BROWSERS
OLDER BROWSERS

22. PROGRESSIVE
ENHANCEMENT

23. CONTENT

25. ACCESSIBILITY

26. “SPECIAL NEEDS”

27. “SPECIAL NEEDS”
CAN BE
CONTEXTUAL

29. PROGRESSIVE
GRACEFUL DEGRADATION ENHANCEMENT

30. OOOH, SHINY!

31. PROGRESSIVE
ENHANCEMENT
ISN’T ABOUT
BROWSERS

32. BROWSERS AND
TECHNOLOGIES
COME AND GO

33. DON’T LOSE
SIGHT OF
YOUR USERS

34. User Experience
BASIC ADVANCED
Browser Capabilities

35. User Experience
BASIC ADVANCED
Browser Capabilities
Content

36. User Experience
Semantics
BASIC ADVANCED
Browser Capabilities
Content

37. User Experience
Design
Semantics
BASIC ADVANCED
Browser Capabilities
Content

38. User Experience
Interactivity
Design
Semantics
BASIC ADVANCED
Browser Capabilities
Content

39. User Experience
Accessibility
Interactivity
Design
Semantics
BASIC ADVANCED
Browser Capabilities
Content

40. User Experience
ARIA
JavaScript
CSS
HTML
BASIC ADVANCED
Browser Capabilities
Text & HTTP

41. FOR EXAMPLE

42. <input type="date" name="dob"/>

43. <video poster=”poster.png”>
<source src=”video.m4v”/>
<source src=”video.webm”/>
<source src=”video.ogv”/>
<img src=”poster.png” alt=””/>
<ul>
<li><a href="video.m4v">Download MP4</a></li>
<li><a href="video.webm">Download WebM</a></li>
<li><a href="video ogv">Download Ogg</a></li>
</ul>
</video>

44. <header role=”banner”>
<h1><img src="i/logo.png"/></h1>
<nav role=”navigation”>
<ol>
<li><a href="#details">Details</a></li>
<li><a href="#schedule">Schedule</a></li>
<li><a href="#instructors">Instructors</a></li>
<li><a href="#lodging">Lodging</a></li>
<li><a href="#location">Location</a></li>
</ol>
</nav>
</header>

45. p {
color: #ccc;
color: rgba( 0, 0, 0, .5 );
}

46. html[lang] p {
color: #ccc;
color: rgba( 0, 0, 0, .5 );
}

47. IE6 & under
MOSe

48. #intro {
/* Basic Layout */
}
/* ... */
body[id=css-zen-garden] #intro {
/* Advanced Layout */
}

49. #intro {
/* Basic Layout */
}
/* ... */
[foo],
#intro {
/* Advanced Layout */
}

50. @import 'not-for-IE7-or-below.css'
screen;
@media screen, print, refrigerator {
/* IE will get these rules */
}

51. @media
screen and (min-device-width:1024px)
and (max-width:989px),
screen and (max-device-width:480px),
screen and (max-device-width:480px)
and (orientation:landscape),
screen and (min-device-width:481px)
and (orientation:portrait) {
/* Layout for narrower desktop (below 990px)
or
iPhone running iOS 3 (or equivalent)
or
iPhone running iOS 4 (or equivalent) in “landscape” view
or
iPad (or equivalent) in “portrait” view */
}

53. ARIA
JavaScript
CSS
HTML
Text & HTTP

54. Crafting Rich Experiences with
Progressive Enhancement
by Aaron Gustafson
More of the same:
http://adaptivewebdesign.info
http://easy-designs.net
http://easy-reader.net
http://aaron-gustafson.com
Slides available at
http://slideshare.net/AaronGustafson
This presentation is licensed under
Creative Commons
Attribution-Noncommercial-Share Alike 3.0
flickr Photo Credits
“Drumming circle” by Explore The Bruce
“Usability Fail” by soopahgrover
“ferris wheel? not yet…” by drcorneilus