• Share
  • Email
  • Embed
  • Like
  • Private Content
Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]
 

Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011]

on

  • 5,680 views

If you’ve been working on the web for any amount of time, you’ve likely heard (or even used) the term “progressive enhancement” before. As you probably know, it is the gold standard of how to ...

If you’ve been working on the web for any amount of time, you’ve likely heard (or even used) the term “progressive enhancement” before. As you probably know, it is the gold standard of how to approach web design. But what is progressive enhancement really? What does it mean? How does it work? And how does it fit into our workflow in a time of rapidly evolving languages and browsers? In this session, Aaron Gustafson will answer all of these questions and provide concrete takeaways that will help you improve your web design skills.

Statistics

Views

Total Views
5,680
Views on SlideShare
5,234
Embed Views
446

Actions

Likes
18
Downloads
79
Comments
0

13 Embeds 446

http://blog.easy-designs.net 207
http://paper.li 99
http://www.scoop.it 50
http://lanyrd.com 42
http://us-w1.rockmelt.com 18
http://a0.twimg.com 12
http://tweetedtimes.com 9
http://krtconf.com 3
http://www.linkedin.com 2
http://webcache.googleusercontent.com 1
https://si0.twimg.com 1
http://www.krtconf.com 1
http://localhost 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011] Crafting Rich Experiences with Progressive Enhancement [Beyond Tellerrand 2011] Presentation Transcript

    • CRAFTING RICH EXPERIENCES with progressive enhancementAaron Gustafson@aarongustafsonslideshare.net/AaronGustafson
    • progressive enhancement ?
    • I like an escalator becausean escalator can never break,it can only become stairs. — Mitch Hedberg
    • an electric toothbrushcan never break, itcan only become atoothbrush.
    • a dynamic web page cannever break, it can onlybecome a web page.
    • DIES IST UMSTÄNDLICH
    • TECHNOLOGICAL RESTRICTIONS
    • MCMLXXVII
    • MCMLXXVII (that’s 1977)
    • HTML CSS
    • fault tolerancen. a system’s ability to continue tooperate when it encounters anunexpected 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 NEWER OLDER Browser Age Graceful Degradation
    • User Experience BASIC ADVANCED Browser & Device Capabilities Progressive Enhancement
    • User Experience BASIC ADVANCED Browser & Device Capabilities Content
    • User Experience Semantics BASIC ADVANCED Browser & Device Capabilities Content
    • User Experience Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
    • User Experience Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
    • User Experience Accessibility Interactivity Design Semantics BASIC ADVANCED Browser & Device Capabilities Content
    • User Experience ARIA JavaScript CSS HTML BASIC ADVANCED Browser & Device Capabilities Text & HTTP
    • HTML
    • HTML5HTMLMicroformats HTML4
    • EXAMPLES
    • BEYOND TELLERRAND 2011PE with HTML <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>
    • BEYOND TELLERRAND 2011PE with HTML <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>
    • BEYOND TELLERRAND 2011PE with HTML <input type="date" name="dob"/> I get it! I don’t get it :-(
    • BEYOND TELLERRAND 2011PE with CSS p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
    • BEYOND TELLERRAND 2011PE with CSS html[lang] p { color: #ccc; color: rgba( 0, 0, 0, .5 ); }
    • IE6 & under MOSe
    • BEYOND TELLERRAND 2011Fault tolerance #intro { /* Basic Layout */ } /* ... */ body[id=css-zen-garden] #intro { /* Advanced Layout */ }
    • BEYOND TELLERRAND 2011Fault tolerance #intro { /* Basic Layout */ } /* ... */ [foo], #intro { /* Advanced Layout */ }
    • BEYOND TELLERRAND 2011PE with CSS @import not-for-IE7-or-below.css screen; @media screen, print, refrigerator { /* IE will get these rules */ }
    • BEYOND TELLERRAND 2011PE with CSS @media screen and (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), screen and (max-device-width:480px) and (orientation:landscape), screen and (min-device-width:481px) and (orientation:portrait) { /* Layout for narrower desktop (below 990px) or iPhone running iOS 3 (or equivalent) or iPhone running iOS 4 (or equivalent) in “landscape” view or iPad (or equivalent) in “portrait” view */ }
    • BEYOND TELLERRAND 2011PE with HTML & ARIA <header role=”banner”> <h1><img src="i/logo.png"/></h1> <nav role=”navigation”> <ol> <li><a href="#details">Details</a></li> <li><a href="#schedule">Schedule</a></li> <li><a href="#instructors">Instructors</a></li> <li><a href="#lodging">Lodging</a></li> <li><a href="#location">Location</a></li> </ol> </nav> </header>
    • BEYOND TELLERRAND 2011PE with JavaScript
    • BEYOND TELLERRAND 2011PE with JavaScript
    • BEYOND TELLERRAND 2011PE with JavaScript <input class="tweet-counter" value="140" disabled="disabled">
    • BEYOND TELLERRAND 2011PE with JavaScript <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>
    • BEYOND TELLERRAND 2011PE with JavaScript <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span> .hidden { position: absolute; left: −999em; }
    • BEYOND TELLERRAND 2011PE with JavaScript <span class="tweet-counter">maximum of 140 characters</span> <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>
    • BEYOND TELLERRAND 2011PE with JavaScript & ARIA <span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>
    • BEYOND TELLERRAND 2011PE with JavaScript & ARIA
    • BEYOND TELLERRAND 2011PE with JavaScript & ARIA
    • BEYOND TELLERRAND 2011PE with JavaScript & ARIA role="application" aria-activedescendant="folder-1"
    • BEYOND TELLERRAND 2011PE with JavaScript & ARIA role="tablist"
    • BEYOND TELLERRAND 2011PE with JavaScript & ARIA role="tab" aria-selected="true" aria-controls="folder-1"
    • BEYOND TELLERRAND 2011PE with JavaScript & ARIA role="tab" aria-selected="false" aria-controls="folder-4"
    • BEYOND TELLERRAND 2011PE with JavaScript & ARIA role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"
    • BEYOND TELLERRAND 2011PE with JavaScript & ARIA
    • ARIAJavaScript CSS HTMLText & HTTP
    • Available now from easy-readers.net or Kelly
    • Crafting Rich Experiences with Progressive Enhancement 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 http://www. ickr.com/photos/aarongustafson/galleries/72157628049759763/