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 and your mastery of progressive enhancement in ExpressionEngine.

1. Progressive
nhancement
by Aaron Gustafson
@aarongustafson
http://slideshare.net/AaronGustafson

2. ?

3. TECHNOLOGICAL
RESTRICTIONS

5. MCMLXXVII
(that’s 1977)

13. HTML CSS

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

18. BROWSERS
IGNORE WHAT
THEY DON’T
UNDERSTAND

19. GRACEFUL
DEGRADATION

20. MODERN
BROWSERS
OLDER BROWSERS

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

42. Content
is WHY
we build
websites

43. Clear,
well-written
prose is key.

44. Don’t put up
roadblocks.

45. Semantics

47. Progressive EEnhancement
Fault tolerance
<p>HTML5 introduces several <em>really</em>
useful elements and a ton of new APIs.</p>
<p>Please fill out the form below.
<strong>Note: all fields are required.</strong></p>
<p>I like to work with markup languages because
<strong>they are simple and easy to read</strong>.
They also have that certain <i lang="fr" title="I
don&#8217;t know what">je ne sais quoi</i>.</p>
EECI - October 2011 46

48. Progressive EEnhancement
Fault tolerance
HTML5 introduces several really
useful elements and a ton of new APIs.
Please fill out the form below.
Note: all fields are required.
I like to work with markup languages because
they are simple and easy to read.
They also have that certain je ne sais quoi.
EECI - October 2011 47

49. Progressive EEnhancement
Fault tolerance
<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>
EECI - October 2011 48

50. Progressive EEnhancement
Fault tolerance
<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>
EECI - October 2011 49

51. Progressive EEnhancement
Fault tolerance
<input type="date" name="dob"/>
I get it! I don’t get it :-(
EECI - October 2011 50

52. Ad-hoc
Semantics

53. Progressive EEnhancement
Classi cation

54. Progressive EEnhancement
Identi cation

57. Progressive EEnhancement
Microformats
<section class="vcard">
<figure>
<img class="photo" src="aaron-gustafson.jpg" alt=""/>
</figure>
<h1 class="fn">Aaron Gustafson</h1>
…
<p>Aaron … is <b class="role">Group Manager</b> of the
<a class="org" href="http://webstandards.org">Web
Standards Project (WaSP)</a> ….</p>
</section>
EECI - October 2011 56

60. Progressive EEnhancement
Microformats
<body class="hentry">
<h1 class="entry-title">
{exp:typogrify}{title}{/exp:typogrify}
</h1>
<h3 class="author vcard">Posted by
<a class="fn" href="/archives/by-author/{username}/">
{author}</a> on
<time class="updated"
datetime="{entry_date format='%Y-%m-%dT%H:%i:%s'}"
pubdate="pudate">{entry_date format='%d %F %Y'}
</time>
<a rel="bookmark" href="{the_permalink}">Permalink</a></h3>
</h3>
<div class=”entry-content”>
{exp:typogrify}{entry_body}{/exp:typogrify}
</div>
</body>
EECI - October 2011 59

61. Readability

62. Progressive EEnhancement
EE/CI helpers
CI Microformats (helper)
hcard, rel-license
http://codeigniter.com/wiki/microformats
VZ Address ( eldtype)
hcard
https://github.com/elivz/vz_address.ee_addon
Easy Figures (plug-in)
gure
https://github.com/easy-designs/easy_figures.eeaddon
EECI - October 2011 61

63. Design

64. Progressive EEnhancement
Parsing errors
p{
color: red;
}
EECI - October 2011 65

65. Progressive EEnhancement
Parsing errors
p{
color: red;
}
EECI - October 2011 65

66. Progressive EEnhancement
Parsing errors
p{
color: red;
font-weight: bold;
}
EECI - October 2011 66

67. Progressive EEnhancement
Parsing errors
p{
color: red;
font-weight: bold;
}
EECI - October 2011 66

68. Progressive EEnhancement
Parsing errors
p {
color: #ccc;
color: rgba( 0, 0, 0, .5 );
}
EECI - October 2011 67

69. Progressive EEnhancement
Parsing errors
html[lang] p {
color: #ccc;
color: rgba( 0, 0, 0, .5 );
}
EECI - October 2011 68

70. Progressive EEnhancement
Parsing errors
@-moz-document url-prefix() {
html[lang] p {
color: #ccc;
color: rgba( 0, 0, 0, .5 );
}
}
EECI - October 2011 69

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

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

73. Progressive EEnhancement
Parsing errors
@import 'not-for-IE7-or-below.css' screen;
@media screen, print, refrigerator {
/* IE will get these rules */
}
EECI - October 2011 72

74. Progressive EEnhancement
Organization
design
EECI - October 2011 73

75. Progressive EEnhancement
Organization
type color
layout
EECI - October 2011 74

76. Progressive EEnhancement
Organization
/* =Typography */
img {
display: block;
}
/* =Layout */
@media screen {
.frame .inner {
border: 10px solid;
}
}
/* =Color */
.frame .inner {
background-color: rgb(227, 222, 215);
border-color: rgb(227, 222, 215);
}
EECI - October 2011 75

77. Progressive EEnhancement
Organization
type.css
layout.css
color.css
EECI - October 2011 76

78. Progressive EEnhancement
Organization
type.css
layout.css main.css
color.css
EECI - October 2011 76

79. Progressive EEnhancement
Organization
# Setup
RewriteEngine on
RewriteBase /
# rewrite css, img & js
RewriteRule ^css/(.*).css$ /styles/$1 [L]
EECI - October 2011 77

80. Progressive EEnhancement
Organization
{embed="styles/typography"}
@media screen {
{embed="styles/layout-screen"}
}
{embed="styles/color"}
EECI - October 2011 78

81. Progressive EEnhancement
Organization
{embed="styles/reset"}
{embed="styles/typography"}
@media screen {
{embed="styles/layout-screen"}
}
@media print {
{embed="styles/layout-print"}
}
{embed="styles/color"}
{embed="styles/effects"}
EECI - October 2011 79

82. Progressive EEnhancement
Mobile- rst
{embed="styles/reset"}
{embed="styles/typography"}
@media screen {
{embed="styles/layout-mobile"}
}
{embed="styles/layout-tablet"}
@media screen and (min-width:860px) {
{embed="styles/layout-screen"}
}
@media print {
{embed="styles/layout-print"}
}
{embed="styles/color"}
{embed="styles/effects"}
EECI - October 2011 80

83. Progressive EEnhancement
Mobile- rst
{embed="styles/reset"}
{embed="styles/typography"}
@media screen {
{embed="styles/layout-mobile"}
}
{embed="styles/layout-tablet"}
@media screen and (min-width:860px) {
{embed="styles/layout-screen"}
}
@media print {
{embed="styles/layout-print"}
}
{embed="styles/color"}
{embed="styles/effects"}
EECI - October 2011 81

84. Progressive EEnhancement
Mobile- rst
@media screen and (min-width:481px) {
/* … */
}
@media screen and (min-width:570px) {
/* … */
}
@media screen and (min-width:650px) {
/* … */
}
@media screen and (min-width:700px) {
/* … */
}
EECI - October 2011 82

89. Progressive EEnhancement
Monkey-patching
<link rel="stylesheet" href="main.css"/>
<!--[if IE 9]><link rel="stylesheet" href="ie9.css"/><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="ie8.css"/><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="ie7.css"/><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="ie6.css"/><![endif]-->
EECI - October 2011 87

90. Progressive EEnhancement
Monkey-patching
@-moz-document url-prefix() {
/* GENERATED CONTENT - FF3 doesn't allow positioning */
#extra-mile:before {
content: '';
}
#extra-mile:first-of-type:before {
content: url(extra-mile-sign.png);
}
}
EECI - October 2011 88

91. Interactivity

92. Photo credit: spike55151

93. Progressive EEnhancement
Sins of our past
<a href="javascript:someFunction();">some text</a>
<a href="javascript:void(null);"
onclick="someFunction();">some text</a>
<a href="#" onclick="someFunction();">some text</a>
EECI - October 2011 93

94. Progressive EEnhancement
A minor improvement
<a href="http://offsite.com"
onclick="newWin( this.href ); return false;">
some text</a>
EECI - October 2011 94

95. Photo credit: Giando

96. Progressive EEnhancement
Event listeners
window.onload = handleExternalLinks;
function handleExternalLinks()
{
var server = document.location.hostname;
var anchors = document.getElementsByTagName("a");
var i, href;
for( i=0; i < anchors.length; i++ )
{
href = anchors[i].href;
if ( href.indexOf("http://" + server) == -1 &&
href.indexOf("https://" + server) == -1 )
{
// HREF is not a file on my server
anchors[i].onclick = function()
{
newWin( this.href );
};
}
}
}
EECI - October 2011 96

97. Photo credit: hebedesign

98. Progressive EEnhancement
Listen and delegate
document
.getElementsByTagName( 'body' )[0]
.onclick = 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 );
}
}
EECI - October 2011 98

99. Photo credit: ambery

105. Progressive EEnhancement
Anchor-include pattern
<a data-replace="/comments/{url_title}/"
href="/archives/{entry_date format='%Y/%m/%d'}/{url_title}/
comments/#comments">View comments on this entry and add your
own</a>
{if segment_4=="comments"}
<section id="comments" class="focal">
{embed="inc/.comments" url_title="{url_title}"}
</section>
{if:else}
{comment_loader}
{/if}
EECI - October 2011 104

106. Progressive EEnhancement
Anchor-include pattern
{embed="inc/.comments" url_title="{segment_3}"}
EECI - October 2011 105

107. Progressive EEnhancement
Anchor-include pattern
https://gist.github.com/b976b67e88ffbfc9f125
$.fn.ajaxInclude = function(){
return this.each(function() {
var $el = $( this ),
target = $el.data( 'target' ),
$targetEl = target && $( target ) || $el,
methods = [ 'append', 'replace', 'before', 'after' ],
ml = methods.length,
method,
url;
while ( ml-- ) {
method = methods[ ml ];
if ( $el.is( '[data-' + method + ']' ) ) {
url = $el.data( method );
break;
}
}
if ( method == 'replace' ) { method += 'With'; }
if ( url && method ) {
$.get( url, function( data ){
$el.trigger( 'ajaxInclude', [$targetEl, data] );
$targetEl[ method ]( data );
});
}
});
};
EECI - October 2011 106

108. Progressive EEnhancement
Anchor-include pattern
Replace:
<a data-replace="articles/latest/fragment"
href="...">Latest Articles</a>
Before:
<a data-before="articles/latest/fragment"
href="...">Latest Articles</a>
After:
<a data-after="articles/latest/fragment"
href="...">Latest Articles</a>
EECI - October 2011 107

109. Progressive EEnhancement
Anchor-include pattern
$("[data-append],[data-replace],”+
“[data-after],[data-before]").ajaxInclude();
EECI - October 2011 108

110. Progressive EEnhancement
Media Queries

111. Progressive EEnhancement
Mobile interfaces
EECI - October 2011 110

112. Progressive EEnhancement
Swapping content
var trigger = 659;
// …
function toggleDisplay()
{
var width = $window.width();
if ( showing == 'old' &&
width <= trigger )
{
$old_nav.replaceWith($new_nav);
showing = 'new';
}
else if ( showing == 'new' &&
width > trigger )
{
$new_nav.replaceWith($old_nav);
showing = 'old';
}
}
EECI - October 2011 111

113. Accessibility

115. Progressive EEnhancement
What is it?
EECI - October 2011 116

116. Progressive EEnhancement
What is it?
<button>Tweet</button>
<a class=”button”>Tweet</a>
EECI - October 2011 116

117. Progressive EEnhancement
What is it?
<button>Tweet</button>
<a class=”button”>Tweet</a>
EECI - October 2011 116

118. Progressive EEnhancement
What is it?
EECI - October 2011 117

119. Progressive EEnhancement
What is it?
<button>Search Mail</button>
<div>Search Mail</div>
EECI - October 2011 117

120. Progressive EEnhancement
What is it?
<button>Search Mail</button>
<div>Search Mail</div>
EECI - October 2011 117

121. Progressive EEnhancement
ARIA maps the OS to the web
EECI - October 2011 118

122. Semantics+

123. Progressive EEnhancement
All the web’s a play…
<section id="main" role="main">
<!-- The primary content for the page would go here -->
</section>
EECI - October 2011 120

125. <header role="banner">

126. <nav role="navigation">

127. <form role="search">

128. <section role="main">

129. <footer role="contentinfo">

130. <nav role="navigation">

131. Progressive EEnhancement
Semantic comparison
Ad-hoc ARIA Role HTML5
#header, #top banner header (kind of)
#main, #content main none
#extra, .sidebar complementary, note aside
#footer, #bottom contentinfo footer
#nav navigation nav
.hentry article article
EECI - October 2011 128

133. Progressive EEnhancement
These are the droids you seek
<span role="button">OK</span>
<div role="alert">
<p>Something went wrong.</p>
</div>
<div role="alertdialog">
<p>Something went wrong.</p>
<img src="x.png" alt="dismiss" role="button" />
</div>
EECI - October 2011 130

134. Progressive EEnhancement
What is it?
<a role=”button”>Tweet</a>
class=”button”>Tweet</a>
EECI - October 2011 131

135. Progressive EEnhancement
What is it?
<a role=”button”>Tweet</a>
EECI - October 2011 131

136. Progressive EEnhancement
EECI - October 2011 132

138. Progressive EEnhancement
What’s happening?
B B
(off) (on)
<span>
<img src="bold-off.png" alt="bold" />
</span>
<span>
<img src="bold-on.png" alt="bold" />
</span>
EECI - October 2011 134

139. Progressive EEnhancement
What’s happening?
B B
(off) (on)
<span>
<img src="bold-off.png" alt="not bold" />
</span>
<span>
<img src="bold-on.png" alt="bold" />
</span>
EECI - October 2011 135

140. Progressive EEnhancement
What’s happening?
B B
(off) (on)
<span role="button" aria-pressed="false">
<img src="bold-off.png" alt="not bold" />
</span>
<span role="button" aria-pressed="true">
<img src="bold-on.png" alt="bold" />
</span>
EECI - October 2011 136

142. Progressive EEnhancement
Hey! Over here!
EECI - October 2011 138

143. Progressive EEnhancement
Hey! Over here!
<input class="tweet-counter" value="140" disabled="disabled">
EECI - October 2011 139

144. Progressive EEnhancement
Hey! Over here!
<span id="chars_left_notice" class="numeric">
<strong id="status-field-char-counter"
class="char-counter">140</strong>
</span>
EECI - October 2011 140

145. Progressive EEnhancement
Hey! Over here!
<span class="tweet-counter">140
<b class="hidden"> characters remaining</b></span>
.hidden {
position: absolute;
left: −999em;
}
EECI - October 2011 141

146. Progressive EEnhancement
Hey! Over here!
<span class="tweet-counter">maximum of 140 characters</span>
<span class="tweet-counter">140
<b class="hidden"> characters remaining</b></span>
EECI - October 2011 142

147. Progressive EEnhancement
Hey! Over here!
<span aria-live="polite" aria-atomic="true"
class="tweet-counter">140<b class="hidden">
characters remaining</b></span>
EECI - October 2011 143

148. Progressive EEnhancement
Hey! Over here!
EECI - October 2011 144

149. ARIA
JavaScript
CSS
HTML
Text & HTTP

150. AdaptiveWebDesign.info

151. Progressive nhancement
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
flickr.com/photos/aarongustafson/galleries/72157627891060114/
“Usability Fail” by soopahgrover
“ferris wheel? not yet…” by drcorneilus
“Compost 06/08/2007” by suavehouse113
“CORNERSTONE” by spike55151
“Headphone” by Giando
“Shout, shout..” by hebedesign