Progressive Enhancement with Responsive Web Design and Flash

responsive_blogheader

I know, I know. Responsive web design is the messiah and Flash is pure evil. So why would you ever want to combine them? Is such a thing even possible?

Living in a Flash Fantasyland

In December of 2012, the New Fantasyland at Walt Disney World’s Magic Kingdom park had its grand opening (the Treehouse office in Orlando is about 30 minutes away by car). At first glance, the New Fantasyland marketing website is pretty Flashy. However, there’s more technological magic here than what meets the eye (responsive design in disguise). Here’s what the site looks like in a Flash enabled browser:

Go to http://disneyworld.disney.go.com/new-fantasyland/ in a Flash enabled browser to get the full experience seen here.

Many advocates of open web standards, myself included, will preach about the follies of Flash technology. For starters, it is known for its bumpy history of poor performance and accessibility. Even Steve Jobs felt compelled to outline the numerous disadvantages of Flash in April, 2010. With the rise of increasingly advanced HTML, CSS, JavaScript, and Responsive Web Design, most appraisals of Flash would leave you with the impression that there is no upside. Some time ago, I personally decided that Flash no longer had a place on the web, with the exception of browsers that did not yet support HTML5 video. However, the Fantasyland site has made me back down a bit from that opinion.

If you visit the Fantasyland website on a desktop browser with Flash enabled, you’ll get a colorful and rich experience. The site is built around exploration: as you discover different parts of the site, you’ll find lots of interactivity and animation. At every turn, there’s Disney quality animation of swirling smoke and flags waving in the wind. One look at the site and it’s clear how impractical it would be to attempt with open web standards. In other words, yes they are using Flash, but they obviously had a very specific experience in mind. Duplicating this without Flash would be difficult.

Yes, but, will it blend?

At this point, I discounted the design by thinking: “It’s really cool, but it’s built on Flash so it doesn’t matter. It’s probably not accessible to people using assistive devices or to mobile browsers.”

I immediately loaded up the Fantasyland website in Mobile Safari on my iPhone, thinking I was going to “stump” them. To my surprise, there was a really nicely designed mobile experience with all the same content (sans cool animations) in the form of HTML5 videos, photo galleries I could swipe through, and more. Nice!

The Breakpoint

Now I’m thinking: “Alright, so they made a really cool Flash website and a separate mobile site. But what if I don’t have Flash on my computer?”

Back on the desktop browser I loaded up the Fantasyland site again, but this time with Flash disabled (Obviously, I enjoy exploring websites by attempting to break them). Without Flash, the site loads up as a nice looking HTML experience, very similar to what’s on mobile.

At the top of the page, they did recommend Flash to get the best experience possible, but the vanilla HTML site worked just fine. When I resized the browser down to a mobile width, the layout responded and looked the same as the experience that I saw on my phone and the Flash recommendation disappeared. Then it hit me: They didn’t build a Flash site and a mobile site. Rather, they built a responsive design with Flash added as an enhancement. Typically when you visit a Flash site, one of several ugly things happens:

  • You’re presented with a page where you have to choose a Flash experience or an HTML experience. This is terrible, because a lot of people don’t understand the difference.
  • If you don’t have Flash, either the website will load an HTML site that looks like a subpar afterthought, or it will simply block you out completely and rudely demand you install software to view their website.

Flashback

Maybe I missed the memo, but I’ve never seen Flash used in combination with Responsive Web Design. The transition between the two experiences is seamless and doesn’t require the user to make a choice they don’t understand or install software. I still don’t like Flash as a technology, but this made two things clear to me:

  • Flash feels less evil if it’s an enhancement to a standards-based website.
  • There’s still a lot of cool ideas that are only practical with Flash. No sense in posing artificial limits on your creativity if you wield the power carefully.

I’d love to hear your thoughts in the comments. Does Flash still have a place on the web?

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Nick Pettit

Nick is a designer, public speaker, and teacher at Treehouse. He is also a co-host of The Treehouse Show. Twitter: @nickrp

Comments

2 comments on “Progressive Enhancement with Responsive Web Design and Flash

  1. Thanks for the interesting take on using flash in responsive web design. My students in school are very much against Flash simply because they read on the web that it’s evil. While I’m not a flash advocate myself, I do like to see examples of where it can be used to enhance a responsive design and I think it can help put things into perspective.

  2. First of all I have to say that I like the Disney site and think that it shows a way where Flash has somewhat of a place on the web. But I still have two problems with that:
    First, a fancy design doesn’t fix the performance problems. I just don’t like to wait for a bar to load and my macbooks cooling system going nuts.
    But more importantly this doesn’t seem to be a solution for anyone who’s not called Disney.
    Realistically they had to build two complete Websites. A responsive site and a flash experience. To call their flash-site an enhancement fits it’s purpouse but not the work that comes with it.