Vol. 1, No. 27
Ad Banners

Things are looking grim for your site. Hits are trailing off, guestbook entries have leveled, and nobody has placed an order for your widgets in over a week. It's time to advertise. You need to make yourself some banners. Yes, they are the plague of the Web, and many of them are poorly designed. But they bring in traffic like nobody's business.

Designing ad banners for the Web is a lot like designing roadside billboards, though each craft has its advantages and disadvantages. The huge plus of Web banners is that your product is just a click away: Once you intrigue the audience, they're there! There's none of the uncertainty that they'll remember the name of the product long enough to find the appropriate exit, cruise through downtown Springfield, wait in line, place an order, decline additional milkshakes, pull around to the pickup window, and finally close the deal.

The flip side of the coin is that billboard designers have hundreds of square feet to work with, while us Web folk only get 468 by 60 pixels (by common consent, and decree of the Internet Advertising Bureau. Still, necessity is the mother of invention, and we've learned to make our paltry plot of real estate bear sweet and nourishing fruit. Here are a few tricks of the trade.

Traditional advertising has only a few seconds to get the viewer's eye, and Web advertising is no different. Your banner is small, it's only visible briefly, and it competes with other page content for attention. It must catch the viewer's eye. If you know the page(s) it's going to be placed on, you can design it to contrast strikingly (but not unpleasantly) with the rest of the page. If not, just give it pizzazz and hope for the best. Bright colors are your friends. Do remember, though, that there is a fine line between intriguing and annoying. If the look of an ad is too busy and jarring, many people will scroll or click immediately just to get away from it. Bold but simple, that's the ticket.

The number-one feature most commonly associated with banner ads is animation. Yes, the animated GIF is by far the most common format for Web banners. You no doubt recall our tutorial on animating GIFs from way back when; check out this refresher.

Animation is the realm in which it's easiest to go overboard. Don't. Even though you think that army of morphing elephants makes an unforgettable statement about the product, it may not have the desired effect on your audience. A little subtle animation goes a long way. Fortunately, we're limited in our animated exuberance by file size. Most sites that will host your banner have strict limits, which can be too easily exceeded. So practice moderation.

You also want your animation loop to be short. If you think your audience is going to sit around waiting for a fifteen-second animated drama to unfold, you're sadly mistaken. A good rule of thumb is to keep the animation's running time under five seconds. Remember that some browsers only display the first frame of an animated GIF, so make that one count.

It's easy to forget, in the excitement of animating and optimizing, the most important thing: copy. It's very nice to make your ad attractive, but it needs to convey your message. The Web is littered with gorgeously designed ads whose text is blurry, misspelled, too small, bafflingly phrased, or just plain not there. Write clear, concise copy, spell-check it, lay it out in a big easy-to-read font, spell-check it again, and feature it prominently in your ad. Allow some space around the text so the ad doesn't appear too cluttered, and don't put, for example, pink text on an orange background.

Once the banner is made, you may need to optimize it to make the file size smaller. There are some steps you can take during the initial creation process to minimize the labor at the optimization stage. Limit animation, if you can, to one region of the image. Changing the entire image a lot racks up the byte count tremendously, whereas having the doggie simply wink once can be smaller, more elegant, and more effective. If you have to animate the whole thing, try to do this in as few frames as possible. One clever technique is to interpolate a single blurred frame between two points, instead of plotting the whole motion path using six distinct frames. Also, use the least amount of colors as you can get away with.

And you're done! Once you've made your banner small, beautiful, and compelling, you can upload it to a service like Banner Exchange or bCentral. They coordinate networks of sites that swap banners — you display other peoples' banners on your site, and they'll display yours. Just remember, it's up to you to ensure that folks aren't disappointed when they click on your ad.

HINTS, POINTERS, AND TIPS 'O THE TRADE:

Watch what other people do. For years you've been cruising the Web ignoring banner ads; now you must unlearn what you have learned. Focus on the ads. See what makes them work and not work. Apply that knowledge when creating your own ads.

Lying about what the audience will find if they click through, or pretending your ad is something other than an ad, is sleazy behavior. It may garner you a few clicks, but the clickers will hate you.

The traditional measurement of how well an ad is doing is the number of clicks it gets. If you're being paid by advertisers to host their banners on your site, it all comes down to the numbers. But even ads that aren't clicked on can be effective marketing tools, getting the brand name out there. After all, nobody clicks on TV ads, do they?

Stop to think after that fourth mint julep. Maybe updating your Web site can wait till morning.

RESOURCES:

BannerExchange.com

bCentral

IAB Ad Standards: Advertising Banner Sizes

Internet Junkbuster Headlines

Webmonkey: Ad Banner Design Tips

Webmonkey: Animation Tutorial

Handcrafted Archive