Recipe 3.4. Designing Pages for Advertisements

Problem

You want to include advertisements on your site.

Solution

Design your pages to accommodate standard ad sizes.

Discussion

If generating income is one of your web site's goals (see Recipe 2.1), then sooner or later your might consider running advertisements alongside your content to meet it. If you've determined that your site's content and traffic will support advertising, then you'll need a page layout designed to hold the ads. If it isn't, then you'll spend unnecessary effort reworking ads to fit your design or redesigning your site to fit the accepted sizes. Or worseyou won't get any advertisers.

Designing your pages to hold ads is only half the battle, if that. You'll find that many advertisers require specific placement on your pages. They will always want to be "above the fold" (i.e., visible without scrolling down), and balancing these requests without losing room for your content can be a real challenge.

Although there might be several hundred different sizes and shapes of "banner" ads on display on the web these days, the most common ones match the standard sizes established by the Interactive Advertising Bureau (IAB) in late 2002.

Large sites like Yahoo!, AOL, and CNET, all of whom are members of the IAB, use these sizes almost exclusively. Figure 3-4 shows the four sizes the IAB endorsed.

Figure 3-4. When placed in their usual locations within a web page design, standard-size ads take up a lot of screen real estate

If you think these ads have been on a supersize-me fast food diet, you're right. The 728x90 pixel size (top of the page in Figure 3-4) is almost two and half times larger than 468x60 pixel ad common five or six years ago. The vertical and button-style ads have grown, too (see Table 3-1 for details). Including the new horizontal banner, these three standard sizes are designed for placement along the edges of your pages in spaces you might otherwise use for your site's navigation or additional content. The 300x250 size, on the other hand, has no direct analog among older sizes; its TV-screen aspect ratio makes it ideal for multimedia-heavy pitches placed in close proximity to the web site's own content. You need to have pages with enough content to "wrap around" this style of ad.

Table 3-1. Many advertisers will expect your site design to accommodate the standard ad sizes approved by the Interactive Advertising Bureau in 2002

Standard Size	IAB Weight Limits	Replaces	Usage
728x90	20K (30K for Flash)	468x60, 460x55, 392x72, and others	Banner ad
180x150	15K (20K for Flash)	120x90, 120x60, and 125x125	Button ad
160x600	20K (30K for Flash)	120x240	Vertical banner, tower, or skyscraper ad
300x250	20K (30K for Flash)	Various sizes	In-line multimedia ad

Beware that advertising on your site will add extra weight (and load time) to your pages, crowd your content into peculiar spaces, and might very well be ignored by your visitors. Usability studies have shown that web surfers have a blind spot for peripheral page elements (such as ads) that flash or jiggle in a bid for attention.

Because they are generated from the content on the page, text-based ads, such as those generated by Google's AdSense program, have a much better track record for generating clicks. When browsing a site for information on, say, the care and feeding of a pet iguana, web surfers have been shown to be more receptive to text ads promoting related services, such as iguana carriers, iguana medications, and iguana psychics. Many sites run text ads interchangeablyor instead ofgraphical ads in the same standard dimension spaces (Figure 3-5 shows an example).

See Also

To review the findings of the IAB's Ad Sizes Task Force, which established the standard ad sizes in widespread use today, visit http://www.iab.net/standards/adsizes.asp. For more about the Google AdSense program, see http://google.com/adsense.

Figure 3-5. Ad blocks filled with text-based pitches can fill the same slots in your design as graphical ads