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
Aaron Gustafson
@aarongustafson
slideshare.net/AaronGustafson

2. progressive enhancement
?

3. I like an escalator because
an escalator can never break,
it can only become stairs.
— Mitch Hedberg

4. an electric toothbrush
can never break, it
can only become a
toothbrush.

5. a dynamic web page can
never break, it can only
become a web page.

7. DIES IST UMSTÄNDLICH

13. TECHNOLOGICAL
RESTRICTIONS

15. MCMLXXVII

16. MCMLXXVII
(that’s 1977)

23. HTML CSS

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

28. BROWSERS
IGNORE WHAT
THEY DON’T
UNDERSTAND

29. GRACEFUL
DEGRADATION

30. MODERN
BROWSERS
OLDER BROWSERS

31. MODERN
BROWSERS
OLDER BROWSERS

32. PROGRESSIVE
ENHANCEMENT

33. CONTENT

35. ACCESSIBILITY

36. “SPECIAL NEEDS”

37. “SPECIAL NEEDS”
CAN BE
CONTEXTUAL

39. PROGRESSIVE
GRACEFUL DEGRADATION ENHANCEMENT

40. OOOH, SHINY!

41. PROGRESSIVE
ENHANCEMENT
ISN’T ABOUT
BROWSERS

42. BROWSERS AND
TECHNOLOGIES
COME AND GO

43. DON’T LOSE
SIGHT OF
YOUR USERS

44. User Experience
NEWER OLDER
Browser Age
Graceful Degradation

45. User Experience
BASIC ADVANCED
Browser & Device Capabilities
Progressive Enhancement

46. User Experience
BASIC ADVANCED
Browser & Device Capabilities
Content

47. User Experience
Semantics
BASIC ADVANCED
Browser & Device Capabilities
Content

48. User Experience
Design
Semantics
BASIC ADVANCED
Browser & Device Capabilities
Content

49. User Experience
Interactivity
Design
Semantics
BASIC ADVANCED
Browser & Device Capabilities
Content

50. User Experience
Accessibility
Interactivity
Design
Semantics
BASIC ADVANCED
Browser & Device Capabilities
Content

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

52. HTML

53. HTML5
HTML
Microformats
HTML4

54. EXAMPLES

55. BEYOND TELLERRAND 2011
PE with HTML
<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>

56. BEYOND TELLERRAND 2011
PE with HTML
<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>

57. BEYOND TELLERRAND 2011
PE with HTML
<input type="date" name="dob"/>
I get it! I don’t get it :-(

58. BEYOND TELLERRAND 2011
PE with CSS
p {
color: #ccc;
color: rgba( 0, 0, 0, .5 );
}

59. BEYOND TELLERRAND 2011
PE with CSS
html[lang] p {
color: #ccc;
color: rgba( 0, 0, 0, .5 );
}

60. IE6 & under
MOSe

61. BEYOND TELLERRAND 2011
Fault tolerance
#intro {
/* Basic Layout */
}
/* ... */
body[id=css-zen-garden] #intro {
/* Advanced Layout */
}

62. BEYOND TELLERRAND 2011
Fault tolerance
#intro {
/* Basic Layout */
}
/* ... */
[foo],
#intro {
/* Advanced Layout */
}

63. BEYOND TELLERRAND 2011
PE with CSS
@import 'not-for-IE7-or-below.css'
screen;
@media screen, print, refrigerator {
/* IE will get these rules */
}

64. BEYOND TELLERRAND 2011
PE with CSS
@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 */
}

65. BEYOND TELLERRAND 2011
PE with HTML & ARIA
<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>

66. BEYOND TELLERRAND 2011
PE with JavaScript

67. BEYOND TELLERRAND 2011
PE with JavaScript

68. BEYOND TELLERRAND 2011
PE with JavaScript
<input class="tweet-counter" value="140" disabled="disabled">

69. BEYOND TELLERRAND 2011
PE with JavaScript
<span id="chars_left_notice" class="numeric">
<strong id="status-field-char-counter"
class="char-counter">140</strong>
</span>

70. BEYOND TELLERRAND 2011
PE with JavaScript
<span class="tweet-counter">140
<b class="hidden"> characters remaining</b></span>
.hidden {
position: absolute;
left: −999em;
}

71. BEYOND TELLERRAND 2011
PE with JavaScript
<span class="tweet-counter">maximum of 140 characters</span>
<span class="tweet-counter">140
<b class="hidden"> characters remaining</b></span>

72. BEYOND TELLERRAND 2011
PE with JavaScript & ARIA
<span aria-live="polite" aria-atomic="true"
class="tweet-counter">140<b class="hidden">
characters remaining</b></span>

73. BEYOND TELLERRAND 2011
PE with JavaScript & ARIA

74. BEYOND TELLERRAND 2011
PE with JavaScript & ARIA

75. BEYOND TELLERRAND 2011
PE with JavaScript & ARIA
role="application"
aria-activedescendant="folder-1"

76. BEYOND TELLERRAND 2011
PE with JavaScript & ARIA
role="tablist"

77. BEYOND TELLERRAND 2011
PE with JavaScript & ARIA
role="tab"
aria-selected="true"
aria-controls="folder-1"

78. BEYOND TELLERRAND 2011
PE with JavaScript & ARIA
role="tab"
aria-selected="false"
aria-controls="folder-4"

79. BEYOND TELLERRAND 2011
PE with JavaScript & ARIA
role="tabpanel"
aria-hidden="false"
aria-labelledby="folder-1-tab"

80. BEYOND TELLERRAND 2011
PE with JavaScript & ARIA

81. ARIA
JavaScript
CSS
HTML
Text & HTTP

82. Available now from
easy-readers.net
or Kelly

83. 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
http://www. ickr.com/photos/aarongustafson/galleries/72157628049759763/