Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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]

20,113 views

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
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×