Your SlideShare is downloading. ×
0
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              ...
User Experience                      Semantics             BASIC                          ADVANCED                     Bro...
User Experience                         Design                      Semantics             BASIC                          A...
User Experience                     Interactivity                         Design                      Semantics           ...
User Experience                     Accessibility                     Interactivity                         Design        ...
User Experience                          ARIA                      JavaScript                           CSS               ...
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 API...
Progressive EEnhancementFault tolerance  HTML5 introduces several really  useful elements and a ton of new APIs.  Please f...
Progressive EEnhancementFault tolerance  <video poster=”poster.png”>   <source src=”video.m4v”/>   <source src=”video.webm...
Progressive EEnhancementFault tolerance  <video poster=”poster.png”>   <source src=”video.m4v”/>   <source src=”video.webm...
Progressive EEnhancementFault tolerance  <input type="date" name="dob"/>                      I get it!     I don’t get it...
Ad-hocSemantics
Progressive EEnhancementClassi cation
Progressive EEnhancementIdenti cation
Progressive EEnhancementMicroformats  <section class="vcard">   <figure>     <img class="photo" src="aaron-gustafson.jpg" ...
Progressive EEnhancementMicroformats  <body class="hentry">   <h1 class="entry-title">    {exp:typogrify}{title}{/exp:typo...
Readability
Progressive EEnhancementEE/CI helpersCI Microformats (helper)hcard, rel-licensehttp://codeigniter.com/wiki/microformatsVZ ...
Design
Progressive EEnhancementParsing errors                           p{                             color: red;               ...
Progressive EEnhancementParsing errors                           p{                             color: red;               ...
Progressive EEnhancementParsing errors                           p{                             color: red;               ...
Progressive EEnhancementParsing errors                           p{                             color: red;               ...
Progressive EEnhancementParsing errors  p {    color: #ccc;    color: rgba( 0, 0, 0, .5 );  }EECI - October 2011          ...
Progressive EEnhancementParsing errors  html[lang] p {    color: #ccc;    color: rgba( 0, 0, 0, .5 );  }EECI - October 201...
Progressive EEnhancementParsing errors  @-moz-document url-prefix() {    html[lang] p {      color: #ccc;      color: rgba...
#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 {    ...
Progressive EEnhancementOrganization                           designEECI - October 2011                 73
Progressive EEnhancementOrganization                           type        color                              layoutEECI -...
Progressive EEnhancementOrganization  /* =Typography */  img {    display: block;  }  /* =Layout */  @media screen {    .f...
Progressive EEnhancementOrganization                      type.css                      layout.css                      co...
Progressive EEnhancementOrganization                      type.css                      layout.css   main.css             ...
Progressive EEnhancementOrganization  # Setup  RewriteEngine on  RewriteBase /  # rewrite css, img & js  RewriteRule ^css/...
Progressive EEnhancementOrganization  {embed="styles/typography"}  @media screen {    {embed="styles/layout-screen"}  }  {...
Progressive EEnhancementOrganization  {embed="styles/reset"}  {embed="styles/typography"}  @media screen {    {embed="styl...
Progressive EEnhancementMobile- rst  {embed="styles/reset"}  {embed="styles/typography"}  @media screen {    {embed="style...
Progressive EEnhancementMobile- rst  {embed="styles/reset"}  {embed="styles/typography"}  @media screen {    {embed="style...
Progressive EEnhancementMobile- rst  @media screen and (min-width:481px) {    /* … */  }  @media screen and (min-width:570...
Progressive EEnhancementMonkey-patching  <link rel="stylesheet" href="main.css"/>  <!--[if IE 9]><link rel="stylesheet" hr...
Progressive EEnhancementMonkey-patching  @-moz-document url-prefix() {        /* GENERATED CONTENT - FF3 doesnt allow posi...
Interactivity
Photo credit: spike55151
Progressive EEnhancementSins of our past  <a href="javascript:someFunction();">some text</a>  <a href="javascript:void(nul...
Progressive EEnhancementA minor improvement  <a href="http://offsite.com"     onclick="newWin( this.href ); return false;"...
Photo credit: Giando
Progressive EEnhancementEvent listeners  window.onload = handleExternalLinks;  function handleExternalLinks()  {    var se...
Photo credit: hebedesign
Progressive EEnhancementListen and delegate  document    .getElementsByTagName( body )[0]      .onclick = clickDelegator; ...
Photo credit: ambery
Progressive EEnhancementAnchor-include pattern  <a data-replace="/comments/{url_title}/"     href="/archives/{entry_date f...
Progressive EEnhancementAnchor-include pattern  {embed="inc/.comments" url_title="{segment_3}"}EECI - October 2011        ...
Progressive EEnhancementAnchor-include pattern                                                                   https://g...
Progressive EEnhancementAnchor-include patternReplace:  <a data-replace="articles/latest/fragment"     href="...">Latest A...
Progressive EEnhancementAnchor-include pattern  $("[data-append],[data-replace],”+    “[data-after],[data-before]").ajaxIn...
Progressive EEnhancementMedia Queries
Progressive EEnhancementMobile interfacesEECI - October 2011        110
Progressive EEnhancementSwapping content  var trigger = 659;  // …  function toggleDisplay()  {      var width = $window.w...
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 wou...
<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 ...
Progressive EEnhancementThese are the droids you seek  <span role="button">OK</span>  <div role="alert">   <p>Something we...
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)...
Progressive EEnhancementWhat’s happening?                            B         B                            (off)     (on)...
Progressive EEnhancementWhat’s happening?                            B         B                            (off)     (on)...
Progressive EEnhancementHey! Over here!EECI - October 2011        138
Progressive EEnhancementHey! Over here!  <input class="tweet-counter" value="140" disabled="disabled">EECI - October 2011 ...
Progressive EEnhancementHey! Over here!  <span id="chars_left_notice" class="numeric">   <strong id="status-field-char-cou...
Progressive EEnhancementHey! Over here!  <span class="tweet-counter">140   <b class="hidden"> characters remaining</b></sp...
Progressive EEnhancementHey! Over here!  <span class="tweet-counter">maximum of 140 characters</span>  <span class="tweet-...
Progressive EEnhancementHey! Over here!  <span aria-live="polite" aria-atomic="true"        class="tweet-counter">140<b cl...
Progressive EEnhancementHey! Over here!EECI - October 2011        144
ARIAJavaScript   CSS  HTMLText & HTTP
AdaptiveWebDesign.info
Progressive                          nhancement                    by Aaron Gustafson                    More of the same:...
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Progressive EEnhancement [EECI 2011]
Upcoming SlideShare
Loading in...5
×

Progressive EEnhancement [EECI 2011]

14,218

Published on

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.

Published in: Technology, Design
4 Comments
21 Likes
Statistics
Notes
  • 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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great Presentation
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
14,218
On Slideshare
0
From Embeds
0
Number of Embeds
258
Actions
Shares
0
Downloads
115
Comments
4
Likes
21
Embeds 0
No embeds

No notes for slide

Transcript of "Progressive EEnhancement [EECI 2011]"

  1. 1. Progressive nhancementby Aaron Gustafson@aarongustafsonhttp://slideshare.net/AaronGustafson
  2. 2. ?
  3. 3. TECHNOLOGICAL RESTRICTIONS
  4. 4. MCMLXXVII (that’s 1977)
  5. 5. HTML CSS
  6. 6. fault tolerancen. a system’s ability to continue tooperate when it encounters andunexpected error.
  7. 7. BROWSERSIGNORE WHAT THEY DON’TUNDERSTAND
  8. 8. GRACEFULDEGRADATION
  9. 9. MODERNBROWSERS OLDER BROWSERS
  10. 10. MODERNBROWSERS OLDER BROWSERS
  11. 11. PROGRESSIVEENHANCEMENT
  12. 12. CONTENT
  13. 13. ACCESSIBILITY
  14. 14. “SPECIAL NEEDS”
  15. 15. “SPECIAL NEEDS” CAN BE CONTEXTUAL
  16. 16. PROGRESSIVEGRACEFUL DEGRADATION ENHANCEMENT
  17. 17. OOOH, SHINY!
  18. 18. PROGRESSIVEENHANCEMENT ISN’T ABOUT BROWSERS
  19. 19. BROWSERS ANDTECHNOLOGIES COME AND GO
  20. 20. DON’T LOSE SIGHT OFYOUR USERS
  21. 21. User Experience BASIC ADVANCED Browser Capabilities
  22. 22. User Experience BASIC ADVANCED Browser Capabilities Content
  23. 23. User Experience Semantics BASIC ADVANCED Browser Capabilities Content
  24. 24. User Experience Design Semantics BASIC ADVANCED Browser Capabilities Content
  25. 25. User Experience Interactivity Design Semantics BASIC ADVANCED Browser Capabilities Content
  26. 26. User Experience Accessibility Interactivity Design Semantics BASIC ADVANCED Browser Capabilities Content
  27. 27. User Experience ARIA JavaScript CSS HTML BASIC ADVANCED Browser Capabilities Text & HTTP
  28. 28. Content
  29. 29. Content is WHYwe buildwebsites
  30. 30. Clear,well-writtenprose is key.
  31. 31. Don’t put uproadblocks.
  32. 32. Semantics
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. Progressive EEnhancementFault tolerance <input type="date" name="dob"/> I get it! I don’t get it :-(EECI - October 2011 50
  38. 38. Ad-hocSemantics
  39. 39. Progressive EEnhancementClassi cation
  40. 40. Progressive EEnhancementIdenti cation
  41. 41. 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
  42. 42. 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
  43. 43. Readability
  44. 44. 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
  45. 45. Design
  46. 46. Progressive EEnhancementParsing errors p{ color: red; }EECI - October 2011 65
  47. 47. Progressive EEnhancementParsing errors p{ color: red; }EECI - October 2011 65
  48. 48. Progressive EEnhancementParsing errors p{ color: red; font-weight: bold; }EECI - October 2011 66
  49. 49. Progressive EEnhancementParsing errors p{ color: red; font-weight: bold; }EECI - October 2011 66
  50. 50. Progressive EEnhancementParsing errors p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }EECI - October 2011 67
  51. 51. Progressive EEnhancementParsing errors html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }EECI - October 2011 68
  52. 52. Progressive EEnhancementParsing errors @-moz-document url-prefix() { html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); } }EECI - October 2011 69
  53. 53. #intro { /* Basic Layout */}/* ... */body[id=css-zen-garden] #intro { /* Advanced Layout */}
  54. 54. #intro { /* Basic Layout */}/* ... */[foo], #intro { /* Advanced Layout */}
  55. 55. Progressive EEnhancementParsing errors @import not-for-IE7-or-below.css screen; @media screen, print, refrigerator { /* IE will get these rules */ }EECI - October 2011 72
  56. 56. Progressive EEnhancementOrganization designEECI - October 2011 73
  57. 57. Progressive EEnhancementOrganization type color layoutEECI - October 2011 74
  58. 58. 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
  59. 59. Progressive EEnhancementOrganization type.css layout.css color.cssEECI - October 2011 76
  60. 60. Progressive EEnhancementOrganization type.css layout.css main.css color.cssEECI - October 2011 76
  61. 61. Progressive EEnhancementOrganization # Setup RewriteEngine on RewriteBase / # rewrite css, img & js RewriteRule ^css/(.*).css$ /styles/$1 [L]EECI - October 2011 77
  62. 62. Progressive EEnhancementOrganization {embed="styles/typography"} @media screen {   {embed="styles/layout-screen"} } {embed="styles/color"}EECI - October 2011 78
  63. 63. 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
  64. 64. 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
  65. 65. 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
  66. 66. 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
  67. 67. 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
  68. 68. 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
  69. 69. Interactivity
  70. 70. Photo credit: spike55151
  71. 71. 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
  72. 72. Progressive EEnhancementA minor improvement <a href="http://offsite.com" onclick="newWin( this.href ); return false;"> some text</a>EECI - October 2011 94
  73. 73. Photo credit: Giando
  74. 74. 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
  75. 75. Photo credit: hebedesign
  76. 76. 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
  77. 77. Photo credit: ambery
  78. 78. 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
  79. 79. Progressive EEnhancementAnchor-include pattern {embed="inc/.comments" url_title="{segment_3}"}EECI - October 2011 105
  80. 80. 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
  81. 81. 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
  82. 82. Progressive EEnhancementAnchor-include pattern $("[data-append],[data-replace],”+ “[data-after],[data-before]").ajaxInclude();EECI - October 2011 108
  83. 83. Progressive EEnhancementMedia Queries
  84. 84. Progressive EEnhancementMobile interfacesEECI - October 2011 110
  85. 85. 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
  86. 86. Accessibility
  87. 87. Progressive EEnhancementWhat is it?EECI - October 2011 116
  88. 88. Progressive EEnhancementWhat is it? <button>Tweet</button> <a class=”button”>Tweet</a>EECI - October 2011 116
  89. 89. Progressive EEnhancementWhat is it? <button>Tweet</button> <a class=”button”>Tweet</a>EECI - October 2011 116
  90. 90. Progressive EEnhancementWhat is it?EECI - October 2011 117
  91. 91. Progressive EEnhancementWhat is it? <button>Search Mail</button> <div>Search Mail</div>EECI - October 2011 117
  92. 92. Progressive EEnhancementWhat is it? <button>Search Mail</button> <div>Search Mail</div>EECI - October 2011 117
  93. 93. Progressive EEnhancementARIA maps the OS to the webEECI - October 2011 118
  94. 94. Semantics+
  95. 95. 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
  96. 96. <header role="banner">
  97. 97. <nav role="navigation">
  98. 98. <form role="search">
  99. 99. <section role="main">
  100. 100. <footer role="contentinfo">
  101. 101. <nav role="navigation">
  102. 102. 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
  103. 103. 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
  104. 104. Progressive EEnhancementWhat is it? <a role=”button”>Tweet</a> class=”button”>Tweet</a>EECI - October 2011 131
  105. 105. Progressive EEnhancementWhat is it? <a role=”button”>Tweet</a>EECI - October 2011 131
  106. 106. Progressive EEnhancementEECI - October 2011 132
  107. 107. 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
  108. 108. 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
  109. 109. 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
  110. 110. Progressive EEnhancementHey! Over here!EECI - October 2011 138
  111. 111. Progressive EEnhancementHey! Over here! <input class="tweet-counter" value="140" disabled="disabled">EECI - October 2011 139
  112. 112. 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
  113. 113. 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
  114. 114. 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
  115. 115. 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
  116. 116. Progressive EEnhancementHey! Over here!EECI - October 2011 144
  117. 117. ARIAJavaScript CSS HTMLText & HTTP
  118. 118. AdaptiveWebDesign.info
  119. 119. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×