Creating content for people without Flash Player

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.

Figure 1. iPhone logo for nonsupported content

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).

Figure 3. Alternative static banner in Safari on an iPhone

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

Figure 4. Alt text in a browser with images disabled

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.

Figure 5. Video content playing in Flash Player in a desktop web browser

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

Figure 6. Static content in a browser without Flash support

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).

Figure 7. Alternative content for browsers with images disabled

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.

Page 2 of 4

Previous Page

Next Page