When starting work on a website layout the first thing I like to do is get an idea of what kinds of ads and images will be incorporated into the site. This gives me a good idea of the restrictions I’ll be working with and how to work around them accordingly to get the best design possible.

Since most ad units conform to standard sizes I can prepare a site to best handle them, whether there’s an immediate need to have ads or I’m just planning for the future. A list of current standard ad (Interactive Marketing Unit or IMU) sizes can be found at the IAB (Interactive Advertising Bureau) website. I usually start with ad sizes as the baseline for my layout since they have the least amount of flexibility in them. This is because I’m relying on creative that’s usually coming from an outside source like an advertising agency or Google’s AdSense or because there are business requirements that dictate specific ad sizes. If the ad requirements are not strict and I have some ideas on how I’d like to incorporate images I’ll start with images as the baseline.

Unlike ad sizes, there’s a lot more flexibility with images as far as how you can size them since I generally don’t rely on an outside source for images. Even in cases where the images are coming from an outside source there’s usually no requirement to maintain the size or proportions of an image. Having said that it’s always a good idea to have standards in place. The standard that I use for images is that they are proportional to 640 x 480 (4:3 ratio) which is the standard proportion for digital cameras, computer monitors and TVs, although TVs in many cases are moving to the Widescreen (16:9 ratio) format. Most images that will come from digital cameras, stock images libraries, screen grabs, etc. will be proportional to 640 x 480.

So now that I have a set of standards established for ads and images I can calculate what kind of column widths I should use for my layout. To help out in this process I’ve created the chart below that lists compatible ad sizes, image sizes and column widths. The column widths are listed as 20 pixels wider than the ad and image widths to factor in a padding of 10 pixels. This can be adjusted based on need.

In the left column of the chart I have listed the standard ad sizes, grouped into categories as specified on the IAB’s website. The more popular ad sizes are highlighted in bold. The next column lists image sizes (width x height) that are proportional to 640 x 480 and have the same width as the ad listed to the left. The final column lists the appropriate column width (including 10 pixels of padding) to accommodate the ad and image listed to it’s left.

Rectangles and Pop-Ups

300 x 250 IMU – (Medium Rectangle), 300 x 225, 320
250 x 250 IMU – (Square Pop-Up), 250 x188, 270
240 x 400 IMU – (Vertical Rectangle), 240 x 180, 260
336 x 280 IMU – (Large Rectangle), 336 x 252, 356
180 x 150 IMU – (Rectangle), 180 x 135, 210

Banners and Buttons

468 x 60 IMU – (Full Banner), 468 x 351, 488
234 x 60 IMU – (Half Banner), 234 x 176, 254
88 x 31 IMU – (Micro Bar), 88 x 66, 108
120 x 90 IMU – (Button 1), 120 x 90, 140
120 x 60 IMU – (Button 2), 120 x 90, 140
120 x 240 IMU – (Vertical Banner), 120 x 90, 140
125 x 125 IMU – (Square Button), 125 x 94, 145
728 x 90 IMU – (Leaderboard), 728 x 546, 748

Skyscrapers

160 x 600 IMU – (Wide Skyscraper), 160 x 120, 180
120 x 600 IMU – (Skyscraper), 120 x 90, 140
300 x 600 IMU – (Half Page Ad), 300 x 225, 320

So now that I have this list I wanted to try and come up with a new general guideline to use for determining the best ad sizes, images and column widths to use in a website layout. What I wanted to do was come up with a set of 4 combinations of ads, images and column widths.

The idea here is that many sites that I work on are driven by a backend CMS (Content Management System) which helps to automate much of the process of publishing content online. One of the features of any good CMS system is that they will create multiple, small, medium, large and extra-large images automatically in standard sizes (update: there are actually ways to dynamically update images but these guidelines are still valid.). The reason for this is that the integrity of a design can be insured by only allowing fixed width images into any given area of the website, also website producers don’t need to deal with image production and as well, images can be easily assigned to content based on an ID and dynamically displayed in various sizes when associated with that content in different ways. For instance, a thumbnail (small) image on the homepage tease and a large image on the actual story page.

The chart below represents the combination of some of the most popular ad sizes with well proportioned image sizes to accommodate small, medium, large and extra-large versions.