Providing alternative content for SWF files

Traditional publishing mechanisms for rich media content created for Adobe Flash Player often rely on the twice-cooked method to embed SWF files into HTML pages. One major drawback of this method is that it is based on old-fashioned, vendor-specific markup that doesn't comply with modern web standards and also doesn't allow you to nest fallback content inside of it.

To solve this problem, we created SWFObject 2, which offers multiple standards-friendly methods to embed rich media content into web pages. It supports the use of alternative (substitute) content to display content to people who browse the web without plug-ins, to help search engines index your content, and to point visitors to the Adobe Flash Player download page.

SWFObject 2 offers two distinct methods to embed rich media content created for Flash Player: static publishing and dynamic publishing. Both publishing methods enable you to use alternative content, although they each achieve this differently:

• Static publishing uses the HTML object element and lets the browser decide whether to display SWF content or—if it cannot render this—nested fallback content.
• Dynamic publishing follows the principles of progressive enhancement and uses markup to define alternative content and unobtrusive JavaScript to replace this with SWF content if the minimal Flash Player version is installed and the required JavaScript support is available.

There is a subtle difference between the two publishing methods. For example, static publishing shows rich media content to people whose browsers do have Flash Player installed but do not support JavaScript, while dynamic publishing won't show it. Also, for both publishing mechanisms, search engines can interpret alternative content and SWF content (if supported) in a different way.

This tutorial introduces you to using alternative content to improve the overall user experience and searchability of your web content. For an introduction to SWFObject 2, please read Detecting Flash Player versions and embedding SWF files with SWFObject 2.

Although Flash Player 9 currently has more than a 97% ubiquity, it does not necessarily follow that 97% of all people worldwide can view rich media content created for Flash Player 9. If you target a specific release of Flash Player 9, this number will be lower. Also, because many web authors use a publishing method that relies on JavaScript, you have to keep in mind that around 6% of all your visitors will not have the required scripting support. This includes desktops only.

Most devices offer you an option to browse the Internet; however, currently only selected devices ship with Flash Player 9. Many other devices either support older Flash Player versions or—in the worst case—no content created for the Flash plug-in at all. For example, the Apple iPhone does not currently support content created for Flash Player and will display a Lego-like block if you use an outdated embed method (see Figure 1). This is probably not something that you would like to show to your visitors.

Fallback content (also known as alternative content) offers a best-practice solution to work around this problem. If you unzip examples.zip file and open index.html from example_1 in your desktop web browser (make sure you have the latest version of Adobe Flash Player installed), you will see a SWF file called banner.swf that contains blinking text: "Alternative content rules!" (see Figure 2).

Figure 2. SWF banner in a desktop web browser

If you view this example in Safari browser on the iPhone, however, you will see a still image, banner.jpg, with the same text (see Figure 3).

Search engines and visitors that browse the web in a text browser or with images disabled will see the content shown in Figure 4.

Example 1 contains only one image with a descriptive alt text as alternative content:

Although this is a simple example, it illustrates perfectly how easy it is to avoid Lego-like blocks, download plug-in puzzle pieces, missing media icons, or no content at all.

Whatever alternative content you can use best differs from project to project. For rich media projects, it is often the most practical approach to create rich media content for Flash Player first and then translate this into the most suitable HTML content. Here you will need to decide what content is important for people with lesser technology support, as well as for search engines.

While you translate your rich media content into HTML, try to think in terms of headers, text, links, images, and simple forms. You also need to decide how to translate different kinds of rich media content, which can be quite a challenging task. For video, you could 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.

If you open index.html from example_2 in your desktop web browser, you will see the video content shown in Figure 5.

People without Flash Player support will see the alternative content shown in Figure 6.

Search engines and visitors that browse the web in a text browser or with images disabled will see a simpler set of content (see Figure 7).

Example 2 contains an ordered list with three list items, each of which is an image and a line of text:

As a rule of thumb, you should try to keep your main content, functionality, and navigation accessible at all times—if possible. You may also want to create additional style rules to ensure that the visual identity or layout of a web page remains intact. Just think of alternative content as an opportunity to communicate with your target audience, although they might not have the targeted technology support.

What if a visitor doesn't have Flash Player installed? In this case, you probably would like to offer an easy way to download the latest version of the plug-in. Throughout the years, many efforts have been made to achieve this goal, some better than others. For example, traditional publishing methods for rich media content created for Flash Player rely on nonstandardized methods to download the latest version of Flash Player. Markup like the following:

does not allow the use of alternative content and will result in the notorious click-to-download puzzle piece (see Figure 8), or something similar, like a Lego block.

Markup like the following:

results in a missing content icon and a rather obtrusive and confusing information bar in Microsoft Internet Explorer (see Figure 9).

The SWFObject 2 project team advises you not to use these outdated methods anymore and offers two improved methods to download Flash Player instead: Adobe Express Install and alternative content, which can be used in tandem.

The first method is a mechanism built into Flash Player that enables you to upgrade an outdated Flash plug-in to the latest version without having to browse to the Adobe website. It displays a standardized download dialog box (see Figure 10).

Express Install uses a pop-up confirmation window and is therefore an optional feature that can be activated by web authors.

The second method—fallback content—offers an unobtrusive way to download Flash Player. By default, SWFObject 2 Generator publishes the following alternative content:

This results in a "Get Adobe Flash Player" button to point visitors to where they can download the plug-in (see Figure 11).

Please note that this is just stub markup that conveys the Flash Player download link and accompanying download icon ready to be customized by web authors. As an example, you could add a few lines of copy to your alternative content explaining that the intended interactive or audiovisual user experience requires the latest version of Flash Player, with a link to the download page. When using SWFObject 2 dynamic publishing, you should add that modern JavaScript support is required too.

When you update the previous example and show it to visitors without Flash Player support, it will look like Figure 12 (also available as index2_updated.html from the example_2 folder).

For a long time, most search engine optimization (SEO) vendors and consultants advised against building websites that relied heavily on Flash Player content because SWF files didn't give search engines much to index. Also, alternative content was hardly used because most publishing mechanisms used the twice-cooked method. The emergence of more modern Flash embed methods like SWFObject and UFO proved that it was very effective to use dynamic publishing and serve alternative HTML content to search engines.

In July 2008 Adobe began teaming up with leading search engine vendors like Google and Yahoo! to improve their ability to index Flash content. As a result, those sites can now index textual content and links inside SWF files while browsing through an application's states, as if they were real visitors.

So why use alternative content to help search engines index your content? Well, for multiple reasons.

First, some search engines do not index Flash content.

Second, because a SWF file is usually full of multimedia content, there will still be much content that is invisible to search engines. So when you already use alternative content to display descriptive material to people with lesser technology support and to help visitors find the Flash Player download page, it is just a simple step to kill three birds with one stone (without hurting real birds in the process, of course).

Third, it is not an either/or story. Search engines are likely to index both Flash content and fallback content. (Google does this.) Although, from a web author's point of view, duplicate content is regarded as a best practice because it enables you to create web content that is accessible to the widest target audience possible, to search engine vendors it offers a few tricky challenges, such as how to decide which results to show in their search engine listings or how to detect potential abuse (cloaking).

When creating search engine-friendly content, you should always keep this duality in mind. Make sure that your HTML content is a true reflection of your Flash content, and let a search engine decide which content can be shown best as a search result. For example, for your alternative content, you could do the following:

• Use the exact same copy and links as in your rich media content
• Add textual content and images to describe the multimedia content
• Add copy to explain what is needed to get the intended user experience and where Flash Player can be downloaded
• Add CSS to style and position your HTML and preserve a web page's visual identity (see the CSS topic area of the Dreamweaver Developer Center to learn more)

Furthermore, HTML content has a few extras to offer over rich media content because it contains a hierarchical structure and has built-in semantics. These are both key elements in creating search engine-friendly content because they enable you to add structure and meaning to web content.

HTML includes a variety of meaningful tags:

• title and meta
• h1 – h6 and 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 a 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:

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:

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

You can learn more about the meaning of HTML elements and their attributes on SitePoint.

Please keep in mind that SEO is a dynamic topic and a specialization in itself. Using the proper alternative content that includes a good structure and semantics is a good foundation for SEO. However, the combination of using this foundation and many additional variables will eventually determine how well a website rates.

Where to go from here

For more info on using SWFObject 2, check out the following resources:

• Detecting Flash Player versions and embedding SWF files with SWFObject 2
• SWFObject 2 wiki on Google Code (documentation and examples)

Also review these web authoring guidelines by search engine vendors:

• Improved Flash indexing
• Video tutorial: Google for webmasters
• Yahoo! Search Content Quality Guidelines

Finally, visit the Dreamweaver Developer Center for links to many useful tutorials and resources to start building websites or web applications.