Principles for Using Animation

There are certain givens about human beings. One of them is that people tend to be irritated by things that repeat endlessly. Think of that dripping faucet in the kitchen or the too-loud ticking of the clock on your wall. How about a neon light right outside your bedroom window, blinking on and off all night? What about your neighbor’s dog, which has been barking incessantly since two in the morning? Do you get the idea?

There is nothing more irritating than visiting a Web site that is loaded down with images that are constantly blinking, flashing, changing colors, or scooting about the page. It’s like trying to read a book with 20 people shouting in your face. Eventually you say, “Enough already. I’m outta here.”

That’s generally what visitors will say to a Web site whose designer is in love with animation. There’s nothing wrong with animation—just keep the irritation factor in mind when you use it. You can do that by remembering some of these principles:

• Limit your use of animation. The purpose of animation is to attract the visitor’s attention. If you have 10 or 15 different animated GIFs on each page, all you’ll succeed in doing is driving your visitor crazy.

• Don’t allow animations to loop endlessly. When you create them, set them to run about four, maybe five, times. That should be enough to draw a Web surfer’s attention.

• If you create Flash animations, make sure that they are not so large that your visitors have to wait a long time for them to download.

• If you want to use <marquee>, use it with the slide value. That will allow your text to slide onto the page, making a nice entrance without making people feel as if they’re staring at a theater marquee.

• Please, please don’t use the <blink> element.

Quick Reference: Adding Animation

Animation is tricky to use but, if done tastefully, can enhance your site. Animated GIFs are the simplest and most common forms of animation on the Web. However, you can also add animation through Java applets and Flash animation. HTML animations such as <marquee> and <blink> are discouraged because they are presentational elements. In the transitional world of XHTML 1.0, they are discouraged; in the strict world of XHTML 1.1 and even stricter world of XHTML 2.0, they are not permitted. The following table lists some of the basic code you will need to add animations to your Web pages:

<img src="animation.gif" />

<object classid="java:applet.class"


width="##" height="##"> </object>

<param name="

name

" value="value" />

<marquee>Text</marquee>

<blink>Blinking Text</blink>

selector {text-decoration: blink}