1. Home
2. Developer Connection
3. Flash Developer Center

Flash Article

Developing Flash websites using progressive enhancement

Bobby van der Sluis

Refunk
bobbyvandersluis.com

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.

Requirements

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

Flash Professional 8

• Try
• Buy

Dreamweaver 8 (or any code editor)

• Try
• Buy

Sample files:

• progressive_enhancement.zip (ZIP, 4.63 MB)

Prerequisite Knowledge

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

The mechanics of progressive enhancement

Let's take a look under the hood to see how to apply it and how much effort it really takes to build a progressively enhanced website.

To apply progressive enhancement, it is wise to separate your markup, presentation, and behavior as much as possible. (This is a good practice anyway, not just for applying progressive enhancement.) One of the best ways to achieve this is to use external assets only and link them in the header of your HTML file. You can use hooks like id and class attributes to reference the elements in your HTML page.

For CSS this means avoiding inline styles. A cool feature of CSS is that it will be ignored if not enough CSS support is available, so any CSS enhancement will be applied automatically where possible.

For JavaScript, the best way to separate markup and behavior is to avoid inline JavaScript and use unobtrusive scripting instead. Unobtrusive techniques usually first check if a browser is capable of supporting the script's features before it is applied by either an onload or DOMContentLoaded event.

Note: Until DOMContentLoaded is fully supported across browsers, you can use the following cross-browser solution.

From strictly a web standards point of view, the ideal way to embed Flash content would be to use the Flash Satay method. This uses only the object tag, which contains a fallback method to display alternative content for browsers that do not support it. In theory, you could embed all your basic content within the object tag and the browser would do the filtering for you.

In reality, however, Flash Satay has a few major drawbacks, caused by incomplete browser support, browser bugs, and an unfortunate feature of Flash Player to attempt to play SWF content published for a higher plug-in version. The possible result is broken, duplicate, or no content. To make matters worse, as the result of the Eolas patent dispute, people using Microsoft Internet Explorer now first have to click on Flash content to activate it.

JavaScript-based detection and embedding methods are a good alternative. Fortunately there are some great tools available on the market, like UFO, SWFObject, and the Flash Player Detection Kit.

Although all these methods enable you to use progressively enhanced Flash content, UFO and SWFObject are built with progressive enhancement in mind: They both replace basic HTML content with rich Flash content when enough Flash and JavaScript support is available. Utilizing the Flash Player Detection Kit for progressive enhancement requires taking a few additional steps because you have to define your basic HTML in JavaScript and then duplicate it and embed it in a noscript tag.

Example 1 (also available in the accompanying ZIP file) illustrates how UFO serves a Flash banner while using progressive enhancement. You can use Mozilla Firefox and the Web Developer Extension to test your enhancements. Using the extension, you can easily toggle support for the following:

• JavaScript (select Disable > Disable JavaScript and then reload your page)
• CSS (select CSS > Disable Styles > All Styles)
• Images (select Images > Replace Images with Alt Attributes)

Example 1 contains the following HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
      <title>Serving a Flash banner using progressive enhancement</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
      <script type="text/javascript" src="ufo.js"></script>
      <script type="text/javascript">
        var FO = { movie:"ufo_thebanner.swf", width:"728", height:"90", majorversion:"6", build:"0", menu:"false" };
        UFO.create(FO, "promotion");
      </script>
   </head>
   <body>
      <div id="promotion">
      <a href="http://demo.refunk.com/adobe/devnet/progressive_enhancement/example3/"><img src="ufo_thebanner.jpg" alt="I abducted UFO and lived to tell" /></a>
      </div>
   </body>
</html>

Styles.css contains the following CSS code:

a img {
   border:none;
}

As you can see, the process of embedding Flash is extremely clean and simple. UFO automatically takes care of Flash Player detection and replaces the basic content with enhanced Flash content when enough browser technology support is available (see Figure 1).

Figure 1. Example 1 web page showing the Flash content

Visual browsers without the required Flash plug-in or JavaScript support will display a clickable image without the default link border (see Figure 2).

Figure 2. Example 1 web page showing alternative HTML content

Search engines will recognize the image's descriptive "alternative" text and link. Text browsers and web robots will display a text link with the image's alt text (see Figure 3).

Figure 3. Example 1 web page showing descriptive alt HTML content

Although this is a very basic example, it shows how easy it is to apply progressive enhancement. It doesn't have to take much effort to create visible and accessible web content.

Creating accessible content

While the term "accessibility" is often used to specifically indicate content that is accessible for people with disabilities, I use the term here in a broader context—to indicate that a visitor uses a browser with enough technology support to access certain content. Please note that to support accessible content for the disabled, you will have follow a series of best practices while creating both your HTML and Flash content.

Although progressive enhancement theory almost always starts with the basic, non-enhanced version of a website, it is often the most practical approach for Flash projects to make your Flash content the starting point and translate it to HTML content.

When you start defining your basic content, you will first have to decide what content is important for search engines and people with lesser technology support. As a rule, you should try to keep your main navigation, links, content, and functionality accessible at all times, if possible. Keep in mind that if you have a small budget, it is key to keep things simple.

While translating your Flash content to HTML, try to think in terms of headers, text, links, images, and simple forms. You also have to decide how to translate different kinds of rich media content into basic content. This can be quite challenging. For example, how would you best describe a driver's experience of in racecar while you are sitting in the passenger seat next to someone driving an ordinary sedan?

For Flash video, you could always follow a storyboarded approach, in which you describe the video's content using a few captured key images and a short description for each one of them. Example 2 (also available in the accompanying ZIP file) illustrates how you could make Flash video content accessible in terms of simple marked-up content.

Example 2 contains the following HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
      <title>Flash video using progressive enhancement</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
      <script type="text/javascript" src="ufo.js"></script>
      <script type="text/javascript">
        var FO = { movie:"ufo_themovie.swf", width:"480", height:"270", majorversion:"8", build:"0", menu:"false" };
        UFO.create(FO, "video");
      </script>
   </head>
   <body>
     <ol id="video">
       <li><img src="img/frame1.jpg" alt="UFO video still frame" />It's night-time, a UFO flies over the pasture, cows grazing</li>
       <li><img src="img/frame2.jpg" alt="UFO video still frame" />The UFO tries to abduct a cow using a tractorbeam, however in the process the cow abducts the UFO instead</li>
       <li><img src="img/frame3.jpg" alt="UFO video still frame" />It's daytime again, cows are still grazing, one cow looks very relieved</li>
     </ol>
   </body>
</html>

Styles.css contains the following CSS code:

#video {
   width:420px;
}
#video li {
   clear:left;
}
#video li img {
   float:left;
   width:240px;
   padding:0 10px 10px 0;
}

The following screen shots show what the different versions look like. Figure 4 shows the basic "decaf" version.

Figure 4. Example 2 web page showing simple HTML content

Figure 5 shows the CSS-enhanced "café latte" version.

Figure 5. Example 2 web page with images enabled and CSS applied

Finally, Figure 6 shows the Flash-enhanced "double espresso" version.

Figure 6. Example 2 web page showing Flash video content

Creating search engine–friendly content

Semantic markup is a key element in creating search engine–friendly content. You can see it as a natural way to add meaning to web content so that it can be understood by people, programs, and devices.

(X)HTML includes a variety of meaningful tags, such as the following:

• title and meta
• h1 to h6, p
• ul, ol, and dl
• strong and em
• blockquote and cite
• abbr, acronym and code
• fieldset, legend and label
• caption, thead, tbody and tfoot

For example, a search engine can recognize a headline because it is wrapped in an h1 tag. So try to use the h1 element for your main header and use the h2 to h6 elements for subheaders. Textual content can best be placed in paragraph tags:

<h1>Welcome to the official UFO website</h1>
<h2>UFO merchandise</h2>
<p>Make me rich, buy my stuff...</p>

A navigation bar or main menu is a list of items, so it can best be defined as an unordered list, using the ul element. Navigation items are links that are embedded in list items:

<ul id="navigation">
   <li><a href="#home">Home</a></li>
   <li><a href="#testimonials">Testimonials</a></li>
   <li><a href="#video">Video</a></li>
   <li><a href="#merchandise">Merchandise</a></li>
</ul>

Besides using tags, try to keep a close eye on the available attributes. Always use descriptive values for alt and title attributes:

<img src="img/merchandise.jpg" alt="t-shirt and mug with the text: I abducted UFO and lived to tell" />

You can learn more about the meaning of HTML elements and their attributes at W3 Schools.

Be aware that the semantics of HTML are very limited. As a result, every automated tool or search engine will interpret a website in its own unique way. To give you some indication of how semantic your website's HTML is, use the W3C's Semantic Data Extractor service. If the semantics of HTML leave you unsatisfied, you could explore the option of including additional semantics by using microformats.

Search engine optimization is a specialization in itself. Semantic markup is a good foundation for search engine optimization. However, the combination of using this foundation and many additional variables eventually determines how well a website rates.

Examining a complete progressive enhancement workflow

At Refunk we use the following workflow when we apply progressive enhancement to a Flash project:

1. Create the Flash content.
2. Translate the Flash content into an HTML equivalent markup.
3. Add the proper semantics.
4. Put it in a logical order.
   Consider how your "low specs" target audiences will view your content. For a visitor using a text browser or mobile device, the order of the basic content is important.
5. Create CSS and add "presentational" markup.
   For styling purposes, add div and span elements and id and class attributes. For the latter, we try to use meaningful names that explain what an element is rather than how it is presented.
6. Create JavaScript and add "behavioral" markup.
   As in Step 5, we only add JavaScript to improve the usability of the CSS enhanced version—for example, for tabbed navigation or client-side input validation.

Let's put this into practice. Example 3 (also available in the accompanying ZIP file) shows a progressively enhanced microsite that consists of basic markup, a CSS-enhanced version, and a Flash-enhanced version. Figures 7 and 8 show what the different versions of the same website look like.

Figure 7. Example 3 web page using a web browser with the required Flash and JavaScript support

Figure 8. Example 3 web page using a CSS-enabled browser without the required Flash and JavaScript support

To get a feeling what your website looks like on a mobile device or a text browser, Opera includes a few handy browser style sheets to emulate both the view of text browsers (select View > Style > Emulate text browser) and handheld devices (select View > Small screen). Figures 9 and 10 shows what Example 3 looks like with Opera's "small screen" and "emulate text browser" style sheets applied.

Note: To see these differences, you have to disable either JavaScript (select Opera or Tools > Quick Preferences > deselect Enable JavaScript) or your plug-ins (select Opera or Tools > Quick Preferences > deselect Enable Plug-ins).

Figure 9. Example 3 web page using Opera's "small screen" style sheet

Figure 10. Example 3 web page using Opera's "emulate text browser" style sheet

As Example 3 demonstrates, progressive enhancement makes it easy to create complete user experiences that are visible to your whole target audience, independent of their browser technology support and optimized for search engine indexing.

The cost of progressive enhancement

One concept that's often misunderstood is the extra cost associated with progressive enhancement. Some people even think that progressive enhancement will multiply the scope of a project.

The real cost varies from project to project, and depends largely on both the type of content and functionality, and amount and complexity of the enhancements. Keep in mind that often the simple approach already suffices to be effective. If you have a small budget, it is key to keep things simple.

You should realize that a lot of the work required for design and content creation has to be done only once for the entire project. In addition, developing a simple HTML and CSS version is far less labor-intensive than developing rich Flash content.

In the end, progressive enhancement has to sell itself by careful weighing of its benefits and costs. If it is a project requirement to deliver search engine–friendly, accessible content, a client will often have enough budget available to go the extra mile.

Where to go from here

This article gives you an overview of what progressive enhancement can mean for Flash development. The article itself contains several departure points to more in-depth documentation. However, there are a few more directions I would like to mention.

First there is the possibility to use a server-side language and XML to reuse content for both Flash and HTML. You could also apply stateful linking and reuse named anchors as a way to both navigate through the states of your Flash application and jump through your basic content.

For developers who use Flex or build a lot of Flash forms, Hijax can be an interesting principle.

Finally, another option to explore is the power of linked XML formats, like RSS or RDF.

Personally, I am a big fan of both Flash and web standards. For me it is great to see both worlds are slowly growing together. Although some people like to believe that both toolsets are exclusive, I believe the opposite and think they can greatly complement each other. Progressive enhancement for Flash is all about using the best practices of both worlds to create great and complete user experiences.

About the author