Animations

Animated GIFs

Animated GIFs (something like a short movie with fewer frames) have become popular recently, as an alternative to a brief movie clip.

The .gif is a graphics technology that is old in computer years, dating back to 1987. By contrast the .jpg format was not released until 1992 and the .png format came along in 1996.

GIFs have poor compression compared to JPGs, and far fewer colors than JPGs or PNGs. The advantage they do have is animation, a capability that neither JPGs nor PNGs have.

The relatively poor compression means that a feature length movie would be much larger than the other movie formats available, but for very short clips they are OK. The main thing to remember is that an animated GIF will be a lot larger (probably 10 times or more) and probably lower quality than a still image the same size.

We do not recommend animated GIFs unless you have a very good reason to use them. But we can create them if necessary. A bad example is on the left. Do you really want to give people the idea we have a shark problem in Belize? By contrast, a good example of a use for an animated GIF would be to demonstrate a simple action. We have few, if any, websites that really need them. Here is a great example (click on the image to the right to see the action). For more information about this image click here.

They can also make things flashy, drawing attention to something. This has the drawback of distracting from the rest of that web page.

CSS Animations

For many types of animations, there is a way to animate something on the website without adding a lot to the bandwidth, thereby increasing the time it takes to load the page on a slow connection. These CSS animations use the cascading stylesheets and JavaScript that is built into your browser to animate a feature on the website.

Here are two examples we have recently done (at the top of the page):

Text Animations

We can also use a JavaScript plugin to animate text. Below is an example. As it shows, this (and other animations) often attract attention at the expense of drawing it away from other important elements on the page. We recommend using it cautiously, if you use it at all.

  • HELLO!
  • This is Animated Text
  • Using a jQuery plugin
  • IT ATTRACTS
  • ATTENTION
  • By using a flashy animation
  • Something like this
  • BUT
  • HOWEVER
  • It detracts from the other text
  • Nearby on the same page
  • CAREFUL
  • Is it really that important?

Printed from jwebs.bz (Options, Animations (GIFs) - JWebs)