1 / 101

Fundamental Progressive Enhancement [Web Design World - Seattle 2009]

“Progressive enhancement” involves designing sites in a way that allows everyone to access the basic content of a web page while also providing enhanced versions to visitors with faster bandwidth or more advanced browsers. In this session, Aaron Gustafson covers the current best practice in this critical aspect of web standards development. 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 Design World - Seattle 2009]

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 DESIGN WORLD

  4. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Progressive Enhancement User Experience BASIC ADVANCED Browser Capabilities 4 WEB DESIGN WORLD

  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 JavaScript CSS XHTML + HTTP only 13 WEB DESIGN WORLD

  13. FUNDAMENTAL PROGRESSIVE ENHANCEMENT JavaScript some JavaScript CSS some CSS XHTML + HTTP only 13 WEB DESIGN WORLD

  14. FUNDAMENTAL PROGRESSIVE ENHANCEMENT User Experience BASIC ADVANCED Browser Capabilities 14 WEB DESIGN WORLD

  15. LEVELS OF SERVICE

  16. LEVELS OF SUPPORT

  17. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP 16 WEB DESIGN WORLD

  18. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rise to meet needs robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP 16 WEB DESIGN WORLD

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

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

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

  22. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Rely on your baseline robust JavaScript User Experience some JavaScript robust CSS some CSS XHTML & HTTP 17 WEB DESIGN WORLD

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

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

  25. PROGRESSIVE ENHANCEMENT WITH CSS

  26. FUNDAMENTAL PROGRESSIVE ENHANCEMENT type.css layout.css color.css main.css 21 WEB DESIGN WORLD

  27. FUNDAMENTAL PROGRESSIVE ENHANCEMENT type.css layout.css color.css 21 WEB DESIGN WORLD

  28. 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 DESIGN WORLD

  29. 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 DESIGN WORLD

  30. 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 DESIGN WORLD

  31. 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 DESIGN WORLD

  32. 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 DESIGN WORLD

  33. 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 DESIGN WORLD

  34. 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 DESIGN WORLD

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

  36. 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 DESIGN WORLD

  37. 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 DESIGN WORLD

  38. 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 DESIGN WORLD

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

  40. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions 27 WEB DESIGN WORLD

  41. 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 DESIGN WORLD

  42. 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 DESIGN WORLD

  43. 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 DESIGN WORLD

  44. FUNDAMENTAL PROGRESSIVE ENHANCEMENT Make smart decisions label:after { content: ":"; } 27 WEB DESIGN WORLD

  45. QUESTIONS?

  46. inspired?

More Related