The human brain and visual system is highly optimised to detect movement. If you don’t believe me, watch what happens to people’s attention when you turn on a TV in a room. Even if the sound is off, the program is dull and the conversation is interesting, people will find it very hard not to stare at the TV. You can exploit this by using animation on your website to grab the user’s attention. Animation is also a useful way of packing a lot of content into a limited space on your web page.

Animated GIFs are a useful low-tech way of adding animation to a website. They work in pretty much any browser, without requiring visitors to download a plug-in or even click a ‘play’ button. I use them on the PerfectTablePlan home page to show rotating testimonials and on adwords landing pages to give a brief visual overview of what PerfectTablePlan can do.

Animated GIFs are quite easy to create. Here is how I created the image above (on Windows):

1. I used Sizer (freeware) to size the PerfectTablePlan main window to 960×750.
2. I used SnagIt (commercial) to capture various screenshots, resize them to 320×250 and save them as separate 7-bit GIFs.
3. I dragged the GIFs onto UnFreez (donationware) and created an animated GIF. (You can also use Adobe Photoshop, if you have it).
4. I dragged the animated GIF onto SuperGIF (commercial with trial) to reduce the file size (by about 5% in this case).

The final result isn’t a work of art, but it is hopefully enough to grab the visitors attention and whet their appetite for more information.

Animated GIFs can get very large if you aren’t careful. But it rather defeats the object if your website visitor clicks ‘back’ before the image has loaded. I used 7-bit GIFs, small image dimensions, a limited number of frames and GIF optimisation to keep the file above to 72kb.

A word of warning – use animation sparingly or the effect can be quite overwhelming (don’t click this link if have epilepsy or a refined sense of taste).