1 / 109

Fundamental Progressive Enhancement [Web Builder 2.0 - 2008]

In this session, Aaron Gustafson covers the current best practice in Web standards development: progressive enhancement. Staring with an introduction to the topic, Aaron will walk you through the best ways to apply style and behavior to your pages, providing concrete examples and implementations that you can start using right away.

AaronGustafson
Download Presentation

Fundamental Progressive Enhancement [Web Builder 2.0 - 2008]

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Aaron Gustafson

  2. WHAT IS PROGRESSIVE ENHANCEMENT?

  3. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Graceful Degradation User Experience NEWER OLDER Browser Age 3 WEB BUILDER 2.0

  4. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Progressive Enhancement User Experience BASIC ADVANCED Browser Capabilities 4 WEB BUILDER 2.0

  5. it’s about service

  6. you wouldn’t do this...

  7. Photo credit: dansays but sites do...

  8. Photo credit: dansays but sites do...

  9. HOW DOES IT WORK?

  10. a little treat for everyone Photo credit: madam.furie

  11. (viewed another way)

  12. FUNDAMENTAL PROGRESSIVE ENHANCEMENT XHTML + HTTP only 13 WEB BUILDER 2.0

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

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

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

  16. FUNDAMENTAL PROGRESSIVE ENHANCEMENT User Experience BASIC ADVANCED Browser Capabilities 14 WEB BUILDER 2.0

  17. LEVELS OF SERVICE

  18. LEVELS OF SUPPORT

  19. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP 16 WEB BUILDER 2.0

  20. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP 16 WEB BUILDER 2.0

  21. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP 16 WEB BUILDER 2.0

  22. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP 16 WEB BUILDER 2.0

  23. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP 16 WEB BUILDER 2.0

  24. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP 16 WEB BUILDER 2.0

  25. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rely on your baseline robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP 17 WEB BUILDER 2.0

  26. Photo credit: PetitPlat by sk_ you can still be creative

  27. every key we press a?ects user experience Photo credit: JasonRogers

  28. PROGRESSIVE ENHANCEMENT WITH CSS

  29. FUNDAMENTAL PROGRESSIVE ENHANCEMENT type.css layout.css color.css main.css 21 WEB BUILDER 2.0

  30. FUNDAMENTAL PROGRESSIVE ENHANCEMENT type.css layout.css color.css 21 WEB BUILDER 2.0

  31. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> <link rel="stylesheet" type="text/css" href="main.css" /> 22 WEB BUILDER 2.0

  32. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="main.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> 22 WEB BUILDER 2.0

  33. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> 23 WEB BUILDER 2.0

  34. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> 23 WEB BUILDER 2.0

  35. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> <link rel="stylesheet" type="text/css" href="layout.css" /> 23 WEB BUILDER 2.0

  36. FUNDAMENTAL PROGRESSIVE ENHANCEMENT @import 'screen.css'; <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> 23 WEB BUILDER 2.0

  37. FUNDAMENTAL PROGRESSIVE ENHANCEMENT @import 'screen.css'; @import 'screen.css' s; @import 'print.css' print; @import 'mobile.css' handheld; screen; <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> 23 WEB BUILDER 2.0

  38. (the browser that wouldn’t die) Photo credit: oskay

  39. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> 25 WEB BUILDER 2.0

  40. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> <!--[if IE lte 7]> <!--[if IE lte 7]> <link rel="stylesheet" type="text/css" href="ie7.css" /> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]--> <![endif]--> 25 WEB BUILDER 2.0

  41. FUNDAMENTAL PROGRESSIVE ENHANCEMENT <link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" /> <!--[if IE lte 7]> <!--[if IE lte 7]> <link rel="stylesheet" type="text/css" href="ie7.css" /> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]--> <![endif]--> <!--[if IE lte 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]--> 25 WEB BUILDER 2.0

  42. p\roperty: value; html>/**/body _property: value; * html voice-family: "\"}\""; voice-family:inherit; -property: value; *:first-child+html

  43. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions 27 WEB BUILDER 2.0

  44. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions <form id="contact-form" action="#" method="post"> <fieldset> <legend>Contact Us</legend> <p>Send us a message. All fields are required.</p> <ol> <li> <label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /> </li> <li> <label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /> </li> <li> <label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea> </li> </ol> <button type="submit">Send It</button> </fieldset> </form> 27 WEB BUILDER 2.0

  45. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions <form id="contact-form" action="#" method="post"> <fieldset> <legend>Contact Us</legend> <p>Send us a message. All fields are required.</p> <ol> <li> <label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /> </li> <li> <label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /> </li> <li> <label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea> </li> </ol> <button type="submit">Send It</button> </fieldset> </form> 27 WEB BUILDER 2.0

  46. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions <form id="contact-form" action="#" method="post"> <fieldset> <legend>Contact Us</legend> <p>Send us a message. All fields are required.</p> <ol> <li> <label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /> </li> <li> <label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /> </li> <li> <label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea> </li> </ol> <button type="submit">Send It</button> </fieldset> </form> <label for="contact-name">Name</label> <label for="contact-email">Email</label> <label for="contact-message">Message</label> 27 WEB BUILDER 2.0

More Related