Progressive enhancement
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Progressive enhancement



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

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.



Total Views
Views on SlideShare
Embed Views



4 Embeds 70 59
http://arnimaack.localhost 6
http://amblog.localhost 3 2



Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Progressive enhancement Presentation Transcript

  • 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?
  • 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 expecting certain 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:
    • 51.