progressive eenhancement [eeci 2011]

Progressive nhancement

by Aaron Gustafson@aarongustafsonhttp://slideshare.net/AaronGustafson

http://twitter.com/aarongustafson

http://twitter.com/aarongustafson

http://slideshare.net/AaronGustafson


TECHNOLOGICALRESTRICTIONS

MCMLXXVII(that’s 1977)

HTML CSS

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

BROWSERS IGNORE WHAT

THEY DON’T UNDERSTAND

GRACEFULDEGRADATION

MODERN BROWSERS

OLDER BROWSERS

PROGRESSIVE ENHANCEMENT

CONTENT

ACCESSIBILITY

“SPECIAL NEEDS”

CAN BECONTEXTUAL

“SPECIAL NEEDS”

GRACEFUL DEGRADATION PROGRESSIVEENHANCEMENT

OOOH SHINY!,

PROGRESSIVE ENHANCEMENT

ISN’T ABOUT BROWSERS

BROWSERS AND TECHNOLOGIES COME AND GO

DON’T LOSE SIGHT OF

YOUR USERS

BASIC ADVANCED

Use

r Exp

erie

nce

Browser Capabilities

BASIC ADVANCED

Use

r Exp

erie

nce


Content

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

BASIC ADVANCED

Use

r Exp

erie

nce


Content

Semantics

Design

Interactivity

Accessibility

BASIC ADVANCED

Use

r Exp

erie

nce


Text & HTTP

HTML

CSS

JavaScript

ARIA

Content

Contentis WHY

we build websites

Clear, well-written prose is key.

Don’t put up roadblocks.

Semantics

Progressive EEnhancement

EECI - October 2011

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’t know what">je ne sais quoi</i>.</p>

46


EECI - October 2011

Fault toleranceHTML5 introduces several reallyuseful 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.

47


EECI - October 2011

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>

48


EECI - October 2011

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>

49


EECI - October 2011

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

I get it! I don’t get it :-(

50

Fault tolerance

Ad-hocSemantics


Classi!cation


Identi!cation


EECI - October 2011

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>

56

http://retreats4geeks.com/events/2011/html5-css3/i/aaron-gustafson.jpg

http://retreats4geeks.com/events/2011/html5-css3/i/aaron-gustafson.jpg

http://webstandards.org/

http://webstandards.org/


EECI - October 2011

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>

59

Readability


EECI - October 2011

EE/CI helpersCI Microformats (helper)hcard, rel-licensehttp://codeigniter.com/wiki/microformats

VZ Address (!eldtype)hcardhttps://github.com/elivz/vz_address.ee_addon

Easy Figures (plug-in)!gurehttps://github.com/easy-designs/easy_figures.eeaddon

61

http://codeigniter.com/wiki/microformats

http://codeigniter.com/wiki/microformats

https://github.com/elivz/vz_address.ee_addon

https://github.com/elivz/vz_address.ee_addon

https://github.com/easy-designs/easy_figures.eeaddon

https://github.com/easy-designs/easy_figures.eeaddon

Design


EECI - October 2011

p { color: red;}

Parsing errors

65


EECI - October 2011

Parsing errors

p { color: red; font-weight: bold;}

66


EECI - October 2011

Parsing errorsp { color: #ccc; color: rgba( 0, 0, 0, .5 );}

67


EECI - October 2011

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

68


EECI - October 2011

Parsing errors@-moz-document url-prefix() { html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }}

69

#intro { /* Basic Layout */}

/* ... */

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

#intro { /* Basic Layout */}

/* ... */

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


EECI - October 2011

Parsing errors@import 'not-for-IE7-or-below.css' screen;

@media screen, print, refrigerator { /* IE will get these rules */}

72


EECI - October 2011

Organization

design

73


EECI - October 2011

Organization

layout

type color

74


EECI - October 2011

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);}

75


EECI - October 2011

Organization

type.css

layout.css

color.css

76


EECI - October 2011

Organization

main.css

type.css

layout.css

color.css

76


EECI - October 2011

Organization# SetupRewriteEngine onRewriteBase /

# rewrite css, img & jsRewriteRule ^css\/(.*)\.css$ /styles/$1 [L]

77


EECI - October 2011

Organization

{embed="styles/typography"}

@media screen { {embed="styles/layout-screen"}}

{embed="styles/color"}

78


EECI - October 2011

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"}

79


EECI - October 2011

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"}}



80


EECI - October 2011

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"}}



81


EECI - October 2011

Mobile-!rst@media screen and (min-width:481px) { /* … */}

@media screen and (min-width:570px) { /* … */}



82

EECI - October 2011

Monkey-patching<link rel="stylesheet" href="main.css"/>

87

http://easy-readers.net/c/main.css

http://easy-readers.net/c/main.css


EECI - October 2011

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); }

}

88

Interactivity

Photo credit: spike55151


EECI - October 2011

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>

93


EECI - October 2011

A minor improvement<a href="http://offsite.com" onclick="newWin( this.href ); return false;"> some text</a>

94

http://offsite.com

http://offsite.com

Photo credit: Giando


EECI - October 2011

Event listenerswindow.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 serveranchors[i].onclick = function(){

newWin( this.href );};

}}

}96

Photo credit: hebedesign


EECI - October 2011

Listen and delegatedocument

.getElementsByTagName( 'body' )[0].onclick = clickDelegator;

function clickDelegator( e ){

e = ( e ) ? e : event;var el = e.target || e.srcElement;// external linksif ( el.nodeName.toLowerCase() == 'a' &&

el.getAttribute( 'rel' ) == 'external' ){

newWin( el.href );}

}

98

Photo credit: ambery


EECI - October 2011

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}

104


EECI - October 2011

Anchor-include pattern{embed="inc/.comments" url_title="{segment_3}"}

105


EECI - October 2011

Anchor-include pattern$.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 ); }); } });};

https://gist.github.com/b976b67e88ffbfc9f125

106




EECI - October 2011

Replace:

Before:

After:

Anchor-include pattern

<a data-replace="articles/latest/fragment" href="...">Latest Articles</a>

<a data-after="articles/latest/fragment" href="...">Latest Articles</a>

<a data-before="articles/latest/fragment" href="...">Latest Articles</a>

107


EECI - October 2011

Anchor-include pattern$("[data-append],[data-replace],”+ “[data-after],[data-before]").ajaxInclude();

108


Media Queries


EECI - October 2011

Mobile interfaces

110


EECI - October 2011

Swapping contentvar 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'; }}

111

Accessibility


EECI - October 2011

What is it?

116


EECI - October 2011

What is it?

<button>Tweet</button>

<a class=”button”>Tweet</a>


116


EECI - October 2011

What is it?


<a class=”button”>Tweet</a>

116


EECI - October 2011

What is it?

117


EECI - October 2011

What is it?

<button>Search Mail</button>

<div>Search Mail</div>


117


EECI - October 2011

What is it?


<div>Search Mail</div>

117


EECI - October 2011

ARIA maps the OS to the web

118

Semantics+

EECI - October 2011

All the web’s a play…<section id="main" role="main"> </section>

120


EECI - October 2011

Semantic comparisonAd-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

128


EECI - October 2011

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>

130


EECI - October 2011

What is it?

<a role=”button”>Tweet</a><a class=”button”>Tweet</a>

131


EECI - October 2011

What is it?

<a role=”button”>Tweet</a>

131


EECI - October 2011 132


EECI - October 2011

What’s happening?

<span> <img src="bold-off.png" alt="bold" /></span><span> <img src="bold-on.png" alt="bold" /></span>

B(off)

B(on)

134


EECI - October 2011

What’s happening?

<span> <img src="bold-off.png" alt="not bold" /></span><span> <img src="bold-on.png" alt="bold" /></span>

B(off)

B(on)

135


EECI - October 2011

What’s happening?

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

B(off)

B(on)

136


EECI - October 2011

Hey! Over here!

138


EECI - October 2011

Hey! Over here!

<input class="tweet-counter" value="140" disabled="disabled">

139


EECI - October 2011

Hey! Over here!

<span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong></span>

140


EECI - October 2011

Hey! Over here!

<span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>

.hidden { position: absolute; left: −999em;}

141


EECI - October 2011

Hey! Over here!

<span class="tweet-counter">maximum of 140 characters</span>

<span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>

142


EECI - October 2011

Hey! Over here!

<span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>

143


EECI - October 2011

Hey! Over here!

144

Text & HTTP

HTML

CSS

JavaScript

ARIA

AdaptiveWebDesign.info

http://AdaptiveWebDesign.info

http://AdaptiveWebDesign.info

Progressive nhancementby Aaron Gustafson

More of the same:http://adaptivewebdesign.info

http://easy-designs.nethttp://easy-reader.net

http://aaron-gustafson.com

Slides available athttp://slideshare.net/AaronGustafson

This presentation is licensed underCreative Commons

Attribution-Noncommercial-Share Alike 3.0

flickr Photo Creditsflickr.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

http://adaptivewebdesign.info

http://adaptivewebdesign.info

http://easy-designs.net

http://easy-designs.net

http://easy-reader.net

http://easy-reader.net





http://www.flickr.com/photos/aarongustafson/galleries/72157627891060114/

http://www.flickr.com/photos/aarongustafson/galleries/72157627891060114/

http://www.flickr.com/photos/12738795@N00/5371968350/in/gallery-aarongustafson-72157626804733018/

http://www.flickr.com/photos/12738795@N00/5371968350/in/gallery-aarongustafson-72157626804733018/

http://www.flickr.com/photos/12738795@N00/

http://www.flickr.com/photos/12738795@N00/

http://www.flickr.com/photos/andrec/2762309284/in/gallery-aarongustafson-72157626804733018/

http://www.flickr.com/photos/andrec/2762309284/in/gallery-aarongustafson-72157626804733018/

http://www.flickr.com/photos/andrec/

http://www.flickr.com/photos/andrec/

http://www.flickr.com/photos/suavehouse113/536902862/in/gallery-aarongustafson-72157626770917028/

http://www.flickr.com/photos/suavehouse113/536902862/in/gallery-aarongustafson-72157626770917028/

http://www.flickr.com/photos/suavehouse113/

http://www.flickr.com/photos/suavehouse113/

http://www.flickr.com/photos/spike55151/2339291624/in/gallery-aarongustafson-72157627891060114/

http://www.flickr.com/photos/spike55151/2339291624/in/gallery-aarongustafson-72157627891060114/

http://www.flickr.com/photos/spike55151/

http://www.flickr.com/photos/spike55151/

http://www.flickr.com/photos/hebe/251592918/in/gallery-aarongustafson-72157627891060114/

http://www.flickr.com/photos/hebe/251592918/in/gallery-aarongustafson-72157627891060114/

http://www.flickr.com/photos/hebe/

http://www.flickr.com/photos/hebe/

progressive eenhancement [eeci 2011]

Technology

date format