Using Multimedia on Your Web Site

Last Updated Nov 27, 2007 12:38 PM EST

While the environment for Web-based multimedia has improved in recent years, limited bandwidth means that it still will be a long time before rich multimedia can be delivered quickly to all visitors. However, the use of audio, and to a lesser extent video, is increasing, particularly within office environments where larger bandwidth is usually available. In considering the use of multimedia, keep these principles in mind:

  • Never use multimedia as a gimmick; Audio or video content needs to have a clearly defined purpose
  • Keep multimedia files as small as possible so that they download quickly
  • Always offer an HTML alternative to multimedia that will deliver the information using text and simple images
What You Need to KnowWhat's keeping more multimedia from appearing on the Web?

Take your pick of reasons: bandwidth, screen size and resolution, too many slower and older computers, the need for special software to view certain multimedia, and the inability of certain browsers to view multimedia. Only now can people have nearly the same quality of experiences from computer-based multimedia that they currently enjoy on their TV sets. The Web is fundamentally an information-delivery network. If multimedia can deliver higher-quality information than text and/or simple images, and do with reasonable speed, it has a genuine purpose. On a low-bandwidth Web, however, multimedia is still difficult and can be plagued by annoying technical glitches.

Isn't broadband now available everywhere?

Available? Yes, as forecasters have been saying since 1995. Yet, only now—more than a decade later—has broadband become the choice of the majority of U.S. Internet users. Moreover, in the second half of 2006, the U.S. actually fell from 23rd to 25th in worldwide broadband penetration! This penetration remains the key to multimedia use on the Web. Yes, broadband represents a major improvement over dial-up, but there is still some way to go before downloading a full-motion video over the Internet becomes commonplace. Moreover, there is still a notable group using dial-up connections or mobile networks. ACNielsen research shows broadband didn't reach 60 percent of U.S. households until August 2005—when almost 75 percent of British Internet users had broadband. Nielsen estimated broadband use in the U.S. to be more than 80 percent by the spring of 2007—still not enough to be considered universal.

Does everyone need plug-ins to experience most multimedia?

Web browsers are not designed to view most multimedia, so extra software, a "plug-in," is required. The benefit of the multimedia experience has to be substantial before someone will make the effort to download a plug-in in order to view it.

Is "streaming technology" important to know about?

Streaming technology describes a process that downloads just enough of a multimedia file that allows one to start viewing or listening to it while the rest of the file is being downloaded in the background. It reduces download time but does not eliminate all delays. Streaming also can be interrupted if bandwidth or server problems arise.

What to DoRemember That Size Matters

If multimedia on the Web is complex, few persons will be able or willing to make use of it. Smaller, but more limited, multimedia is accessible to more people. It depends on your target market: If you know your marketplace has the hardware, software and bandwidth, and really wants intricate multimedia, then give your target exactly that. If, on the other hand, your target market has average computers with average bandwidths—and simply needs to find information quickly—be cautious about "loading up" on multimedia.

Add AnimationsUsing GIF

Graphics Interchange Format (GIF) is a straightforward method of animating a graphic on a Web site. Its major advantage is that it does not require a plug-in to view, so almost any browser can display it. It is ideal for animating small, simple icons and basic images and for banner advertisements.

Using Dynamic HTML

Dynamic HTML (DHTML) is another safe option. It does not require a plug-in to view either and, if properly designed, can be viewed by most browsers. However, the significant differences between the Microsoft and Netscape (not to mention Apple) browsers can make developing Dynamic HTML that will work perfectly across all browser platforms and their multiple versions a very complex task. Like animated GIFs, this is a relatively limited animation tool that often doesn't work well.

Using Flash®

Despite the fact that it requires a plug-in, Macromedia Flash(r) has become the most popular Web animation format. The majority of Web users have the Flash® plug-in, but the chances of them receiving your design as intended depends on the version they have.

Flash® is flexible and easy to learn but requires skill to truly master. It has a wide variety of built-in animation features that will deliver a basic result quickly. For Web animation, Flash® is a powerful tool. It uses streaming technology so one can view the animation more quickly. It uses vector instead of bitmap graphics; vector graphics allow for a smaller file size and one that is more scalable—although vector graphics do not handle photographs well. Flash(r) also allows sound to be added to an animation more effectively.

Add Sound and Video—As Long As They Have a Real Purpose

Be careful about sound. Never add it gratuitously to your Web site but only if it adds real value: For example, an important figure making a speech. Make sure you provide a text transcript of the speech, too; and always give your Web visitors the ability to stop an audio file.

Full CD-quality sound requires a very large file so it must be compressed for delivery over the Web and then decompressed for listening. MP3 is a popular format that has emerged for doing this and achieves high-quality results. There are numerous software packages available for preparing audio for the Web, but the best way to get good quality is to record the audio properly in the first place. The leading audio plug-in is RealAudio(r). Apple QuickTime(r) and Microsoft Media Player(r) are also popular.

Video is very bandwidth-intensive, so the "specific need" rule applies in full! Basic software-editing packages are available at reasonable costs, but creating video properly requires very expensive software and equipment. The frame rate that is used for delivering video on the Web is far lower than for television images and sometimes causes a jumpy, distorted picture. To avoid this, reduce movement as much as possible during taping and avoid zooming or panning.

Create Shortcuts—and Offer Alternatives

Avoiding multimedia intros entirely is best; but if you insist on using them, always make sure that there is an obvious link that allows visitors to stop the multimedia and move on to find the information they need. Consider Web site visitors your customers and treat them accordingly.

In truth, most visitors have little interest in sitting through multimedia presentations, no matter how dazzling they may be. They've come looking for information and want to find it as quickly as possible. If a multimedia file contains important information, also provide it in an HTML text and simple image format. For example, publish a text transcript of an important interview.

Keep Accessibility Issues in Mind

Ensure that your multimedia creations meet minimum accessibility standards. Provide an accessible alternative where appropriate. Multimedia can be a support or a hindrance for people with disabilities: For example, audio files can help visually impaired persons. However, when text is created as an image, text readers that turn text into audio will not work.

Test Your Work with a Variety of Browsers and Computers

The advantage of HTML is its simplicity and open standards. Yet, even HTML needs to be carefully checked to ensure it works properly on different browser platforms. Multimedia makes such testing ever more essential since myriad problems can arise between browser platforms and browser versions.

The types of computers also dramatically vary the multimedia experience. An old computer with a slow processor can make things happen very slowly, while newer computers with very fast processors can sometimes trigger a reverse problem: the animation might play too quickly.

Tell Visitors What to Expect

When people click on a Web link, they expect to go to an HTML page. If they're bound for something else, tell them so in advance. If the link is an audio or video file, state it clearly. State the size of the file they need to download and the type of plug-in required, and provide a link to the plug-in in case they wish to install it. Never assume Web site visitors are as technologically sophisticated as Web site designers; they're not.

What to AvoidYou Go Too Far

Business is not about "pushing boundaries." It's about making profit. Too many designers focus solely on creating exciting multimedia wizardry that many people will be unable—or unwilling—to spend time viewing.

You Turn Text into Images

As a rule, turning text into images should only be used for buttons and certain navigation links. One of the most common mistakes Web designers make is placing substantial quantities of text in an image. It's simply too hard to read! It's gimmickry for gimmickry's sake. The most readable text is black on a white background, and HTML is more than adequate at achieving this. Text in an image adds unnecessarily to download times, it cannot be searched, and it creates accessibility problems. The only text you should place as an image is, at most, a heading—and even that is not advisable.

You Misuse Scrolling Text

Scrolling text looks impressive but is often employed as just another gimmick. If you must scroll your text, make sure it moves at a suitable speed for reading and allows a visitor to halt it if desired.

Your Web Site Is Annoying!

Some Web sites seem to be designed to annoy people and distract them from the very information they want to read. If there is a quantity of text to be read, avoid animation altogether or have something animate a couple of times and then stop. Better to "spice up" the page with large key words in a different color. "Form follows function" on the Internet, too.

Where to Learn MoreBook:

Coorough, Calleen and James E. Shuman. Multimedia for the Web: Creating Digital Excitement, Revealed, Deluxe Education Edition. Course Technology, 2005.

Web Sites:

Webmonkey: www.webmonkey.com

Web site Optimization: www.web siteoptimization.com