10 November 2008
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:
objectelement and lets the browser decide whether to display SWF content or—if it cannot render this—nested fallback content.
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.
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).
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:
<img src="banner.jpg" alt="Alternative content rules!" />
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:
<ol> <li><img src="frame1.jpg" alt="" />It's night-time, a UFO flies over the pasture, cows grazing</li> <li><img src="frame2.jpg" alt="" />The UFO tries to abduct two cows using a tractorbeam, however the cows appear to be too heavy to be lifted off the ground</li> <li><img src="frame3.jpg" alt=""/>It's daytime again, cows are still grazing, one cow looks very relieved</li> </ol>
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:
<embed ... pluginspage="http://www.adobe.com/go/getflashplayer" />
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:
<object ... codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
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:
<a href="/go/getflashplayer/"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a>
This results in a "Get Adobe Flash Player" button to point visitors to where they can download the plug-in (see Figure 11).
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:
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:
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
h6 elements for subheaders. Textual content can best be placed in paragraph tags:
<h1>Welcome to the official UFO abduction website</h1> <h2>UFO abduction 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
<img src="img/merchandise.jpg" alt="t-shirt and mug with the text: I was abducted by a UFO and lived to tell" />
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.
For more info on using SWFObject 2, check out the following resources:
Also review these web authoring guidelines by search engine vendors:
Finally, visit the Dreamweaver Developer Center for links to many useful tutorials and resources to start building websites or web applications.