Progressive enhancement


Published on

With so many different types of devices out there a strategy that allows an optimal presentation for each device makes a lot of sense. The concept of Progressive Enhancement has been around for a while but has new relevance in the mobile age.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Progressive enhancement

  1. 1. <ul><li>Flash is amazing to work with.
  2. 2. People are a little scared of using Flash and looking towards HTML5.
  3. 3. Almost all the ambitious/impressive HTML5 samples are built for only one browser.
  4. 4. Do we have to choose one or the other? </li></ul>Introduction
  5. 5. Desktop Websites on Mobile Devices <ul><li>Flash sites don't work on iPads and iPhones
  6. 6. Even on mobile devices that run Flash consideration must be made to usability. </li></ul>
  7. 7. Mobile Sites on Desktops <ul><li>Mobile sites work on desktops but they leave something to be desired
  8. 8. Users expect a more rich and compelling experience </li></ul>
  9. 9. Possible Solutions <ul><li>Cater to the lowest browser/device and sacrifice the experience on high end systems
  10. 10. Ignore lesser devices and focus only on the best possible experience
  11. 11. Make multiple versions of your site, at least one “standard” and one optimized for mobile
  12. 12. Or... </li></ul>
  13. 13. Progressive Enhancement <ul><li>First attributed to Steven Champeon, at SXSW 2003.
  14. 14. Focuses on handling different browsers with varying capabilities.
  15. 15. Was a departure from Graceful Degradation, which was the leading philosophy on the issue.
  16. 16. Has caught on in theory but in practice older or less capable browsers are an afterthought, with one notable exception. </li></ul>
  17. 17. Progressive Enhancement vs. Graceful Degradation <ul><li>Start with something that works with all browsers
  18. 18. Add styling as supported
  19. 19. Add features as supported
  20. 20. Utilizes available technology </li></ul><ul><li>Start with something that works with the best browsers/plugins
  21. 21. Fix broken styling
  22. 22. Fix broken features
  23. 23. Built expecting certain technology. </li></ul>
  24. 24. Some Real Life Examples <ul><li>Popular Javascript drop-down menus and image galleries are progressively enhanced
  25. 25. Swfobject can be a progressive enhancement but is usually not </li></ul>
  26. 26. Demo 1: Simple HTML and Javascript Enhancement <ul><li>Basic HTML that is structurally focused on content (SEO and Text-Browser friendly).
  27. 27. CSS that styles the HTML without requiring special HTML or Javascript.
  28. 28. Javascript that improves the experience and visual presentation if available. </li></ul>
  29. 29. Design and Development Together <ul><li>Focus on content
  30. 30. Prioritize what is important (already doing this)
  31. 31. Accept that the site may not look exactly the same in all browsers (important!)
  32. 32. Designers are already thinking about content in a way that can be translated to basic browsers
  33. 33. Developers have to understand the experience and make smart recommendations </li></ul>
  34. 34. Demo 2: Adding Flash Enhancements <ul><li>When it comes to web technology options nothing beats the power of Flash
  35. 35. Blends together video and interactivity
  36. 36. Multiple animation techniques (frame-based, tweenlite, tweenmax, gtween, etc...)
  37. 37. Powerful 3D framework in Papervision
  38. 38. Existing HTML content can act as content XML </li></ul>
  39. 39. Challenges <ul><li>Is more complicated to design and build than simply focusing on lowest or highest capabilities.
  40. 40. May not achieve as specialized an experience as having a custom site for each “category” of devices/browsers.
  41. 41. You may end up writing functionality that you hope to never use. </li></ul>
  42. 42. Benefits <ul><li>More budget friendly than building complicated functionality with JavaScript.
  43. 43. Allows the site to be experienced with all browsers/devices without building multiple versions.
  44. 44. Too many browsers/devices to target.
  45. 45. In many ways the experience will be more consistent across browsers/devices since it's essentially the same site. </li></ul>
  46. 46. Summary <ul><li>Flash offers features that other technologies don't at an effort level that can't be matched.
  47. 47. Rather than going “lowest common denominator” or “all or nothing”, Progressive Enhancements allows your work to grow with the browser/device capabilities. </li></ul>
  48. 48. Q&A
  49. 49. The End <ul><li>Thank you!
  50. 50. Credits:
  51. 51. </li></ul>