Progressive enhancement
Upcoming SlideShare
Loading in...5

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 Progressive enhancement Presentation Transcript

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