Responsive Design Advertising Begins with a Few Simple Rules

Responsive design advertising for mobile websites is easier to implement than designs that target desktop and tablet computers. Mobile sites have fewer ad placement options.

The majority of mobile browsers are 320 x 568 and 320 x 480. The orientation is usually vertical. The user typically scrolls down to see or read what is on the page until exiting via a link, ad or url for another site.

Why these obvious facts matter is because they have much to do with implementing ad units on a responsive design page.

Mobile Ad Units

For newcomers to mobile sites and responsive design (the ability of a site to change its presentation based on the browser, device and window size of the visitor), mobile ad unit sizes are far fewer in number than desktop ad units.

The most common and widely accepted units at this time are 320 x 50 (not very effective) and 300 x 250 (much more effective). Both sizes fit neatly across a 320-pixel-wide smartphone screen. They are sometimes called default mobile banners.

On a 320 x 480 phone, the 320 x 50 consumes about 10 percent of the viewing space. Obviously, the 300 x 250 consumes nearly all of it and usually forces the viewer to scroll. But it has much more room for advertisers to communicate with potential clients.

Other mobile ad units include 320 x 100 (more common) and 300 x 50 (less common). More recently, there has been a trend toward 320 x 480 ad units that entirely fill the screen of phones with that resolution.

The 320 x 100 often appears as a fixed position at the bottom of a mobile phone’s display area.

Responsive Design Ad Placement

Deciding where to place these ad units is among the simplest decisions in online advertising. There aren’t many places to put them because of the size of the screen.

Anyone who goes to mobile sites with their phones will see several common patterns:

• A banner ad unit at the top of the page.
• Sometimes a fixed ad unit at the bottom of the page.
• Sometimes a unit in the middle of the page (easy to do on an index page; difficult to do on an article page).

One of the variations on this approach is a combination of 320 x 50 and 300 x 250 ads depending on the location. It’s worthwhile to keep in mind that too many ads and photos could result in a poor user experience.  In addition, a user is not likely to scroll “forever” and may never see any ads near the bottom of a long page.

Another but less common approach is a single “sticky” ad unit that always appears at the bottom (or top) of the page no matter how much scrolling the visitor does.

This approach has a few downsides. One is that it runs the risk of annoying the visitor. The other is that the ad most likely will not change.

This approach also may be rewarding. Some sites that have implemented it report high click rates.

More recently, Google AdSense has removed the need for sites to place those ads. AdSense automates the placement of them.

Analyzing the Results

Like just about everything in online media, it pays to analyze the results on a regular basis.

Responsive design sites have different approaches and different audiences. Click rates may vary from one position to another.

Either way, the future of most successful Web sites lies with developing responsive designs that accommodate advertisers and ad unit performance.

Implementing these ad units requires following the responsive design advertising guidelines above.