Progressive EEnhancement [EECI 2011]
 

Progressive EEnhancement [EECI 2011]

on

  • 11,515 views

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

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.

Statistics

Views

Total Views
11,515
Views on SlideShare
8,451
Embed Views
3,064

Actions

Likes
20
Downloads
113
Comments
4

248 Embeds 3,064

http://localhost 1714
http://blog.easy-designs.net 247
http://127.0.0.1 89
http://fiddle.jshell.net 56
http://responsive-iframe.dev 52
http://pruebaiframe.kumointernet.com 37
http://local-fjordkraft.reaktorutv.no 33
http://192.168.0.64 20
http://jowu-ld 18
http://oe1.orf.at 18
http://192.168.100.38 18
http://10.30.163.57 17
http://projectsdisplay.com 17
http://www.viroproject.com 15
http://dev3.www.windmobile.ca 15
http://hg 14
http://testserverjamedo.nl 14
http://absoluthot.de 13
http://a0.twimg.com 12
http://digiworks 12
http://isa 11
http://s.codepen.io 10
http://tbsweb 10
http://connecthtml.jayonsoftware.com 10
http://bamboocharadio.com 10
http://politikerchecklistan.se.preview.citynetwork.se 9
http://athaullah 9
http://balance-music 9
http://www.plancess360.com 9
http://66.147.244.107 9
http://10.10.3.219 8
http://romeutestando.blogspot.com.br 8
http://www.synapsoft.co.kr 8
http://localhost:8888 8
http://www.welt.de 8
http://www.geoforma.biz 8
http://edities.com 7
http://project.tiggzi.com 7
http://172.10.1.4 7
http://ref.willem.dnz 7
http://79.170.44.138 7
http://fabricadeherois2.blogspot.com.br 7
http://sorabhsaluja 7
http://192.168.1.68 7
http://stitchcollective.com 7
http://www.demos.renangalvan.com 6
http://i.blnr.de 6
http://dev.cassiop.com 6
http://comingsoon.fandango.com 6
https://twitter.com 6
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi, I am Vera!
    please how are you! hope you are fine and in perfect condition of health.I went through your profile and i read it and took interest in it,please if you don't mind i will like you to write me on this ID (vera_life4@yahoo.com)hope to hear from you soon,and I will be waiting for your mail because i have something VERY important to tell you.
    Lots of love
    Vera
    Are you sure you want to
    Your message goes here
    Processing…
  • Great Presentation
    Are you sure you want to
    Your message goes here
    Processing…
  • I do believe that accessibility should be integrated throughout your process. In fact, with progressive enhancement as the guiding philosophy, sites will be inherently more accessible. At each stage in the process/presentation, I actually talk about how the choices we make affect the usability of our site, from the way content is written to the color contrast used in the design to the way we approach JavaScript.

    The “cherry on top” is the explicit accessibility enhancements many have not considered as part of their standard development process. As most of the folks I talk to/present to are not familiar with ARIA and the like, I chose to separate that facet out so that it could be focused on explicitly.

    And even if someone never gets to the point of adding ARIA roles, etc., if they’ve followed the other guidelines I’ve offered, the sites they produce will be far more accessible than the vast majority of what’s out there.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi Aaron, great presentation! One question, specifically abt Accessibilty: On slides #39/40 you put accessibility as a cherry on a cake, but you don’t think its important to consider this matter since the beginning? For example, isn’t that good to have a semantic navigation powered with accesskey or/and tabindex attribs since the beginning instead of add accessibility concerns only after ensure the scripts are granting the same experience for all devices? So Accessibility could be not just the last part of the job, but a concern over the whole process? cheers m8, keep up the great work!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Progressive EEnhancement [EECI 2011] Progressive EEnhancement [EECI 2011] Presentation Transcript

  • Progressive nhancementby Aaron Gustafson@aarongustafsonhttp://slideshare.net/AaronGustafson
  • ?
  • TECHNOLOGICAL RESTRICTIONS
  • MCMLXXVII (that’s 1977)
  • HTML CSS
  • fault tolerancen. a system’s ability to continue tooperate when it encounters andunexpected error.
  • BROWSERSIGNORE WHAT THEY DON’TUNDERSTAND
  • GRACEFULDEGRADATION
  • MODERNBROWSERS OLDER BROWSERS
  • MODERNBROWSERS OLDER BROWSERS
  • PROGRESSIVEENHANCEMENT
  • CONTENT
  • ACCESSIBILITY
  • “SPECIAL NEEDS”
  • “SPECIAL NEEDS” CAN BE CONTEXTUAL
  • PROGRESSIVEGRACEFUL DEGRADATION ENHANCEMENT
  • OOOH, SHINY!
  • PROGRESSIVEENHANCEMENT ISN’T ABOUT BROWSERS
  • BROWSERS ANDTECHNOLOGIES COME AND GO
  • DON’T LOSE SIGHT OFYOUR USERS
  • User Experience BASIC ADVANCED Browser Capabilities
  • User Experience BASIC ADVANCED Browser Capabilities Content
  • User Experience Semantics BASIC ADVANCED Browser Capabilities Content
  • User Experience Design Semantics BASIC ADVANCED Browser Capabilities Content
  • User Experience Interactivity Design Semantics BASIC ADVANCED Browser Capabilities Content
  • User Experience Accessibility Interactivity Design Semantics BASIC ADVANCED Browser Capabilities Content
  • User Experience ARIA JavaScript CSS HTML BASIC ADVANCED Browser Capabilities Text & HTTP
  • Content
  • Content is WHYwe buildwebsites
  • Clear,well-writtenprose is key.
  • Don’t put uproadblocks.
  • Semantics
  • Progressive EEnhancementFault 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
  • Progressive EEnhancementFault 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
  • Progressive EEnhancementFault 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
  • Progressive EEnhancementFault 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
  • Progressive EEnhancementFault tolerance <input type="date" name="dob"/> I get it! I don’t get it :-(EECI - October 2011 50
  • Ad-hocSemantics
  • Progressive EEnhancementClassi cation
  • Progressive EEnhancementIdenti cation
  • Progressive EEnhancementMicroformats <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
  • Progressive EEnhancementMicroformats <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
  • Readability
  • Progressive EEnhancementEE/CI helpersCI Microformats (helper)hcard, rel-licensehttp://codeigniter.com/wiki/microformatsVZ Address ( eldtype)hcardhttps://github.com/elivz/vz_address.ee_addonEasy Figures (plug-in) gurehttps://github.com/easy-designs/easy_figures.eeaddonEECI - October 2011 61
  • Design
  • Progressive EEnhancementParsing errors p{ color: red; }EECI - October 2011 65
  • Progressive EEnhancementParsing errors p{ color: red; }EECI - October 2011 65
  • Progressive EEnhancementParsing errors p{ color: red; font-weight: bold; }EECI - October 2011 66
  • Progressive EEnhancementParsing errors p{ color: red; font-weight: bold; }EECI - October 2011 66
  • Progressive EEnhancementParsing errors p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }EECI - October 2011 67
  • Progressive EEnhancementParsing errors html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }EECI - October 2011 68
  • Progressive EEnhancementParsing errors @-moz-document url-prefix() { html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); } }EECI - October 2011 69
  • #intro { /* Basic Layout */}/* ... */body[id=css-zen-garden] #intro { /* Advanced Layout */}
  • #intro { /* Basic Layout */}/* ... */[foo], #intro { /* Advanced Layout */}
  • Progressive EEnhancementParsing errors @import not-for-IE7-or-below.css screen; @media screen, print, refrigerator { /* IE will get these rules */ }EECI - October 2011 72
  • Progressive EEnhancementOrganization designEECI - October 2011 73
  • Progressive EEnhancementOrganization type color layoutEECI - October 2011 74
  • Progressive EEnhancementOrganization /* =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
  • Progressive EEnhancementOrganization type.css layout.css color.cssEECI - October 2011 76
  • Progressive EEnhancementOrganization type.css layout.css main.css color.cssEECI - October 2011 76
  • Progressive EEnhancementOrganization # Setup RewriteEngine on RewriteBase / # rewrite css, img & js RewriteRule ^css/(.*).css$ /styles/$1 [L]EECI - October 2011 77
  • Progressive EEnhancementOrganization {embed="styles/typography"} @media screen {   {embed="styles/layout-screen"} } {embed="styles/color"}EECI - October 2011 78
  • Progressive EEnhancementOrganization {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
  • Progressive EEnhancementMobile- 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
  • Progressive EEnhancementMobile- 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
  • Progressive EEnhancementMobile- 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
  • Progressive EEnhancementMonkey-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
  • Progressive EEnhancementMonkey-patching @-moz-document url-prefix() { /* GENERATED CONTENT - FF3 doesnt allow positioning */ #extra-mile:before { content: ; } #extra-mile:first-of-type:before { content: url(extra-mile-sign.png); } }EECI - October 2011 88
  • Interactivity
  • Photo credit: spike55151
  • Progressive EEnhancementSins 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
  • Progressive EEnhancementA minor improvement <a href="http://offsite.com" onclick="newWin( this.href ); return false;"> some text</a>EECI - October 2011 94
  • Photo credit: Giando
  • Progressive EEnhancementEvent 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
  • Photo credit: hebedesign
  • Progressive EEnhancementListen 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
  • Photo credit: ambery
  • Progressive EEnhancementAnchor-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
  • Progressive EEnhancementAnchor-include pattern {embed="inc/.comments" url_title="{segment_3}"}EECI - October 2011 105
  • Progressive EEnhancementAnchor-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
  • Progressive EEnhancementAnchor-include patternReplace: <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
  • Progressive EEnhancementAnchor-include pattern $("[data-append],[data-replace],”+ “[data-after],[data-before]").ajaxInclude();EECI - October 2011 108
  • Progressive EEnhancementMedia Queries
  • Progressive EEnhancementMobile interfacesEECI - October 2011 110
  • Progressive EEnhancementSwapping 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
  • Accessibility
  • Progressive EEnhancementWhat is it?EECI - October 2011 116
  • Progressive EEnhancementWhat is it? <button>Tweet</button> <a class=”button”>Tweet</a>EECI - October 2011 116
  • Progressive EEnhancementWhat is it? <button>Tweet</button> <a class=”button”>Tweet</a>EECI - October 2011 116
  • Progressive EEnhancementWhat is it?EECI - October 2011 117
  • Progressive EEnhancementWhat is it? <button>Search Mail</button> <div>Search Mail</div>EECI - October 2011 117
  • Progressive EEnhancementWhat is it? <button>Search Mail</button> <div>Search Mail</div>EECI - October 2011 117
  • Progressive EEnhancementARIA maps the OS to the webEECI - October 2011 118
  • Semantics+
  • Progressive EEnhancementAll the web’s a play… <section id="main" role="main"> <!-- The primary content for the page would go here --> </section>EECI - October 2011 120
  • <header role="banner">
  • <nav role="navigation">
  • <form role="search">
  • <section role="main">
  • <footer role="contentinfo">
  • <nav role="navigation">
  • Progressive EEnhancementSemantic 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 articleEECI - October 2011 128
  • Progressive EEnhancementThese 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
  • Progressive EEnhancementWhat is it? <a role=”button”>Tweet</a> class=”button”>Tweet</a>EECI - October 2011 131
  • Progressive EEnhancementWhat is it? <a role=”button”>Tweet</a>EECI - October 2011 131
  • Progressive EEnhancementEECI - October 2011 132
  • Progressive EEnhancementWhat’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
  • Progressive EEnhancementWhat’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
  • Progressive EEnhancementWhat’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
  • Progressive EEnhancementHey! Over here!EECI - October 2011 138
  • Progressive EEnhancementHey! Over here! <input class="tweet-counter" value="140" disabled="disabled">EECI - October 2011 139
  • Progressive EEnhancementHey! 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
  • Progressive EEnhancementHey! Over here! <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span> .hidden { position: absolute; left: −999em; }EECI - October 2011 141
  • Progressive EEnhancementHey! 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
  • Progressive EEnhancementHey! Over here! <span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>EECI - October 2011 143
  • Progressive EEnhancementHey! Over here!EECI - October 2011 144
  • ARIAJavaScript CSS HTMLText & HTTP
  • AdaptiveWebDesign.info
  • 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