Download
fundamental progressive enhancement n.
Skip this Video
Loading SlideShow in 5 Seconds..
Fundamental Progressive Enhancement [Web Design World Boston 2008] PowerPoint Presentation
Download Presentation
Fundamental Progressive Enhancement [Web Design World Boston 2008]

Fundamental Progressive Enhancement [Web Design World Boston 2008]

92 Views Download Presentation
Download Presentation

Fundamental Progressive Enhancement [Web Design World Boston 2008]

- - - - - - - - - - - - - - - - - - - - - - - - - - - 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?