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.
love4044Hi, 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 Vera1 year ago
Aaron Gustafson, Web Professional at Easy Designs, LLCI 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.1 year ago
Are you sure you want to
Alysson Franklin, Front-End Engineer at IBMHi 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!1 year ago
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’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 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 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">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
Rubén Rojas![Progressive EEnhancement [EECI 2011]](http://cdn.slidesharecdn.com/ss_thumbnails/progressiveeenhancement-111021081342-phpapp02-thumbnail-2.jpg?1319203285){kind=small}
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 1 year ago
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. 1 year ago