Progressive enhancement

download Progressive enhancement

If you can't read please download the document

description

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.

Transcript of Progressive enhancement

  • 1.
    • Flash is amazing to work with.
  • 2. People are a little scared of using Flash and looking towards HTML5.

3. Almost all the ambitious/impressive HTML5 samples are built for only one browser. 4. Do we have to choose one or the other? Introduction 5. Desktop Websites on Mobile Devices

  • Flash sites don't work on iPads and iPhones

6. Even on mobile devices that run Flash consideration must be made to usability. 7. Mobile Sites on Desktops

  • Mobile sites work on desktops but they leave something to be desired

8. Users expect a more rich and compelling experience 9. Possible Solutions

  • Cater to the lowest browser/device and sacrifice the experience on high end systems

10. Ignore lesser devices and focus only on the best possible experience 11. Make multiple versions of your site, at least one standard and one optimized for mobile 12. Or... 13. Progressive Enhancement

  • First attributed to Steven Champeon, at SXSW 2003.

14. Focuses on handling different browsers with varying capabilities. 15. Was a departure from Graceful Degradation, which was the leading philosophy on the issue. 16. Has caught on in theory but in practice older or less capable browsers are an afterthought, with one notable exception. 17. Progressive Enhancement vs. Graceful Degradation

  • Start with something that works with all browsers

18. Add styling as supported 19. Add features as supported 20. Utilizes available technology

  • Start with something that works with the best browsers/plugins

21. Fix broken styling 22. Fix broken features 23. Built expectingcertain technology. 24. Some Real Life Examples

  • Popular Javascript drop-down menus and image galleries are progressively enhanced

25. Swfobject can be a progressive enhancement but is usually not 26. Demo 1: Simple HTML and Javascript Enhancement

  • Basic HTML that is structurally focused on content (SEO and Text-Browser friendly).

27. CSS that styles the HTML without requiring special HTML or Javascript. 28. Javascript that improves the experience and visual presentation if available. 29. Design and Development Together

  • Focus on content

30. Prioritize what is important (already doing this) 31. Accept that the site may not look exactly the same in all browsers (important!) 32. Designers are already thinking about content in a way that can be translated to basic browsers 33. Developers have to understand the experience and make smart recommendations 34. Demo 2: Adding Flash Enhancements

  • When it comes to web technology options nothing beats the power of Flash

35. Blends together video and interactivity 36. Multiple animation techniques (frame-based, tweenlite, tweenmax, gtween, etc...) 37. Powerful 3D framework in Papervision 38. Existing HTML content can act as content XML 39. Challenges

  • Is more complicated to design and build than simply focusing on lowest or highest capabilities.

40. May not achieve as specialized an experience as having a custom site for each category of devices/browsers. 41. You may end up writing functionality that you hope to never use. 42. Benefits

  • More budget friendly than building complicated functionality with JavaScript.

43. Allows the site to be experienced with all browsers/devices without building multiple versions. 44. Too many browsers/devices to target. 45. In many ways the experience will be more consistent across browsers/devices since it's essentially the same site. 46. Summary

  • Flash offers features that other technologies don't at an effort level that can't be matched.

47. Rather than going lowest common denominator or all or nothing, Progressive Enhancements allows your work to grow with the browser/device capabilities. 48. Q&A 49. The End

  • Thank you!

50. Credits: http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/2/ 51. http://blog.deconcept.com/2006/02/27/using-alternate-content-flash/