Less is more: Using DHTML effects with restraint

September 2002

By Marian Myerson

It's getting easier and easier for new designers to implement innovative DHTML effects on their Web sites. How do you know when enough is enough? Dynamic Hypertext Markup Language (DHTML) effects can help enhance a user's experience, but only when those effects are used with care. A little DHTML can go a long way.

Limited budgets, limited time, and the limitless possibilities of design are all challenges that a small-business owner faces when trying to create a professional Web site that turns a one-time visitor into a repeat customer. DHTML, used with care, can help improve the look and feel of your Web site.

DHTML can add richness, interactivity, and graphical interest to Web pages by providing those pages with the ability to change, update, and animate dynamically—that is, in response to user actions, such as clicking or moving the pointer over text or graphics. This eliminates the need for repeated downloads from the server.

This article shows how to create rollovers using the DHTML Effects toolbar in the Microsoft FrontPage 2002 Web site creation and management tool. With a rollover, when a site visitor positions the mouse pointer over a hyperlink, it changes attributes—for example, it changes to a larger, bold, red font. Let FrontPage do the coding for you!

Simplicity is the best policy

The purpose of a Web site is to get visitors to read about your products and perhaps to buy them. It helps if a visitor has a good experience while visiting your site.

One of the best ways to ensure a good experience is to make your site easy to read, to enhance the usability of the site. This means ample white space, simplicity, clear headings, fast-loading pictures, and no borderlines. It also helps to keep text short and to the point. According to Web usability expert Jacob Neilsen, people read 25 percent slower on screen and only 16 percent of them read word-for-word. According to Neilsen, if users don't find what they want in three mouse clicks, they're on to the next site. So it is important to keep your message clear and concise, and to do fewer animations for more impact.

When not to use animations

It's important to use animations with care on your home page. Some usability experts even suggest that you not use them at all. Animations can be mistaken for advertisements and can distract the visitor from your main message. If the visitor can't find what he or she wants in no more than eight seconds, you run the risk of losing them to a competitor's Web site. Here are some other hints about when not to use animations:

• Don't animate the logo or main headline to look like advertisements. Many first-time visitors will confuse continuously moving animations with advertisements and ignore your logo or headline all together.
• Don't use animations that don't stop after a few cycles or that the users can't turn off.
• Don't overload your Web site with animations. Too many animations make the page look busy and make it harder to focus on the main message. Animations can also make your page take longer to download.

When to use animations

Animations can be very useful when you want to alert users to a single element or updated information. You may also want animations to show your Web site contents or to show change over time, continuity in transitions, multiple pieces of information in the same space, and even three-dimensional structures.

One example of a DHTML effect that helps give clarity to a Web site is the rollover, which you can create with the DHTML Effects toolbar. Rolling over text or graphics is an animation triggered by an event, such as clicking or moving your mouse pointer over it.

Look! No coding!

To turn on the DHTML Effects toolbar in Frontpage, click the View menu, point to Toolbars, and click DHTML Effects. This will bring up the toolbar on your screen.

The DHTML Effects toolbar provides three drop-down menus:

• On for a list of events (an event is an action that triggers the effect).
• Apply for effects for each event (an effect is the way the text or picture changes its appearance when the pointer is over it).
• Settings for some of the effects.

Animating text

If you want the text to change when you move the mouse over the text, do the following:

1. In the On list, click the Mouse over event.
2. In the Apply list, click the Formatting effect (the only option for a Mouse over event).

3. In the Settings list, click Choose Font or Choose Border. This opens a dialog box in which you can make further selections.

For example, you can choose settings so that, when you place your pointer over the original text, the text rolls over to the same text with slightly different font attributes.

To trigger an event by clicking or double-clicking an element on your page

1. In the On list, choose Click or Double click.
2. In the Apply list, choose Fly out or Formatting.

For the fly out effect, choose one of eight settings for the way the text should fly out of the page (to left, to top, and so on), either frameless or in a small frame area. Should you decide to insert a frame after you create a page:

1. Place your pointer where you want to insert the frame, and then on the Insert menu, click Inline Frame.
2. For the formatting effect, click Choose Font or Choose Border.

If you choose the Page load event, you have several effect options. For example, when a page loads, a word flies in from top to right. Be cautious, however, about using animations that can distract users from the more important elements on your Web site. Otherwise, the users might go to a competitor's Web site to give their eyes a rest.

The following is a list of events, effects, and settings provided by the DHTML Effects toolbar:

Animating images

You have a more limited choice when you want to animate images. If you select an image and choose the Mouse over event, the only effect option is Swap Picture. On the Settings menu, you must click Choose picture, and then browse to the picture of your choice.

For example, placing your mouse over a graphic button can change it to a graphic with different attributes.

If you select an image and choose Click, you have two effect options: Fly out and Swap Picture.

If you choose Double click, you are limited to Fly out as the only effect option.

If you choose Page load, keep your image small.

Take a peek at the code

After you create a DHTML effect, you can switch from Normal view to HTML view in FrontPage to take a look at the coding. You will see JavaScript functions such as dynAnimation() {} and clickSwapImg () {}. If you learn JavaScript or a related scripting language, you'll be able to write similar scripts on your own.

Conclusion

Remember, sometimes less is more. Showing restraint in the use of DHTML effects can lead to a more positive user experience. For small businesses with an online presence, a happy user is a more likely to become a satisfied customer.

---

Marian Myerson, writer and systems engineer/architect

---