Progressive Enhancement with Responsive Web Design and Flash
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:
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!
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.
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?
Comments are closed.
Front End Web Design
iOS Development with Swift
Python Web Development
Each is designed by our faculty of tech professionals to guide even a coding beginner to becoming a job-ready software developer armed with a professional portfolio of real-world projects. Try one out today with our free seven-day trial, and see if software development is for you.