Animated GIFs: Friends or Foes?

A number of web design features constitute what I like to call the Bad Web Designer's Toolkit. These are things that, in the right hands, can make a page visually interesting to read or to navigate; can make a page stand out from the crowd; and can direct the viewer's attention to where attention is desired. In the wrong hands, however, they can ruin a web page. And unfortunately, these features often do end up in the wrong hands.

The Bad Web Designer's Toolkit (BWDT) may include, for example, the egregiously large image map; this takes forever to download and offers little advantage over a simple menu of either images or text. The hideous tiled background is physically painful to look at, and often makes it impossible to read any text on the page. Then there's the <BLINK> tag, which requires no further explanation. And, most recently, there's the animated GIF.

I assume that you've seen these. But, briefly: animated GIFs are images that move or change. They're effectively a special kind of image: you need special tools to create them, but then you can stick them in a web page just as you would regular images. No compilers, plug-ins or expensive tools are needed. No need to learn programming. They're quick and easy and fun to create, and they can really make you go "wow" when you see them in action.

And those qualities -- quick, easy, and impressive in their results -- are just the problem with animated GIFS. A fine line separates those that are done well from cases of animated-GIF abuse. It is that capacity for abuse that lands the Animated GIF file squarely in the Bad Web Designer's Toolkit.

Are you an abuser of animated GIFs? Here are some of the warning signs:

1. Are you using animated GIFs to illustrate a point, to emphasize or draw attention to a specific part of a page, or are you just adding animations because they're way cool and you found this way cool site with lots of them?

Have a good reason for using GIF animations on your page. "Because it's way cool" is not a good reason. (Sorry. It's not. No.) If you're using GIF animations for things like bullets and separator lines, stop it right now. Your GIF animations aren't adding anything to your page, and they're making it distracting to read.

IBM uses an animated GIF to show different views of its Thinkpad laptops. The animation provides lots of information in a small amount of space. The page is better for the animation than it would be without it. The animated GIF serves a purpose beyond the merely decorative. (Note that the red dot and the "Think..." animations, however, are less useful, and distracting as well. Were I the ThinkPad web designer, I'd get rid of them.)

2. Do you use GIF animations sparingly, animating only what's necessary and going for a specific effect, or do you figure if one animation is cool then lots of them must be rilly cool?

A few animations that add a little spice to a page are better than lots of animations, which necessarily compete for attention. Mazda uses a slide show of car pictures at the top of its site; the slide show's pacing is slow, so it's less distracting, and nothing else on the page is animated.

Movado goes way overboard in the use of images (the whole page is an image), but the animated part is quite well done: the hands on the watch move, so the overall effect (once it has finished loading) is quite nice without being inanely flashy or distracting.

3. Do your animations play a few times and then stop, or do they continue going and going and going and going?

You can create a GIF animation that loops a specified number of times, and then stops. Animations that loop, then stop, provide their maximum effect when the reader first loads the page; thereafter, they read like any other static image. It's the best of both worlds. The effect is cool but minimally distracting/annoying (I think "be less annoying" should be one of the major goals of every web designer).

IBM's web site is also good in this respect; the home page has a small, subtle animated GIF in the top right corner that runs for a very short time, then stops. Blink and you'll miss it (no pun intended).

How did you do? I hope that everybody who's read this is scoffing: "But of course all my animations are tasteful and not annoying". But if that hasn't been your response, your self-esteem need not plunge. Every web site is, like every freeway, permanently under construction. And every web site has room for improvement.

Still interested? Want to learn more? GIF Animation on the Web is my favorite site for general information about creating and using the wiggly things. The site has reviews and links to tools, tutorials and a gallery of images. If you're looking for more GIF animations to play with, a search for "GIF animation" on any of your favourite web indexes or search engines should turn up plenty. Enjoy!

mtrbike said:

Digital ID wll most likely become more and more important, particularly as elecontric cash and payment systems become more widely used.

Do YOU have your own personal digital ID? a PGP key? Something else?

Join the conversation!

Most Active Topics:

Topic 6 5 years from now, the web will be....

Topic 41 Pointcast

Topic 70 FYI: Fallback Plans

All Web Tech Topics

Speeding Up with HTTP 1.1
Your pages take too long to download ­ and it's not your fault. HTTP 1.1 may help.

WebTV: Better Than You Think
How do your pages look on WebTV? Probably better than you think.

Animated GIFs: Friends or Foes?
A fine line separates those that are done well from cases of animated-GIF abuse.

Complete Archive