Flash, JavaScript, and Providing Alternative Content

Something I feel that is extremely important is graceful degradation (or progressive enhancement, if you prefer). Essentially what that refers to is marking up a document in such a way where any reader would have no idea they may or may not be having a different experience than someone else while at a particular site. What could cause one reader to have a different experience than the next? One thing could be whether or not a specific browser plugin is installed (Flash, for example) or if a specific technology were enabled (JavaScript, CSS).

Of course there are many things that can’t completely gracefully degrade, but it’s still important that those things don’t totally fail and/or ‘break’ your page. Their inclusion should be as transparent as possible to your readers. Worst case scenario could be that you provide your reader with a message that the particular document requires JavaScript to operate and that you must have a JavaScript-enabled browser to use it. In the case of Flash, instead of the ugly ‘browser plugin needed’ sections that may overlay your intended SWF, you could provide a more graceful notification to your reader and provide a link to download the latest Flash player.

How do you provide alternate content?

Many articles have been written on the best way to provide alternate content. The various methods have their pros and cons as always. I have my personal choices for which technique to use as I’m sure you do too. What I’d like to do is bring up the methods I’m currently using, and leave the floor open for critiques and suggestions based on your personal methods.

Flash: Unobtrusive Flash Objects and SWFObject

There has been much debate over time as to which method for including Flash is best. Andrew Kirkpatrick posted quite a lengthy writeup comparing various techniques that is worth a read. Of all the techniques, I lean towards Unobtrusive Flash Objects. I was first introduced to UFO by a co-worker some time ago, and personally think it’s the way to go when it comes to including a Flash piece into your website. UFO is best defined by its author:

UFO is a DOM script that detects the Flash plug-in and embeds Flash objects (files with the .swf extension). It has its roots in the Web Standards community and is designed to support W3C standards compliant, accessible and search engine friendly web design. It also contains several features and best practice techniques that other scripts currently don’t have. UFO is free, licensed under the CC-GNU LGPL and an Open Source Flash Project.

The UFO site offers a large amount of information regarding why you should use something like UFO over previous methods of including Flash in documents. It is an extremely comprehensive solution and in my opinion, the best one out there. Not only does the script detect the presence of Flash, you can designate which version of Flash your SWF is using as to not display a partially functioning Flash piece to your readers.

There’s also SWFObject (Formerly FlashObject)

Another method for progressively enhancing your document with a Flash movie would be SWFObject (formerly FlashObject). Essentially SWFObject and UFO do the same thing; they use a combination of JavaScript and XHTML to provide plugin checking and SWF inclusion. It may be because I was introduced to UFO first, but I prefer using it to SWFObject. They each sport a slightly different syntax, but operate in a very similar fashion.

Internet Explorer Benefits

Whether you decide to use UFO or SWFObject, the benefits for Internet Explorer alone should be quite desirable. As you probably know, Internet Explorer now provides what is referred to as an Active Content Update which is an invasive technique requiring a user to make an extra click in order to enable a variety of technologies, Flash being one of them. Both UFO and SWFObject act as ‘workarounds’ to this, and can provide a beneficial experience to your reader.

Fallbacks to the technique

With just about every pro there is a con, and this situation is no different. As you can see, the technique depends completely on the presence of a JavaScript enabled browser. Some people would find this limiting in and of itself, because Flash is a completely different technology and it is entirely possible for a reader to have the Flash plugin installed and browse with JavaScript disabled. In my personal opinion, the dependence on JavaScript should be looked at as a positive. Not only can it detect whether or not a reader has Flash installed, it can determine which version of Flash they have too. Those benefits alone, for me, outweigh a reader seeing the ‘Missing Browser Plugin’ dialog on any browser.

Graceful degradation of JavaScript

Graceful degradation with JavaScript, I think, takes a bit more thought. With Flash, it’s basically a matter of creating your SWF, providing it a container in your markup (along with your alternate content), and then including UFO (or SWFObject) with the correct parameters. The script takes care of the rest. With JavaScript, it’s a different ballgame. As the developer, you need to put some thought into how things are going to work. You need to put some time into testing with JavaScript disabled to ensure that all of your visitors have the best possible experience.

JavaScript methodologies have come such a long way, and there are many ways to ensure that your scripts gracefully degrade. There have been entire books written on the subject that offer completely great advice that should be taken into consideration by any Web designer/developer. Each case will be different in appropriate alternate content to provide, and some thought should be put into each one. If JavaScript isn’t completely essential, don’t tell your user that the page requires JavaScript. Re-examine what the page is doing and compensate if you need to. Just because AJAX (yes, real AJAX) is the latest buzzword doesn’t mean you should break things just to say you use it.

In conclusion

The point I’m trying to make is that in this era of ever advancing Web technologies, it’s still extremely important to provide alternate content. Readers come first, above your JavaScript animations and Flash movies. While it’s completely great to offer those enhancements, there is a lot you can do to make sure a reader isn’t faced with any barriers when it comes to a site you put together. In the end, as always, it’s up to you.