2

I don't see a lot of responsive websites with banner ads on them (at least when I view them on a cell phone). What would you say are the things to keep in mind when incorporating ads into a responsive web design?

5

Content First

One of the biggest things to consider is what can stay and what can be removed or adjusted, at each breakpoint.

Smashing Magazine was the first to take the approach of leaving behind (fully hiding) some ads when it doesn't fit into the breakpoint.

Smashing Magazine

With the mobile first strategy, Content is King. Most ads are sold on a Cost-Per-Click or Cost-Per-Impression basis. They won't get that kind of exposure at all if users are warded away by the advertising. The priority is on the content and not on the ads.

But they paid moneys for exposure!

No, you can't just ignore advertisers because they are less important than the content. You need to manage your relationships to remain successful as a publisher. Many sites have implemented these strategies:

  1. Providing Mobile sized ad units in the form of banners that "stick" to the top or bottom of the screen.

example

  1. Providing in-content Bigboxes which function much like commercials whereby the content is split by the ad.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I know this is not an exhaustive list but there are always more creative ways to include ads (beyond banners) without warding away your users.

Thou shalt not annoy your users

The largest frustrations with banner ads is the proximity of banner ads to the interactive regions of the site. Having your primary navigation too close to the clickable banner area increases the chance for errors.

The other example I see often is with the use of popup modal windows (like Lightbox) where the "Close" button is too small to tap. This will ward away users.

Just like any other interactive element, make sure it has enough clear space, with a large enough tap space (min-44px) as at the smaller breakpoints users are on a purely a touch interface.

Content is still First

At the end of the day, as the Publisher, you can decide to tier your advertisement strategy. Not all the ads will fit in a mobile screen. You can choose to adapt it for each case.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.