Web Toolbox Series: The Rotating Banner Tool

Over the last two years, our clients have come up with increasingly sophisticated ideas for using banner images to bring individuality to their Web sites on Hopkinsmedicine.org. It's definitely one of the most popular ways to set the tone for visitors to the home page of your web presence.

Unfortunately, clients were often limited by the relatively high costs of producing flash interactions to achieve some of their best ideas. And visitors to sites were sometimes faced with inconsistent methods for interacting with the banners from one site to the next.

In this predicament, we uncovered an opportunity to improve the value of the banner images, while not losing the individualism that they brought to each site. Our plan was to keep the rotating images, but to add more functionality to them.

The new tool enables us to build banners:

1. With single images or a series of three to six rotating images

2. With messages and links to deeper sections of sites

3. With the ability to swap out images for the cost of creating a single image rather than building and rebuilding an entire flash file

Content and Promotional Strategy
We wanted to give clients the ability to present important messages for visitors in the banners. We decided that the graphics should link to sections of the site that the client wishes to highlight. For example, if the Sidney Kimmel Comprehensive Cancer Center wants to highlight pancreatic care, they could easily do so through creating an image, adding a message and linking it to the appropriate page.

Additionally, they could create additional images linking to different areas of the site. We encourage the designers of the images to include “take action” copy, to indicate to visitors that the graphic is clickable.

For visitors, the banner needed to include a set of controls so that they could pause and navigate through the rotating images. Nothing is more frustrating to a user than losing the ability to control their actions on the site. We wanted to make sure our site visitors could return to a specific image, or simply pause the slideshow to focus on the image that they were looking at.

Non-Flash Banners
Our first attempt at the upgraded banners utilized Flash. However, we quickly learned that embedding Flash files required a lengthier development time, and was not easily managed or updated.  Additionally, Flash use requires extra steps to achieve handicap compliance standards, and recent mobile technologies do not currently support Flash.

With these factors in mind, we were able to find a solution that allowed for intuitive navigation and features in a more universal and easy to manage format.

We first implemented the banner tool on the Division of Facial Plastic and Reconstructive Surgery subsite. This static image of the banner tool demonstrates one of the rotating images, promoting and linking to more information about the Ethnic Cosmetic Surgery services.

Visit the Division of Facial Plastic and Reconstructive Surgery to see the full functionality.

Update, October 14th, 2010: To date, banners have been created for almost 20 subsites on Hopkinsmedicine.org. Here are a few recent additions: