SlideShare a Scribd company logo
1 of 109
Download to read offline
FUNDAMENTAL
 PROGRESSIVE
ENHANCEMENT
   Aaron Gustafson
WHAT IS
 PROGRESSIVE
ENHANCEMENT?
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Graceful Degradation
        User Experience




                    NEWER                           OLDER


                                      Browser Age

WEB BUILDER 2.0                                             3
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Progressive Enhancement
        User Experience




                      BASIC                                  ADVANCED


                                      Browser Capabilities

WEB BUILDER 2.0                                                         4
it’s about
    service
you wouldn’t do this...
Photo credit: dansays




but sites do...
Photo credit: dansays




but sites do...
HOW DOES
IT WORK?
a little treat
   for everyone




Photo credit: madam.furie
(viewed another way)
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




                  XHTML + HTTP only


WEB BUILDER 2.0                       13
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




                                      CSS
                  XHTML + HTTP only


WEB BUILDER 2.0                             13
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




                                      JavaScript
                                         CSS
                  XHTML + HTTP only


WEB BUILDER 2.0                                    13
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




                                      JavaScript
                           some JavaScript
                                         CSS
                                      some CSS
                  XHTML + HTTP only
WEB BUILDER 2.0                                    13
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




        User Experience




                      BASIC                                  ADVANCED


                                      Browser Capabilities

WEB BUILDER 2.0                                                         14
LEVELS OF
 SERVICE
LEVELS OF
 SUPPORT
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Rise to meet needs
                          robust JavaScript
        User Experience



                          some JavaScript




                          robust CSS




                          some CSS




                          XHTML & HTTP




WEB BUILDER 2.0                               16
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Rise to meet needs
                          robust JavaScript
        User Experience



                          some JavaScript




                          robust CSS




                          some CSS




                          XHTML & HTTP




WEB BUILDER 2.0                               16
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Rise to meet needs
                          robust JavaScript
        User Experience



                          some JavaScript




                          robust CSS




                          some CSS




                          XHTML & HTTP




WEB BUILDER 2.0                               16
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Rise to meet needs
                          robust JavaScript
        User Experience



                          some JavaScript




                          robust CSS




                          some CSS




                          XHTML & HTTP




WEB BUILDER 2.0                               16
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Rise to meet needs
                          robust JavaScript
        User Experience



                          some JavaScript




                          robust CSS




                          some CSS




                          XHTML & HTTP




WEB BUILDER 2.0                               16
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Rise to meet needs
                          robust JavaScript
        User Experience



                          some JavaScript




                          robust CSS




                          some CSS




                          XHTML & HTTP




WEB BUILDER 2.0                               16
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Rely on your baseline
                          robust JavaScript
        User Experience



                          some JavaScript




                          robust CSS




                          some CSS




                          XHTML & HTTP




WEB BUILDER 2.0                               17
Photo credit: PetitPlat by sk_




you can
still be




           creative
every key we press
a!ects user experience
                     Photo credit: JasonRogers
PROGRESSIVE
ENHANCEMENT
   WITH CSS
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




                                      layout.css
                                       color.css
                                       main.css
                                       type.css




WEB BUILDER 2.0                                    21
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




                                      type.css




                    layout.css                   color.css




WEB BUILDER 2.0                                              21
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; />
                                       href=quot;main.cssquot;
                                       href=quot;color.cssquot; />




WEB BUILDER 2.0                                              22
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;main.cssquot; />/>
                                       href=quot;layout.cssquot;
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; />




WEB BUILDER 2.0                                               22
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; />




WEB BUILDER 2.0                                               23
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;type.cssquot; />
<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;layout.cssquot; />
<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;color.cssquot; />
<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;print.cssquot; media=quot;printquot; />




WEB BUILDER 2.0                                                                        23
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;type.cssquot; />
<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;layout.cssquot; />
<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;color.cssquot; />
<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;print.cssquot; media=quot;printquot; />




WEB BUILDER 2.0                                                                        23
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




                                      @import 'screen.css';




<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;type.cssquot; />
<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;layout.cssquot; />
<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;color.cssquot; />
<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;print.cssquot; media=quot;printquot; />




WEB BUILDER 2.0                                                                        23
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




                                      @import 'screen.css';screen;
                                              'screen.css' s;
                                      @import 'print.css' print;
                                      @import 'mobile.css' handheld;




<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;type.cssquot; />
<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;layout.cssquot; />
<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;color.cssquot; />
<link    rel=quot;stylesheetquot;        type=quot;text/cssquot;   href=quot;print.cssquot; media=quot;printquot; />




WEB BUILDER 2.0                                                                        23
(the browser that wouldn’t die)
                                  Photo credit: oskay
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; />




WEB BUILDER 2.0                                               25
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




<link rel=quot;stylesheetquot;                type=quot;text/cssquot; href=quot;type.cssquot; />
<link rel=quot;stylesheetquot;                type=quot;text/cssquot; href=quot;layout.cssquot; />
<link rel=quot;stylesheetquot;                type=quot;text/cssquot; href=quot;color.cssquot; />
<!--[if IE lte 7]>
<link rel=quot;stylesheetquot;                type=quot;text/cssquot; href=quot;ie7.cssquot; />
<![endif]-->




WEB BUILDER 2.0                                                              25
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




<link rel=quot;stylesheetquot;                type=quot;text/cssquot; href=quot;type.cssquot; />
<link rel=quot;stylesheetquot;                type=quot;text/cssquot; href=quot;layout.cssquot; />
<link rel=quot;stylesheetquot;                type=quot;text/cssquot; href=quot;color.cssquot; />
<!--[if IE lte 7]>
<link rel=quot;stylesheetquot;                type=quot;text/cssquot; href=quot;ie7.cssquot; />
<![endif]-->
<!--[if IE lte 6]>
<link rel=quot;stylesheetquot;                type=quot;text/cssquot; href=quot;ie6.cssquot; />
<![endif]-->




WEB BUILDER 2.0                                                              25
property: value;
                    html>/**/body
_property: value;


         * html     voice-family: quot;quot;}quot;quot;;
-property: value;
                    voice-family:inherit;

    *:first-child+html
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Make smart decisions




WEB BUILDER 2.0                       27
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Make smart decisions
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
  <fieldset>
    <legend>Contact Us</legend>
    <p>Send us a message. All fields are required.</p>
    <ol>
      <li>
         <label for=quot;contact-namequot;>Name</label>
         <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
      </li>
      <li>
         <label for=quot;contact-emailquot;>Email</label>
         <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
      </li>
      <li>
         <label for=quot;contact-messagequot;>Message</label>
         <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
                   cols=quot;30quot;></textarea>
      </li>
    </ol>
    <button type=quot;submitquot;>Send It</button>
  </fieldset>
</form>

WEB BUILDER 2.0                                                   27
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Make smart decisions
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
  <fieldset>
    <legend>Contact Us</legend>
    <p>Send us a message. All fields are required.</p>
    <ol>
      <li>
         <label for=quot;contact-namequot;>Name</label>
         <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
      </li>
      <li>
         <label for=quot;contact-emailquot;>Email</label>
         <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
      </li>
      <li>
         <label for=quot;contact-messagequot;>Message</label>
         <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
                   cols=quot;30quot;></textarea>
      </li>
    </ol>
    <button type=quot;submitquot;>Send It</button>
  </fieldset>
</form>

WEB BUILDER 2.0                                                   27
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Make smart decisions
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
  <fieldset>
    <legend>Contact Us</legend>
    <p>Send us a message. All fields are required.</p>
    <ol>
      <li>
         <label for=quot;contact-namequot;>Name</label>
         <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
      </li>
      <li>
         <label for=quot;contact-emailquot;>Email</label>
         <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
      </li>
      <li>
         <label for=quot;contact-messagequot;>Message</label>
         <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
                   cols=quot;30quot;></textarea>
      </li>
    </ol>
    <button type=quot;submitquot;>Send It</button>
  </fieldset>
</form>

WEB BUILDER 2.0                                                   27
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Make smart decisions
label:after {
  content: quot;:quot;;
}




WEB BUILDER 2.0                       27
PROGRESSIVE
ENHANCEMENT
   WITH CSS
QUESTIONS?
inspired?
PROGRESSIVE
 ENHANCEMENT
WITH JAVASCRIPT
Photo credit: andyburnfield




proper planning...
...can keep you from looking

          foolish
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Consider lala.com




WEB BUILDER 2.0                       36
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Without JavaScript




WEB BUILDER 2.0                       37
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




And looking at the markup...




WEB BUILDER 2.0                       38
Photo credit: spike55151
Photo credit: drp
listen?



          Photo credit: Giando
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Event Listening
window.onload = handleExternalLinks;

function handleExternalLinks(){
  var server = document.location.hostname;
  var anchors = document.getElementsByTagName(quot;aquot;);
  var i, href;
  for( i=0; i < anchors.length; i++ ){
    href = anchors[i].href;
    if( href.indexOf(quot;http://quot; + server) == -1 &&
         href.indexOf(quot;https://quot; + server) == -1 ){
      // HREF is not a file on my server
      anchors[i].onclick = function(){
         newWin( this.href );
      };
    }
  }
}


WEB BUILDER 2.0                                       42
or
delegate?
       Photo credit: hebedesign
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Event delegation
document.getElementsByTagName( 'body' )[0].onclick = quot;
  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 );
    }
}




WEB BUILDER 2.0                                          44
style


   can get out of hand
                  Photo credit: thus spake drake
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Smart styles
ul.TabInterface-tab-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 3px solid;
  margin: 0 0 3px;
}
ul.TabInterface- tab-list li {
  border-left: 1px solid;
  cursor: pointer;
  float: left;
  display: inline;
  width: 25%;
  padding-bottom: 1em;
  margin-right: -1px;
}


WEB BUILDER 2.0                       46
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




No style before its time
<div id=quot;mainquot; class=quot;tabbedquot;>


becomes
<div id=quot;mainquot; class=quot;tabbed-onquot;>




WEB BUILDER 2.0                       47
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




No style before its time
                                      Default        Activated
add “-on” to the class                .tabbed        .tabbed-on

add an activation class               .auto-submit   .auto-submit.active

change the form of the class          .replace-me    .replaced




WEB BUILDER 2.0                                                            47
before you
LEAP

        Photo credit: josh-n
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Look for methods
function someFunction(){
  if( !document.getElementsByTagName ) return;
  // code that uses document.getElementsByTagName()
  ...
}




WEB BUILDER 2.0                                       49
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Look for methods
function someFunction(){
  if( !document.getElementsByTagName ||
      !document.getElementById ) return;
  /* code that uses document.getElementsByTagName()
     and document.getElementById() */
}




WEB BUILDER 2.0                                       50
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Look for elements
function someFunction(){
  if( !document.getElementsByTagName ||
       !document.getElementsByTagName( 'p' ) ) return;
  /* code that uses document.getElementsByTagName()
      and requires the presence of a P element */
  ...
}




WEB BUILDER 2.0                                          51
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Look for identified elements
function someFunction(){
  if( !document.getElementById ||
      !document.getElementById( 'content' ) ) return;
  // code that requires the presence of #content
  ...
}




WEB BUILDER 2.0                                         52
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Look for objects
function someFunction(){
  if( typeof( Prototype ) == 'undefined' ) return;
  // code that uses Prototype
  ...
}




WEB BUILDER 2.0                                      53
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Look for object versions
function someFunction(){
  if( typeof( Prototype ) == 'undefined' ||
      parseFloat( Prototype.Version ) < 1.5 ) return;
  // code that uses Prototype 1.5 or higher
  ...
}




WEB BUILDER 2.0                                         54
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Look before you leap
window.onload = function(){
   if( document.getElementsByTagName &&
       document.getElementById ){
     someFunction();
   }
};




WEB BUILDER 2.0                           55
PROGRESSIVE
 ENHANCEMENT
WITH JAVASCRIPT
QUESTIONS?
Photo credit: masstistraction




it’s easier than this
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Example: Tab Interface
Goal: to create a panel-based widget




WEB BUILDER 2.0                        59
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Traditional approach
<h1>Pumpkin Pie</h1>

<div class=quot;containerquot;>
  <div class=quot;sectionquot;>
    <h2>Overview</h2>
    <img src=quot;pie.jpgquot; alt=quot;quot;>
    <p>Whether you're hosting a festive party or a casual get-together with
    friends, our Pumpkin Pie will make entertaining easy!</p>
    ...
  </div>
  ...
  <ul class=quot;tabsquot;>
    <li><a href=quot;#quot;>Overview</a></li>
    <li><a href=quot;#quot;>Ingredients</a></li>
    <li><a href=quot;#quot;>Directions</a></li>
    <li><a href=quot;#quot;>Nutrition</a></li>
  </ul>
</div>




WEB BUILDER 2.0                                                               60
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Traditional approach
<h1>Pumpkin Pie</h1>

<div class=quot;containerquot;>
  <div class=quot;sectionquot;>
    <h2>Overview</h2>
    <img src=quot;pie.jpgquot; alt=quot;quot;>
    <p>Whether you're hosting a festive party or a casual get-together with
    friends, our Pumpkin Pie will make entertaining easy!</p>
    ...
  </div>
  ...
  <ul class=quot;tabsquot;>
    <li><a href=quot;#quot;>Overview</a></li>
    <li><a href=quot;#quot;>Ingredients</a></li>
    <li><a href=quot;#quot;>Directions</a></li>
    <li><a href=quot;#quot;>Nutrition</a></li>
  </ul>
</div>




WEB BUILDER 2.0                                                               60
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Traditional approach
<h1>Pumpkin Pie</h1>

<div class=quot;containerquot;>
  <div class=quot;sectionquot;>
    <h2>Overview</h2>
    <img src=quot;pie.jpgquot; alt=quot;quot;>
    <p>Whether you're hosting a festive party or a casual get-together with
    friends, our Pumpkin Pie will make entertaining easy!</p>
    ...
  </div>
  ...
  <ul class=quot;tabsquot;>
    <li><a href=quot;#quot;>Overview</a></li>
    <li><a href=quot;#quot;>Ingredients</a></li>
    <li><a href=quot;#quot;>Directions</a></li>
    <li><a href=quot;#quot;>Nutrition</a></li>
  </ul>
</div>




WEB BUILDER 2.0                                                               60
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Traditional approach
<h1>Pumpkin Pie</h1>

<div class=quot;containerquot;>
  <div class=quot;sectionquot;>
    <h2>Overview</h2>
    <img src=quot;pie.jpgquot; alt=quot;quot;>
    <p>Whether you're hosting a festive party or a casual get-together with
    friends, our Pumpkin Pie will make entertaining easy!</p>
    ...
  </div>
  ...
  <ul class=quot;tabsquot;>
    <li><a href=quot;#quot;>Overview</a></li>
    <li><a href=quot;#quot;>Ingredients</a></li>
    <li><a href=quot;#quot;>Directions</a></li>
    <li><a href=quot;#quot;>Nutrition</a></li>
  </ul>
</div>




WEB BUILDER 2.0                                                               60
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Static HTML with no style




WEB BUILDER 2.0                       61
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




A little typography




WEB BUILDER 2.0                       62
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Typography and color




WEB BUILDER 2.0                       63
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Static HTML with no style




WEB BUILDER 2.0                       64
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Static HTML with no style




                                      .tabbed

WEB BUILDER 2.0                                 64
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




The actual source
<h1>Pumpkin Pie</h1>

<div class=quot;tabbedquot;>
  <h2>Overview</h2>
  <img src=quot;pie.jpgquot; alt=quot;quot; />
  <p>Whether you're hosting a festive party or a casual get-together with friends,
  our Pumpkin Pie will make entertaining easy!</p>
  ...

   <h2>Ingredients</h2>
   <ul>
     <li>1 (9<abbr title=quot;inchquot;>in</abbr>) unbaked deep dish pie crust</li>
     <li>! cup white sugar</li>
     <li>1 <abbr title=quot;teaspoonquot;>tsp</abbr> ground cinnamon</li>
     ...
   </ul>

  <h2>Directions</h2>
  ...
</div>




WEB BUILDER 2.0                                                                      65
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




The actual source
<h1>Pumpkin Pie</h1>

<div class=quot;tabbedquot;>
  <h2>Overview</h2>
  <img src=quot;pie.jpgquot; alt=quot;quot; />
  <p>Whether you're hosting a festive party or a casual get-together with friends,
  our Pumpkin Pie will make entertaining easy!</p>
  ...

   <h2>Ingredients</h2>
   <ul>
     <li>1 (9<abbr title=quot;inchquot;>in</abbr>) unbaked deep dish pie crust</li>
     <li>! cup white sugar</li>
     <li>1 <abbr title=quot;teaspoonquot;>tsp</abbr> ground cinnamon</li>
     ...
   </ul>

  <h2>Directions</h2>
  ...
</div>




WEB BUILDER 2.0                                                                      65
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Understanding the flow




WEB BUILDER 2.0                       66
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




The full experience




WEB BUILDER 2.0                       67
QUESTIONS?
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Example: Collapsing Form
Goal: to create a search form with optional advanced filters.
By default the optional filters should be hidden, but users
should be able to show and hide them as they need to.




WEB BUILDER 2.0                                                69
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Collapsing Form as HTML




WEB BUILDER 2.0                       70
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Collapsing Form with CSS




WEB BUILDER 2.0                       71
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Collapsing Form with CSS




WEB BUILDER 2.0                       72
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Collapsing Form with CSS




WEB BUILDER 2.0                       73
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




HTML hooks




WEB BUILDER 2.0                       74
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




HTML hooks




                                      form.collapsing
WEB BUILDER 2.0                                         74
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




HTML hooks




                                      fieldset.optional
WEB BUILDER 2.0                                           74
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Understanding the flow




WEB BUILDER 2.0                       75
FUNDAMENTAL PROGRESSIVE ENHANCEMENT




Collapsing Form with JS




WEB BUILDER 2.0                       76
QUESTIONS?
FUNDAMENTAL
 PROGRESSIVE
ENHANCEMENT
   Aaron Gustafson
Slides available at
  http://slideshare.net/AaronGustafson
     This presentation is licensed under
             Creative Commons
Attribution-Noncommercial-Share Alike 3.0
                flickr Photo Credits
                        “MacBook Pro” by dansays
                         “M&M” by madame.furie
                “Six-layered chocolate cake” by PetitPlat
     “Day 486 / 365 - Late Night High Level Coding” by JasonRogers
                            “Leghoul” by oskay
                          “Risk” by andyburnfield
                            “fr tom” by ambery
                     “CORNERSTONE” by spike55151
                             “Freedom” by drp
                         “Headphone” by Giando
                      “Shout, shout” by hebedesign
            “The writing is on the wall” by thus spake drake
                 “Tiger Leaping Gorge - Ram” by josh-n
             “some assembly required” by massdistraction

More Related Content

What's hot

Adaptive Web Design Workshop [WebVisions NYC 2012]
Adaptive Web Design Workshop [WebVisions NYC 2012]Adaptive Web Design Workshop [WebVisions NYC 2012]
Adaptive Web Design Workshop [WebVisions NYC 2012]Aaron Gustafson
 
Building a Next Generation Mobile Browser using Web technologies
Building a Next Generation Mobile Browser using Web technologiesBuilding a Next Generation Mobile Browser using Web technologies
Building a Next Generation Mobile Browser using Web technologiesn_adam_stanley
 
Html5 features: location, history and offline apps
Html5 features: location, history and offline appsHtml5 features: location, history and offline apps
Html5 features: location, history and offline appsKonstantin Delchev
 
Web Quick Start with Tribloom: A tale of two wqs implementations
Web Quick Start with Tribloom: A tale of two wqs implementationsWeb Quick Start with Tribloom: A tale of two wqs implementations
Web Quick Start with Tribloom: A tale of two wqs implementationsAlfresco Software
 
React.js alternatives modern web frameworks and lightweight java script libr...
React.js alternatives  modern web frameworks and lightweight java script libr...React.js alternatives  modern web frameworks and lightweight java script libr...
React.js alternatives modern web frameworks and lightweight java script libr...Katy Slemon
 
The Future Of Web Frameworks
The Future Of Web FrameworksThe Future Of Web Frameworks
The Future Of Web FrameworksMatt Raible
 
What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...Shelly Megan
 
Sg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanleySg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanleyn_adam_stanley
 
Sencha touchonbb10 bootcamp
Sencha touchonbb10 bootcampSencha touchonbb10 bootcamp
Sencha touchonbb10 bootcampn_adam_stanley
 
Web application framework
Web application frameworkWeb application framework
Web application frameworkPankaj Chand
 
Berlin.JAR: Web future without web frameworks
Berlin.JAR: Web future without web frameworksBerlin.JAR: Web future without web frameworks
Berlin.JAR: Web future without web frameworksStephan Schmidt
 
A Successful Magento Project From Design to Deployment
A Successful Magento Project From Design to DeploymentA Successful Magento Project From Design to Deployment
A Successful Magento Project From Design to DeploymentJoshua Warren
 
Silverlight difference faqs-1
Silverlight  difference faqs-1Silverlight  difference faqs-1
Silverlight difference faqs-1Umar Ali
 
Web Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiWeb Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiMika Josting
 
Making Facebook Faster
Making Facebook FasterMaking Facebook Faster
Making Facebook Fasterguest1240e7c
 
Wordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebWordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebGeorge Kanellopoulos
 
Basic Learning about Progressive Web Apps (PWA)
Basic Learning about Progressive Web Apps (PWA)Basic Learning about Progressive Web Apps (PWA)
Basic Learning about Progressive Web Apps (PWA)Muhamad Aldy Bintang
 

What's hot (20)

Webs Review
Webs ReviewWebs Review
Webs Review
 
Adaptive Web Design Workshop [WebVisions NYC 2012]
Adaptive Web Design Workshop [WebVisions NYC 2012]Adaptive Web Design Workshop [WebVisions NYC 2012]
Adaptive Web Design Workshop [WebVisions NYC 2012]
 
Building a Next Generation Mobile Browser using Web technologies
Building a Next Generation Mobile Browser using Web technologiesBuilding a Next Generation Mobile Browser using Web technologies
Building a Next Generation Mobile Browser using Web technologies
 
Html5 features: location, history and offline apps
Html5 features: location, history and offline appsHtml5 features: location, history and offline apps
Html5 features: location, history and offline apps
 
Web Quick Start with Tribloom: A tale of two wqs implementations
Web Quick Start with Tribloom: A tale of two wqs implementationsWeb Quick Start with Tribloom: A tale of two wqs implementations
Web Quick Start with Tribloom: A tale of two wqs implementations
 
React.js alternatives modern web frameworks and lightweight java script libr...
React.js alternatives  modern web frameworks and lightweight java script libr...React.js alternatives  modern web frameworks and lightweight java script libr...
React.js alternatives modern web frameworks and lightweight java script libr...
 
Web development
Web developmentWeb development
Web development
 
The Future Of Web Frameworks
The Future Of Web FrameworksThe Future Of Web Frameworks
The Future Of Web Frameworks
 
What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...
 
Sg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanleySg conference multiplatform_apps_adam_stanley
Sg conference multiplatform_apps_adam_stanley
 
Sencha touchonbb10 bootcamp
Sencha touchonbb10 bootcampSencha touchonbb10 bootcamp
Sencha touchonbb10 bootcamp
 
Web application framework
Web application frameworkWeb application framework
Web application framework
 
Berlin.JAR: Web future without web frameworks
Berlin.JAR: Web future without web frameworksBerlin.JAR: Web future without web frameworks
Berlin.JAR: Web future without web frameworks
 
A Successful Magento Project From Design to Deployment
A Successful Magento Project From Design to DeploymentA Successful Magento Project From Design to Deployment
A Successful Magento Project From Design to Deployment
 
Silverlight difference faqs-1
Silverlight  difference faqs-1Silverlight  difference faqs-1
Silverlight difference faqs-1
 
software programs
software programssoftware programs
software programs
 
Web Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiWeb Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
 
Making Facebook Faster
Making Facebook FasterMaking Facebook Faster
Making Facebook Faster
 
Wordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebWordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The Nextweb
 
Basic Learning about Progressive Web Apps (PWA)
Basic Learning about Progressive Web Apps (PWA)Basic Learning about Progressive Web Apps (PWA)
Basic Learning about Progressive Web Apps (PWA)
 

Viewers also liked

Digital Image Communication and Enhancement
Digital Image Communication and EnhancementDigital Image Communication and Enhancement
Digital Image Communication and EnhancementNisar Ahmed Rana
 
Communication Enhancement Training Seminar
Communication Enhancement Training SeminarCommunication Enhancement Training Seminar
Communication Enhancement Training SeminarElisha Shepard
 
BoardMarks - Teachers Presentation
BoardMarks - Teachers PresentationBoardMarks - Teachers Presentation
BoardMarks - Teachers PresentationBoard Marks
 
IS 1008 Enhancement 1-English
IS 1008 Enhancement 1-EnglishIS 1008 Enhancement 1-English
IS 1008 Enhancement 1-EnglishMinura Jinadasa
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
Communication skills enhancement
Communication skills enhancementCommunication skills enhancement
Communication skills enhancementPatricia Soliven
 
Developing a High Performance Model
Developing a High Performance ModelDeveloping a High Performance Model
Developing a High Performance ModelMike Young
 
Branches of linguistics
Branches of linguisticsBranches of linguistics
Branches of linguisticsApurv Verma
 

Viewers also liked (9)

Digital Image Communication and Enhancement
Digital Image Communication and EnhancementDigital Image Communication and Enhancement
Digital Image Communication and Enhancement
 
Communication Enhancement Training Seminar
Communication Enhancement Training SeminarCommunication Enhancement Training Seminar
Communication Enhancement Training Seminar
 
BoardMarks - Teachers Presentation
BoardMarks - Teachers PresentationBoardMarks - Teachers Presentation
BoardMarks - Teachers Presentation
 
IS 1008 Enhancement 1-English
IS 1008 Enhancement 1-EnglishIS 1008 Enhancement 1-English
IS 1008 Enhancement 1-English
 
PPPBISM
PPPBISMPPPBISM
PPPBISM
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Communication skills enhancement
Communication skills enhancementCommunication skills enhancement
Communication skills enhancement
 
Developing a High Performance Model
Developing a High Performance ModelDeveloping a High Performance Model
Developing a High Performance Model
 
Branches of linguistics
Branches of linguisticsBranches of linguistics
Branches of linguistics
 

Similar to Fundamental Progressive Enhancement [Web Builder 2.0 - 2008]

Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]Aaron Gustafson
 
Core Web Vitals - The Modern Web Experience
Core Web Vitals - The Modern Web ExperienceCore Web Vitals - The Modern Web Experience
Core Web Vitals - The Modern Web ExperienceCakra Danu Sedayu
 
SSR with Quasar Framework - JSNation 2019
SSR with Quasar Framework - JSNation 2019SSR with Quasar Framework - JSNation 2019
SSR with Quasar Framework - JSNation 2019Razvan Stoenescu
 
Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]Aaron Gustafson
 
Word press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs convertedWord press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs convertedDaljeetSingh210
 
Open Text RedDot CMS: Improving Installation Performance
Open Text RedDot CMS: Improving Installation PerformanceOpen Text RedDot CMS: Improving Installation Performance
Open Text RedDot CMS: Improving Installation PerformancedotCMS
 
Inclusive Design for Web Development Teams
Inclusive Design for Web Development TeamsInclusive Design for Web Development Teams
Inclusive Design for Web Development TeamsShayne Rempel
 
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]Aaron Gustafson
 
Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bankAngularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bankDavid Amend
 
Headless 101 - Everything You Wanted to Know and More!
Headless 101 - Everything You Wanted to Know and More!Headless 101 - Everything You Wanted to Know and More!
Headless 101 - Everything You Wanted to Know and More!WP Engine
 
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]Aaron Gustafson
 
FID, CLS, LCP--WTF?
FID, CLS, LCP--WTF?FID, CLS, LCP--WTF?
FID, CLS, LCP--WTF?blmbmj
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow
 
Top 12 Backend Frameworks for Web Development in 2023.pdf
Top 12 Backend Frameworks for Web Development in 2023.pdfTop 12 Backend Frameworks for Web Development in 2023.pdf
Top 12 Backend Frameworks for Web Development in 2023.pdfEkta Patel
 
Seven Steps To Better JavaScript
Seven Steps To Better JavaScriptSeven Steps To Better JavaScript
Seven Steps To Better JavaScriptDen Odell
 
Reasons to migrate to modern web development with JavaScript
Reasons to migrate to modern web development with JavaScriptReasons to migrate to modern web development with JavaScript
Reasons to migrate to modern web development with JavaScriptDavid Amend
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsChris Love
 
Introduction to React Language (1).pptx
Introduction to React Language  (1).pptxIntroduction to React Language  (1).pptx
Introduction to React Language (1).pptxAleksandrosHodo
 
SnapyX
SnapyXSnapyX
SnapyXekino
 

Similar to Fundamental Progressive Enhancement [Web Builder 2.0 - 2008] (20)

Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
Fundamental Progressive Enhancement [Web Design World - Seattle 2009]
 
Core Web Vitals - The Modern Web Experience
Core Web Vitals - The Modern Web ExperienceCore Web Vitals - The Modern Web Experience
Core Web Vitals - The Modern Web Experience
 
SSR with Quasar Framework - JSNation 2019
SSR with Quasar Framework - JSNation 2019SSR with Quasar Framework - JSNation 2019
SSR with Quasar Framework - JSNation 2019
 
Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]Adaptive Web Design [WebVisions Portland 2012]
Adaptive Web Design [WebVisions Portland 2012]
 
Word press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs convertedWord press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs converted
 
Open Text RedDot CMS: Improving Installation Performance
Open Text RedDot CMS: Improving Installation PerformanceOpen Text RedDot CMS: Improving Installation Performance
Open Text RedDot CMS: Improving Installation Performance
 
Ajax World West
Ajax World WestAjax World West
Ajax World West
 
Inclusive Design for Web Development Teams
Inclusive Design for Web Development TeamsInclusive Design for Web Development Teams
Inclusive Design for Web Development Teams
 
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
 
Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bankAngularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bank
 
Headless 101 - Everything You Wanted to Know and More!
Headless 101 - Everything You Wanted to Know and More!Headless 101 - Everything You Wanted to Know and More!
Headless 101 - Everything You Wanted to Know and More!
 
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
 
FID, CLS, LCP--WTF?
FID, CLS, LCP--WTF?FID, CLS, LCP--WTF?
FID, CLS, LCP--WTF?
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
Top 12 Backend Frameworks for Web Development in 2023.pdf
Top 12 Backend Frameworks for Web Development in 2023.pdfTop 12 Backend Frameworks for Web Development in 2023.pdf
Top 12 Backend Frameworks for Web Development in 2023.pdf
 
Seven Steps To Better JavaScript
Seven Steps To Better JavaScriptSeven Steps To Better JavaScript
Seven Steps To Better JavaScript
 
Reasons to migrate to modern web development with JavaScript
Reasons to migrate to modern web development with JavaScriptReasons to migrate to modern web development with JavaScript
Reasons to migrate to modern web development with JavaScript
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
 
Introduction to React Language (1).pptx
Introduction to React Language  (1).pptxIntroduction to React Language  (1).pptx
Introduction to React Language (1).pptx
 
SnapyX
SnapyXSnapyX
SnapyX
 

More from Aaron Gustafson

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Aaron Gustafson
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Aaron Gustafson
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Aaron Gustafson
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Aaron Gustafson
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Aaron Gustafson
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Aaron Gustafson
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Aaron Gustafson
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Aaron Gustafson
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]Aaron Gustafson
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Aaron Gustafson
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Aaron Gustafson
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Aaron Gustafson
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for EveryoneAaron Gustafson
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Aaron Gustafson
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Aaron Gustafson
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Aaron Gustafson
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Aaron Gustafson
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Aaron Gustafson
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Aaron Gustafson
 

More from Aaron Gustafson (20)

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 

Recently uploaded

Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaCzechDreamin
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsUXDXConf
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfChristopherTHyatt
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka DoktorováCzechDreamin
 
Buy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptxBuy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptxEasyPrinterHelp
 
Buy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfBuy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfEasyPrinterHelp
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1DianaGray10
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2DianaGray10
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyUXDXConf
 
THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in  GERMANY for 2024: IPTVreelTHE BEST IPTV in  GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreelreely ones
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityScyllaDB
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoUXDXConf
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekCzechDreamin
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfFIDO Alliance
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfFIDO Alliance
 

Recently uploaded (20)

Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdf
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
Buy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptxBuy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptx
 
Buy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfBuy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdf
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in  GERMANY for 2024: IPTVreelTHE BEST IPTV in  GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreel
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, Ocado
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 

Fundamental Progressive Enhancement [Web Builder 2.0 - 2008]

  • 3. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Graceful Degradation User Experience NEWER OLDER Browser Age WEB BUILDER 2.0 3
  • 4. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Progressive Enhancement User Experience BASIC ADVANCED Browser Capabilities WEB BUILDER 2.0 4
  • 5.
  • 6. it’s about service
  • 11. a little treat for everyone Photo credit: madam.furie
  • 12.
  • 13.
  • 14.
  • 16. FUNDAMENTAL PROGRESSIVE ENHANCEMENT XHTML + HTTP only WEB BUILDER 2.0 13
  • 17. FUNDAMENTAL PROGRESSIVE ENHANCEMENT CSS XHTML + HTTP only WEB BUILDER 2.0 13
  • 18. FUNDAMENTAL PROGRESSIVE ENHANCEMENT JavaScript CSS XHTML + HTTP only WEB BUILDER 2.0 13
  • 19. FUNDAMENTAL PROGRESSIVE ENHANCEMENT JavaScript some JavaScript CSS some CSS XHTML + HTTP only WEB BUILDER 2.0 13
  • 20. FUNDAMENTAL PROGRESSIVE ENHANCEMENT User Experience BASIC ADVANCED Browser Capabilities WEB BUILDER 2.0 14
  • 23. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB BUILDER 2.0 16
  • 24. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB BUILDER 2.0 16
  • 25. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB BUILDER 2.0 16
  • 26. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB BUILDER 2.0 16
  • 27. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB BUILDER 2.0 16
  • 28. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB BUILDER 2.0 16
  • 29. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rely on your baseline robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP WEB BUILDER 2.0 17
  • 30. Photo credit: PetitPlat by sk_ you can still be creative
  • 31. every key we press a!ects user experience Photo credit: JasonRogers
  • 33. FUNDAMENTAL PROGRESSIVE ENHANCEMENT layout.css color.css main.css type.css WEB BUILDER 2.0 21
  • 34. FUNDAMENTAL PROGRESSIVE ENHANCEMENT type.css layout.css color.css WEB BUILDER 2.0 21
  • 35. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> href=quot;main.cssquot; href=quot;color.cssquot; /> WEB BUILDER 2.0 22
  • 36. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;main.cssquot; />/> href=quot;layout.cssquot; <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> WEB BUILDER 2.0 22
  • 37. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> WEB BUILDER 2.0 23
  • 38. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;print.cssquot; media=quot;printquot; /> WEB BUILDER 2.0 23
  • 39. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;print.cssquot; media=quot;printquot; /> WEB BUILDER 2.0 23
  • 40. FUNDAMENTAL PROGRESSIVE ENHANCEMENT @import 'screen.css'; <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;print.cssquot; media=quot;printquot; /> WEB BUILDER 2.0 23
  • 41. FUNDAMENTAL PROGRESSIVE ENHANCEMENT @import 'screen.css';screen; 'screen.css' s; @import 'print.css' print; @import 'mobile.css' handheld; <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;print.cssquot; media=quot;printquot; /> WEB BUILDER 2.0 23
  • 42. (the browser that wouldn’t die) Photo credit: oskay
  • 43. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> WEB BUILDER 2.0 25
  • 44. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> <!--[if IE lte 7]> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;ie7.cssquot; /> <![endif]--> WEB BUILDER 2.0 25
  • 45. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;type.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;layout.cssquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;color.cssquot; /> <!--[if IE lte 7]> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;ie7.cssquot; /> <![endif]--> <!--[if IE lte 6]> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;ie6.cssquot; /> <![endif]--> WEB BUILDER 2.0 25
  • 46. property: value; html>/**/body _property: value; * html voice-family: quot;quot;}quot;quot;; -property: value; voice-family:inherit; *:first-child+html
  • 47. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions WEB BUILDER 2.0 27
  • 48. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Contact Us</legend> <p>Send us a message. All fields are required.</p> <ol> <li> <label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /> </li> <li> <label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> <li> <label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; cols=quot;30quot;></textarea> </li> </ol> <button type=quot;submitquot;>Send It</button> </fieldset> </form> WEB BUILDER 2.0 27
  • 49. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Contact Us</legend> <p>Send us a message. All fields are required.</p> <ol> <li> <label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /> </li> <li> <label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> <li> <label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; cols=quot;30quot;></textarea> </li> </ol> <button type=quot;submitquot;>Send It</button> </fieldset> </form> WEB BUILDER 2.0 27
  • 50. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Contact Us</legend> <p>Send us a message. All fields are required.</p> <ol> <li> <label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /> </li> <li> <label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> <li> <label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; cols=quot;30quot;></textarea> </li> </ol> <button type=quot;submitquot;>Send It</button> </fieldset> </form> WEB BUILDER 2.0 27
  • 51. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions label:after { content: quot;:quot;; } WEB BUILDER 2.0 27
  • 57. ...can keep you from looking foolish
  • 58. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Consider lala.com WEB BUILDER 2.0 36
  • 59. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Without JavaScript WEB BUILDER 2.0 37
  • 60. FUNDAMENTAL PROGRESSIVE ENHANCEMENT And looking at the markup... WEB BUILDER 2.0 38
  • 63. listen? Photo credit: Giando
  • 64. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Event Listening window.onload = handleExternalLinks; function handleExternalLinks(){ var server = document.location.hostname; var anchors = document.getElementsByTagName(quot;aquot;); var i, href; for( i=0; i < anchors.length; i++ ){ href = anchors[i].href; if( href.indexOf(quot;http://quot; + server) == -1 && href.indexOf(quot;https://quot; + server) == -1 ){ // HREF is not a file on my server anchors[i].onclick = function(){ newWin( this.href ); }; } } } WEB BUILDER 2.0 42
  • 65. or delegate? Photo credit: hebedesign
  • 66. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Event delegation document.getElementsByTagName( 'body' )[0].onclick = quot; 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 ); } } WEB BUILDER 2.0 44
  • 67. style can get out of hand Photo credit: thus spake drake
  • 68. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Smart styles ul.TabInterface-tab-list { position: absolute; top: 0; left: 0; width: 100%; border-bottom: 3px solid; margin: 0 0 3px; } ul.TabInterface- tab-list li { border-left: 1px solid; cursor: pointer; float: left; display: inline; width: 25%; padding-bottom: 1em; margin-right: -1px; } WEB BUILDER 2.0 46
  • 69. FUNDAMENTAL PROGRESSIVE ENHANCEMENT No style before its time <div id=quot;mainquot; class=quot;tabbedquot;> becomes <div id=quot;mainquot; class=quot;tabbed-onquot;> WEB BUILDER 2.0 47
  • 70. FUNDAMENTAL PROGRESSIVE ENHANCEMENT No style before its time Default Activated add “-on” to the class .tabbed .tabbed-on add an activation class .auto-submit .auto-submit.active change the form of the class .replace-me .replaced WEB BUILDER 2.0 47
  • 71. before you LEAP Photo credit: josh-n
  • 72. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for methods function someFunction(){ if( !document.getElementsByTagName ) return; // code that uses document.getElementsByTagName() ... } WEB BUILDER 2.0 49
  • 73. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for methods function someFunction(){ if( !document.getElementsByTagName || !document.getElementById ) return; /* code that uses document.getElementsByTagName() and document.getElementById() */ } WEB BUILDER 2.0 50
  • 74. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for elements function someFunction(){ if( !document.getElementsByTagName || !document.getElementsByTagName( 'p' ) ) return; /* code that uses document.getElementsByTagName() and requires the presence of a P element */ ... } WEB BUILDER 2.0 51
  • 75. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for identified elements function someFunction(){ if( !document.getElementById || !document.getElementById( 'content' ) ) return; // code that requires the presence of #content ... } WEB BUILDER 2.0 52
  • 76. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for objects function someFunction(){ if( typeof( Prototype ) == 'undefined' ) return; // code that uses Prototype ... } WEB BUILDER 2.0 53
  • 77. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look for object versions function someFunction(){ if( typeof( Prototype ) == 'undefined' || parseFloat( Prototype.Version ) < 1.5 ) return; // code that uses Prototype 1.5 or higher ... } WEB BUILDER 2.0 54
  • 78. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Look before you leap window.onload = function(){ if( document.getElementsByTagName && document.getElementById ){ someFunction(); } }; WEB BUILDER 2.0 55
  • 82. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Example: Tab Interface Goal: to create a panel-based widget WEB BUILDER 2.0 59
  • 83. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Traditional approach <h1>Pumpkin Pie</h1> <div class=quot;containerquot;> <div class=quot;sectionquot;> <h2>Overview</h2> <img src=quot;pie.jpgquot; alt=quot;quot;> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... </div> ... <ul class=quot;tabsquot;> <li><a href=quot;#quot;>Overview</a></li> <li><a href=quot;#quot;>Ingredients</a></li> <li><a href=quot;#quot;>Directions</a></li> <li><a href=quot;#quot;>Nutrition</a></li> </ul> </div> WEB BUILDER 2.0 60
  • 84. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Traditional approach <h1>Pumpkin Pie</h1> <div class=quot;containerquot;> <div class=quot;sectionquot;> <h2>Overview</h2> <img src=quot;pie.jpgquot; alt=quot;quot;> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... </div> ... <ul class=quot;tabsquot;> <li><a href=quot;#quot;>Overview</a></li> <li><a href=quot;#quot;>Ingredients</a></li> <li><a href=quot;#quot;>Directions</a></li> <li><a href=quot;#quot;>Nutrition</a></li> </ul> </div> WEB BUILDER 2.0 60
  • 85. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Traditional approach <h1>Pumpkin Pie</h1> <div class=quot;containerquot;> <div class=quot;sectionquot;> <h2>Overview</h2> <img src=quot;pie.jpgquot; alt=quot;quot;> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... </div> ... <ul class=quot;tabsquot;> <li><a href=quot;#quot;>Overview</a></li> <li><a href=quot;#quot;>Ingredients</a></li> <li><a href=quot;#quot;>Directions</a></li> <li><a href=quot;#quot;>Nutrition</a></li> </ul> </div> WEB BUILDER 2.0 60
  • 86. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Traditional approach <h1>Pumpkin Pie</h1> <div class=quot;containerquot;> <div class=quot;sectionquot;> <h2>Overview</h2> <img src=quot;pie.jpgquot; alt=quot;quot;> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... </div> ... <ul class=quot;tabsquot;> <li><a href=quot;#quot;>Overview</a></li> <li><a href=quot;#quot;>Ingredients</a></li> <li><a href=quot;#quot;>Directions</a></li> <li><a href=quot;#quot;>Nutrition</a></li> </ul> </div> WEB BUILDER 2.0 60
  • 87. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Static HTML with no style WEB BUILDER 2.0 61
  • 88. FUNDAMENTAL PROGRESSIVE ENHANCEMENT A little typography WEB BUILDER 2.0 62
  • 89. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Typography and color WEB BUILDER 2.0 63
  • 90. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Static HTML with no style WEB BUILDER 2.0 64
  • 91. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Static HTML with no style .tabbed WEB BUILDER 2.0 64
  • 92. FUNDAMENTAL PROGRESSIVE ENHANCEMENT The actual source <h1>Pumpkin Pie</h1> <div class=quot;tabbedquot;> <h2>Overview</h2> <img src=quot;pie.jpgquot; alt=quot;quot; /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... <h2>Ingredients</h2> <ul> <li>1 (9<abbr title=quot;inchquot;>in</abbr>) unbaked deep dish pie crust</li> <li>! cup white sugar</li> <li>1 <abbr title=quot;teaspoonquot;>tsp</abbr> ground cinnamon</li> ... </ul> <h2>Directions</h2> ... </div> WEB BUILDER 2.0 65
  • 93. FUNDAMENTAL PROGRESSIVE ENHANCEMENT The actual source <h1>Pumpkin Pie</h1> <div class=quot;tabbedquot;> <h2>Overview</h2> <img src=quot;pie.jpgquot; alt=quot;quot; /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... <h2>Ingredients</h2> <ul> <li>1 (9<abbr title=quot;inchquot;>in</abbr>) unbaked deep dish pie crust</li> <li>! cup white sugar</li> <li>1 <abbr title=quot;teaspoonquot;>tsp</abbr> ground cinnamon</li> ... </ul> <h2>Directions</h2> ... </div> WEB BUILDER 2.0 65
  • 95. FUNDAMENTAL PROGRESSIVE ENHANCEMENT The full experience WEB BUILDER 2.0 67
  • 97. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Example: Collapsing Form Goal: to create a search form with optional advanced filters. By default the optional filters should be hidden, but users should be able to show and hide them as they need to. WEB BUILDER 2.0 69
  • 98. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form as HTML WEB BUILDER 2.0 70
  • 99. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with CSS WEB BUILDER 2.0 71
  • 100. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with CSS WEB BUILDER 2.0 72
  • 101. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with CSS WEB BUILDER 2.0 73
  • 102. FUNDAMENTAL PROGRESSIVE ENHANCEMENT HTML hooks WEB BUILDER 2.0 74
  • 103. FUNDAMENTAL PROGRESSIVE ENHANCEMENT HTML hooks form.collapsing WEB BUILDER 2.0 74
  • 104. FUNDAMENTAL PROGRESSIVE ENHANCEMENT HTML hooks fieldset.optional WEB BUILDER 2.0 74
  • 105. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Understanding the flow WEB BUILDER 2.0 75
  • 106. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Collapsing Form with JS WEB BUILDER 2.0 76
  • 109. Slides available at http://slideshare.net/AaronGustafson This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 flickr Photo Credits “MacBook Pro” by dansays “M&M” by madame.furie “Six-layered chocolate cake” by PetitPlat “Day 486 / 365 - Late Night High Level Coding” by JasonRogers “Leghoul” by oskay “Risk” by andyburnfield “fr tom” by ambery “CORNERSTONE” by spike55151 “Freedom” by drp “Headphone” by Giando “Shout, shout” by hebedesign “The writing is on the wall” by thus spake drake “Tiger Leaping Gorge - Ram” by josh-n “some assembly required” by massdistraction