Developing Flash websites using progressive enhancement

Although Adobe Flash Player is one of the most widely distributed web clients available, there is still a group of people who are hesitant to use Adobe Flash content. They often describe Flash as a wonderful tool that can make a real contribution to a website’s audiovisual appeal and interactivity. But they also warn others not to overdo things because entire websites designed in Flash would both be opaque to search engines and lock out a certain group of potential visitors.

In this article I explain that this doesn’t necessarily have to be the case. It is merely a matter of execution of how a website is created. With some small extra effort, you can easily avoid these types of problems and create great Flash experiences that are optimized for search engine indexing and contain content that is accessible to the biggest target audience possible.

Progressive Enhancement is a web development strategy that ensures that even a visitor with the lowest common denominator web browser technology can navigate through a website and read its content. It uses basic markup—or (X)HTML—as its foundation to keep both content and navigation accessible for everyone, even people using text browsers and simple mobile devices. It utilizes semantic markup to add meaning to this content, which is the basis for search engine–friendly content.

The main philosophy behind progressive enhancement is that you enhance the “basic version” of your content with additional presentation or behavior by using technologies like CSS, JavaScript, and Flash. These should be served only when the required browser technology support is available.

Progressive enhancement applied to a Flash project could look something like the following:

• An HTML page that includes content that is optimized for web crawlers and low-tech browsers
• Style sheets to professionally lay out and style this basic version, aimed at visitors that use CSS-enabled browsers but don’t have the required Flash plug-in
• JavaScript to add behavior and improve the usability of the basic version—again aimed at visitors who don’t have the appropriate Flash support
• Flash content aimed at the biggest part of the target audience, for the full-blown user experience

Here’s why you should use this approach: because its benefits often outweigh its cost. Search engine–friendly content enables good rankings on search engines, while accessible content locks no one out and avoids blank home pages or page sections. These topics are likely to be of high importance to some of your clients.

At Refunk we have included progressive enhancement in our standard offering because we see it as a small, extra effort—but a worthwhile one—to do things the right way. We think it is an approach worthy of investing in for any design studio specializing in Flash content.

To complete this tutorial you will need to install the following software and files:

Flash Professional 8

Dreamweaver 8 (or any code editor)

Sample files:

• progressive_enhancement.zip (ZIP, 4.63 MB)

Prerequisite Knowledge

A basic knowledge of Flash, (X)HTML, CSS, and JavaScript is assumed.