Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | previous | next |

29. Multimedia In Your Page

"Lights... Camera... Action!"
plus animation, plus sound, plus interaction, plus java, plus....


After this lesson you will be able to:


In the beginning (1993!)... there were only a few web pages... mostly text with a few pictures. Now there is quite a bit more you can load up onto a web page to appeal to the senses. You can now have media types such as motion, animated cartoons, video clips, sounds, interactive applications (no smell plug-ins yet). And some web pages will use all of these, several times over, in a single page, so that it may be unbearable to look at (or wait to download). If you really want to taste a few, see the WebHound's Good, Bad, and Bandwidth-Hogging Ugly.

In the next several lessons, we will review the basics of adding a few different types of media to your Volcano web site. This will not cover every possible media type available, just the ones that may be most accessible or useful to you. Also, we can not cover the basics of how you create the media (that would be several years of tutorial writing!) but where possible, we will try to identify sources where you can find existing media elements that are free to use.

Before using any type of media, you should carefully consider what value it adds to your content. Sure, the first few dancing animated gif icons you saw may be cute or eye catching, but they can also be distracting, and after a while, cliché. So your first question is, "Does this [sound, video, applet, animation] add important information to my site?" The converse to this question is, "Is this [sound, video, applet, animation] just [window dressing, eye candy, etc...]?"

When you decide to add a media element to your web site, a first cost to consider for you is "What will it take for me to create the [video clip, sound file, Java applet]? You may need special equipment, software, expertise, and above all time. Fortunately, you have some alternatives- you can identify and use free libraries of media elements, or "clip media".

For every media element you use, there are also "costs" to consider for a visitor to your site. You should ask yourself, "Does the media element require some special functionality (a plug-in, an Active-X control, a different/newer web browser)" By the time a visitor to your site downloads, installs and sometimes restarts their computer, they may have forgotten all about your site!

The second cost in using multimedia in your web page is time. Ask yourself, "How long it may take the content to download, or at least start revealing itself?" The longer the delay for visitors to your site, the least likely they will stick around or come back. Yes, the music may play, the icons animate, and the video will roll when you test it from your desktop computer, but that will not be the experience someone else has when they are connected to the Internet via an older modem with last year's web browser.

This boils down to making some guesswork assumptions about who the people are that will come to your web site. If you know that it will only be viewed internally on your company's fast network, you can more comfortably use bandwidth intensive media. If you know that your content will be viewed in training center with Version 4.9xgi of the SpiffGo Web browser, you can use content that relies on special plug-in supported by that browser.

But more likely, you want the world to visit your site (after all it is the first "w" in the "www"), and you will have little idea how they are connected to the net, what browsers they are using, etc. Our advice is to be more judicious (and creative) in your use of multimedia and provide alternatives where appropriate.

So in the next lessons we will provide examples of adding GIF animations, video clips, sound files, shockwave interaction, Flash, and Java to your web sites. For each media type, we provide some media selection guidance in the form of a chart as shown below.

media type: (name of media type)
what it does well: (types of information it works best with)
issue to consider rating comments
"hurdle" or barrier for creating media low high
what it takes to create or acquire the media type
"breadth" of audience that can view media narrow wide
relative range of audiences that can view the media type
bandwidth consumption low high
time and file size factors needed to view the media type

These ratings are merely a guide to help you consider different media types; in fact they are fairly subjective based upon our experience in using them all. Again the most important considerations are on the value of the media type to the content/message you hope to deliver.

One of the ways you can design your pages that contain multimedia is to make them as optional links from your main pages. This means that rather than inserting a 5 Mb video clip into your page, you create a link from that page to the video clip. This way, your site visitor decides if they want to view the clip. We will do this for most of our examples, which we will create as links that display the media in a separate browser window, using the JavaScript techniques we learned in lesson 28c.

Check Your Work

This is an introduction, so we have not made any changes to our project.


Review topics for this lesson:

  1. What are the "costs" to you for adding multimedia to your web pages?
  2. What are the "costs" to a visitor to your web site if it requires a special plug-in to view a media type?

More Information

Here are some more resources that you may find useful:

Coming Next....

Multimedia Element number 1... Add a GIF that does more than just sit there!

GO TO.... | Lesson Index | previous: "JavaScript: Window Openers" | next: "Multimedia: Animated GIFs" |

Writing HTML: Lesson 29: Multimedia in Your Page
©1994-2002 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
Questions? Comments? Visit our feedback center

URL: http://www.mcli.dist.maricopa.edu/tut/tut29.html

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.