Post on 27-Jan-2015
description
Progressive nhancement
by Aaron Gustafson@aarongustafsonhttp://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
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
Browser Capabilities
Content
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Content
Semantics
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Content
Semantics
Design
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Content
Semantics
Design
Interactivity
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
Content
Semantics
Design
Interactivity
Accessibility
BASIC ADVANCED
Use
r Exp
erie
nce
Browser Capabilities
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
Progressive EEnhancement
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
Progressive EEnhancement
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
Progressive EEnhancement
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
Progressive EEnhancement
EECI - October 2011
<input type="date" name="dob"/>
I get it! I don’t get it :-(
50
Fault tolerance
Ad-hocSemantics
Progressive EEnhancement
Classi!cation
Progressive EEnhancement
Identi!cation
Progressive EEnhancement
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
Progressive EEnhancement
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
Progressive EEnhancement
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
Design
Progressive EEnhancement
EECI - October 2011
p { color: red;}
Parsing errors
65
Progressive EEnhancement
EECI - October 2011
p { color: red;}
Parsing errors
65
Progressive EEnhancement
EECI - October 2011
Parsing errors
p { color: red; font-weight: bold;}
66
Progressive EEnhancement
EECI - October 2011
Parsing errors
p { color: red; font-weight: bold;}
66
Progressive EEnhancement
EECI - October 2011
Parsing errorsp { color: #ccc; color: rgba( 0, 0, 0, .5 );}
67
Progressive EEnhancement
EECI - October 2011
Parsing errorshtml[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 );}
68
Progressive EEnhancement
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 */}
Progressive EEnhancement
EECI - October 2011
Parsing errors@import 'not-for-IE7-or-below.css' screen;
@media screen, print, refrigerator { /* IE will get these rules */}
72
Progressive EEnhancement
EECI - October 2011
Organization
design
73
Progressive EEnhancement
EECI - October 2011
Organization
layout
type color
74
Progressive EEnhancement
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
Progressive EEnhancement
EECI - October 2011
Organization
type.css
layout.css
color.css
76
Progressive EEnhancement
EECI - October 2011
Organization
main.css
type.css
layout.css
color.css
76
Progressive EEnhancement
EECI - October 2011
Organization# SetupRewriteEngine onRewriteBase /
# rewrite css, img & jsRewriteRule ^css\/(.*)\.css$ /styles/$1 [L]
77
Progressive EEnhancement
EECI - October 2011
Organization
{embed="styles/typography"}
@media screen { {embed="styles/layout-screen"}}
{embed="styles/color"}
78
Progressive EEnhancement
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
Progressive EEnhancement
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"}}
@media print { {embed="styles/layout-print"}}
{embed="styles/color"}{embed="styles/effects"}
80
Progressive EEnhancement
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"}}
@media print { {embed="styles/layout-print"}}
{embed="styles/color"}{embed="styles/effects"}
81
Progressive EEnhancement
EECI - October 2011
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) { /* … */}
82
Progressive EEnhancement
EECI - October 2011
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]-->
87
Progressive EEnhancement
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
Progressive EEnhancement
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
Progressive EEnhancement
EECI - October 2011
A minor improvement<a href="http://offsite.com" onclick="newWin( this.href ); return false;"> some text</a>
94
Photo credit: Giando
Progressive EEnhancement
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
Progressive EEnhancement
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
Progressive EEnhancement
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
Progressive EEnhancement
EECI - October 2011
Anchor-include pattern{embed="inc/.comments" url_title="{segment_3}"}
105
Progressive EEnhancement
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
Progressive EEnhancement
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
Progressive EEnhancement
EECI - October 2011
Anchor-include pattern$("[data-append],[data-replace],”+ “[data-after],[data-before]").ajaxInclude();
108
Progressive EEnhancement
Media Queries
Progressive EEnhancement
EECI - October 2011
Mobile interfaces
110
Progressive EEnhancement
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
Progressive EEnhancement
EECI - October 2011
What is it?
116
Progressive EEnhancement
EECI - October 2011
What is it?
<button>Tweet</button>
<a class=”button”>Tweet</a>
<button>Tweet</button>
116
Progressive EEnhancement
EECI - October 2011
What is it?
<button>Tweet</button>
<a class=”button”>Tweet</a>
116
Progressive EEnhancement
EECI - October 2011
What is it?
117
Progressive EEnhancement
EECI - October 2011
What is it?
<button>Search Mail</button>
<div>Search Mail</div>
<button>Search Mail</button>
117
Progressive EEnhancement
EECI - October 2011
What is it?
<button>Search Mail</button>
<div>Search Mail</div>
117
Progressive EEnhancement
EECI - October 2011
ARIA maps the OS to the web
118
Semantics+
Progressive EEnhancement
EECI - October 2011
All the web’s a play…<section id="main" role="main"> <!-- The primary content for the page would go here --></section>
120
<header role="banner">
<nav role="navigation">
<form role="search">
<section role="main">
<footer role="contentinfo">
<nav role="navigation">
Progressive EEnhancement
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
Progressive EEnhancement
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
Progressive EEnhancement
EECI - October 2011
What is it?
<a role=”button”>Tweet</a><a class=”button”>Tweet</a>
131
Progressive EEnhancement
EECI - October 2011
What is it?
<a role=”button”>Tweet</a>
131
Progressive EEnhancement
EECI - October 2011 132
Progressive EEnhancement
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
Progressive EEnhancement
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
Progressive EEnhancement
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
Progressive EEnhancement
EECI - October 2011
Hey! Over here!
138
Progressive EEnhancement
EECI - October 2011
Hey! Over here!
<input class="tweet-counter" value="140" disabled="disabled">
139
Progressive EEnhancement
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
Progressive EEnhancement
EECI - October 2011
Hey! Over here!
<span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>
.hidden { position: absolute; left: −999em;}
141
Progressive EEnhancement
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
Progressive EEnhancement
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
Progressive EEnhancement
EECI - October 2011
Hey! Over here!
144
Text & HTTP
HTML
CSS
JavaScript
ARIA
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