Developing Media for Low Bandwidth

To deliver learning applications over the Web, you must first understand the concept of bandwidth.

Simply defined, bandwidth is the amount of information that a communications link can carry over a given amount of time. Bandwidth can be compared to a water pipe: the larger the pipe, the greater the volume of water that can flow through. A user who is connecting to the Internet with a 56Kbps modem has less bandwidth than someone connecting with a T1 connection: the slower the connection, the longer it takes data to download.

Multimedia applications can be media intensive, requiring high bandwidth. Creating learning applications that require more bandwidth than users have, to operate effectively forces them to wait an unacceptably long time for applications to load. To put bandwidth in perspective, remember that a T1 connection to the Internet is only as fast as a single-speed CD-ROM drive.

How content uses bandwidth

Online learning applications are essentially a collection of media elements that have been organized, presented, and logically sequenced on-screen to provide an effective learning experience. Typically, content elements are captured or created in separate editors. Those media assets are then imported into an authoring program, such as Macromedia Authorware or Dreamweaver. The size of the application is directly related to the type and number of media assets in the course.

So, how do you design courses to work well over the available bandwidth? It's imperative to understand the relationship between media types, file size, and speed of delivery over a network. From the perspective of bandwidth, all media is not created equal. As a rule, text and simple graphics download quickly at any bandwidth level. More complex media demand more bandwidth.

On the Web every kilobyte counts, so decide whether the media elements are worth the bandwidth price that users will pay to view them. Below is a chart illustrating the file size required to present approximately one minute of media.

How browsers handle media

The types of media used is constrained by the browser's limitations. Browsers can display formatted HTML text and three graphic formats: GIF, JPEG, and PNG. Browsers don't natively support audio, video, or sophisticated animation, which often requires installation of a media player plug-in. Fortunately, more than 90 percent of current browsers view Flash, and more than 50 percent of current browsers view Shockwave.

Another delivery method is Dynamic HTML, which enables animation and some complex user interactions. DHTML requires users to have at least a 4.0 version browser.

Selecting your media

Subject matter suggests, if not dictates, the choice of media. For instance, an online course on how to handle customer complaints through simulated service calls should use audio. An online course on human physiology might benefit from animation depicting such processes as how blood flows through the heart.

Prior to selecting your media, ask the following questions: What is the user's bandwidth? and Does delivery require the assistance of a media player plug-in? Designers are commonly forced to make tradeoffs based on the limitations of their target delivery environment. Obtain performance characteristics for the delivery network and create guidelines for file sizes and download times. Keep in mind the following: The maximum size for each Internet page should be 40K and the maximum size of each intranet page should be 100K.

Optimizing performance

The goal of your online learning course is to provide an interesting and effective learning experience with reasonable performance. There are two main ways to improve the course's performance: media optimization and streaming.

Streaming media refers to content that's presented in a continuous stream as the file downloads. The streamed file starts to play before it has entirely downloaded. Streaming is an effective way to deliver bandwidth-intensive content without making the user wait.

Although you can use streaming technologies to reduce the bandwidth, the cardinal rule of authoring is to make your courses small. This is called optimization. Here are some tips for optimizing various media types effectively.

Text. Text has many advantages: files are small and perform well at low bandwidth, users can search for specific words or phrases, and content can be updated easily.

Anti-aliasing creates attractive text that blends into the background color without any jagged edges. Using anti-aliased text avoids having to create display text as a graphics file, which would make the overall course size much larger. Authoring software, such as Authorware, Director, and Flash, support anti-aliased text.

Graphics. Online training usually consists of many graphics files, including photographs, screenshots, illustrations, and flowcharts. It's important to understand the strengths of the various formats and how to optimize them.

Most Web browsers can display GIF and JPEG files, which are bitmap files that are relatively small in size. Web browsers that are version 4.0 or later can display PNG files. GIFs and JPEGs compress images differently, each excelling at compressing different types of graphics. Use such software as Macromedia Fireworks to compare file size with various optimization settings to pick the best file format.

Use the GIF format for line art and graphics that have large areas of a single color and the JPEG format for continuous-tone images, such as photographs and images that use color gradients. Graphics saved in the GIF format can have one transparent color, but JPEG graphics cannot. The PNG format was developed as a patent-free replacement for the GIF format. Remember that the PNG format isn't supported by older browsers.

Techniques for optimizing graphics consist of modifying file attributes, such as decreasing the resolution, size, and number of colors. Web graphics should have a bitmap resolution of 72 pixels per inch. Using graphics saved at a higher resolution will make the file unnecessarily large. Never change the size of imported graphics directly in an authoring tool. If graphics are too large, resize them in an image-editing application.

Animation illustrates concepts with movement, shows processes, or draws attention to a region or elements of a screen. There are many packages that create animation, including Macromedia Director and Flash. An animation created within an authoring program is usually smaller and more efficient than an animation created in another tool and imported into the authoring program. That is particularly true when an animation is based on shapes created with the application's drawing tools rather than with imported bitmaps.

Animation file size is dependent on the size and file type of the graphics being animated. Techniques for optimizing animations are similar to those for optimizing graphics.

Audio can enhance learning concepts and reinforce ideas presented as text or graphics. Three types of audio assets commonly used are music, narration voice-overs, and sound effects. Music produces larger files because it demands a higher quality and a wider sound-frequency range than narration. Narration generally has a smaller sound-frequency range, and can be compressed more than music and still retain good sound quality. Sound effects are generally short, having little impact on the overall file size of a course.

The WAV and AIFF audio formats, popular on Microsoft Windows and Macintosh systems, create files that are too large to use in an online course. Both Shockwave Audio, which is used by Authorware and Director, and MP3, which is used by Flash, are popular compressed formats that are useful for all three types of audio used in online learning.

To obtain the best sound quality and most efficient optimization, start with clean, professional quality source material. Extraneous noise, hiss, and poor audio quality cause audio files to compress poorly.

Audio files can be quite large, but there are ways to optimize them for efficient playback. The key is to optimize audio by balancing sound quality and file size. Note that when the size of an audio file decreases, the sound quality usually decreases. To decrease the size of audio files, editors can change such file attributes such as lowering the bit depth from 16-bit to 8-bit or lowering the sample frequency from 44kHz to 22kHz. There are also compression tools, such as Microsoft ACM, that supply a standard method for compressing audio but require that certain files be installed on the user's machine.

Use a streaming format, such as Shockwave Audio or MP3, to deliver files allow them to start start playing before the entire audio file has been downloaded. Some tools offer scripting functions to determine how much of the sound downloads before the audio begins to play.

Another way to optimize musical audio is to use a short file that loops rather than one long audio track. You can loop several files to play throughout your piece.

Finally, mono audio files are significantly smaller than stereo audio files. Save your files as mono unless you have a specific reason to use stereo audio.

Video. Although video requires high bandwidth to download, it's useful for conveying certain information. The intricate level of detail visible in video is ideal for illustrating subtle, nonverbal information. For example, to teach sales skills you could use a video that demonstrates an interaction between a salesperson and a customer, then have the learners analyze the body language of the people involved in the transaction.

There are three standard digital video formats: QuickTime, Video for Windows, and MPEG. Streaming video format, such as RealVideo, requires a special server. Video files tend to be large and aren't appropriate for delivery on modem connections. Users can turn on bandwidth detection to automatically receive video at the highest quality their bandwidth supports.

Rather than in an authoring tool, video is captured, edited, and optimized in video editors such as Adobe Premiere. Clean, professional source material produces better quality compression. Video file size can be decreased by varying file parameters such as the CODEC used, the frame rate, and the number of colors in the palette. Or try decreasing video file size by making the video presentation window as small as possible.

If video is too bandwidth intensive, substitute still graphics and audio. That technique will considerably decrease the size of your course. Because Flash files are considerably smaller, substituting animation can also make downloading more efficient.

Authoring guidelines

Here are some additional tips on how to deliver low-bandwidth courses.

Interface design. A clean, simple interface design can make courses more compact. Create large blocks of color by using the authoring program's drawing tools rather than importing bitmaps. Keep in mind that graphics without gradients compress better than heavily shaded graphics. Above all, only use graphics that are necessary for learner comprehension.

Training delivered on CD-ROM and DVD are usually created for an 800 x 600 pixel screen resolution, but online courses require a smaller screen resolution that will download quickly. Optimization, compression, and streaming cannot compensate for poor design.

Status indicators. While users are waiting for files to download, let them know that something is happening by adding status indicators. Progress bars show how quickly a file is downloading. Loader movies, which can be presented in a very small window, present a short introduction or entertaining animation that holds the user's attention while files are downloading. Also, the loader movie can be a lightweight main menu that loads other portions of the course.

Developing content for low-bandwidth delivery is a skill that requires an understanding of the relationship between media and bandwidth and the capabilities of the tools and technologies being used. Selecting and using appropriate media requires a trade-off between the course requirements and content and the user's bandwidth constraints. Authoring software offers specific optimization and streaming techniques to make course content download as efficiently as possible. Courseware that takes advantage of those techniques will deliver engaging, media-rich online learning experiences, even over low-bandwidth connections.

Published: March 2001