So, You Want Online Animation?

Web site animation can greatly enhance a visitor's experience on your web site. There are basically two popular methods of adding animation to your web site: Flash and JavaScript. Both of these technologies have been around since 1996 and have become more powerful over time.

Traditionally, Adobe Flash has been used for online animation because it has incredible market penetration. Adobe estimates that over 98% of visitors have a recent version of Flash installed on their computer. Because of this, it's relatively safe to assume that your visitors will be able to view your Flash content. Recently, Flash has been used as a way to effectively distribute video content. It's used on nearly every popular video site, such as YouTube, and has greatly improved the compatibility of online video.

Although JavaScript was available at the same time as Flash, it was not built primarily as an animation framework. Plus, browser inconsistencies and desktop computer performance made it unsuitable for effective online animation. Recently, with the release of updated browsers and a tremendous improvement in desktop computer performance, JavaScript-based animation has become much more common. It has several advantages over Flash, but three immediately come to mind:

1. JavaScript can animate ANYTHING on a web page. Unlike Flash, which can only animate things within the Flash file itself, JavaScript has access to every item on the page.
2. JavaScript doesn't require separate "working" files. This means that you will never be in a situation where you can't edit your web site because you lost your original animation files.
3. JavaScript can be used to ENHANCE rather than REPLACE content. Web site content is written in HTML. Properly developed JavaScript enhances that HTML with animation. Flash, in contrast, does not use the HTML content, so it must either duplicate or replace the HTML.

Of course, that doesn't mean that Flash is always bad. In fact, in many cases (such as online video) Flash is the best choice. It's always important to use the right tool for the job.

Below are some of my recommendations for using animation, including whether JavaScript or Flash is the better tool for the job.

• Site Navigation
  With very few exceptions, you should NEVER have links within a Flash animation. This is especially true for your site's main navigation. This breaks certain browser functionality such as opening links in new tabs or windows. This will frustrate some of your visitors. In addition, it prevents visitors without Flash from browsing your site at all, including the growing number of people with web-enabled cellphones and PDAs.

  Recommendation: JavaScript

• Usability Considerations
  Users have certain expectations from a web site. For example, when they click the "Back" button, they expect to go back one page. A site built entirely in Flash will often prevent this. This has probably happened to you: you're browsing a site and advance several pages, then you click the back button and mysteriously you are teleported back to the home page. This is frustrating to visitors and could result in lost customers. There may be times when it makes sense to sacrifice the "Back" button (as we have in our People and Work sections), but you need to think it through and be sure the benefits outweigh the cost.

  Recommendation: Don't use JavaScript or Flash for multiple levels of deep navigation.

• Search Engine Optimization
  If search engines are important to your business, you want to be very careful how you implement animation. With a few exceptions, animated parts of your site are invisible to search engines. That Flash-animated shopping page might look cool, but it effectively hides all of your products from the search engines, which will significantly reduce traffic. The bottom line is all searchable content should be included in the HTML of the site, which can only be animated with JavaScript.

  Recommendation: JavaScript

• Audio and Video Content
  Unless your visitors need to download the multimedia files to their computer, Flash is by far the best option for adding audio and video to your web site. Quicktime, RealPlayer, Silverlight and Windows Media don't have near the market penetration that Flash does. However, audio and video are often used inappropriately. The key is avoiding anything that slows down your visitors. The online audience is notoriously impatient. Before adding that three-minute corporate video as a Flash intro, ask yourself how it will affect the impatient guy who's just looking for your phone number. All lengthy multimedia content should be "on demand" or easy to mute and/or skip.

  Recommendation: Flash

• Web Site Statistics
  It can be tempting to use animation to make smooth transitions from page-to-page. For example, photo slide shows are often built using JavaScript or Flash to provide smooth transitions between photos. While this improves the usability of the site, most statistics software will, by default, not track these interactions. Unless you're careful, you might be eliminating your only method of evaluating the performance of important sections of your site. There are often workarounds, so make sure your web developer knows what kinds of statistics need to be recorded.

  Recommendation: Neither, unless statistics are unnecessary or you use a workaround.

For each of the issues I've mentioned, there are workarounds and exceptions and I probably haven't even scratched the surface of this growing area of web development. However, these are some of the most important things that you need to think about when you decide to spruce up your web site with animation.

To get our latest articles when they are posted, please subscribe by e-mail or RSS.

Filed Under: web