What is Responsive Design?

Responsive web design is a method for designing a single web site that dynamically
adapts to fit the screen of the viewing device. The primary motivation is to make
reading and navigation easier for tablet and mobile phone users. This is typically
accomplished with fluid grids, scalable images and CSS media queries although other
methods exist.

The Problem

For as long as I can remember, and I’ve been in this business since 1998, ads have
always been designed at a fixed size. Back then the 468×60 banner was king. Then
computer screens got larger and larger, so naturally larger sizes like 728×90 and 970×90
were adopted. Then the mobile revolution happened and a funny thing
happened — screens got smaller! So, it’s simple right? We can just scale down our 728×90
or 970×90 ads to 320×50 on mobile phones and that solves it. Yeah, that might work if
you don’t care about being able to read the text on your banners. The scalable images
approach works fine for photos or illustrations, but it fails miserably when applied to
any graphic that contain rasterized text.

The Solution

The best solutions are always the simplest ones. Back in March we introduced support for
Responsive Ad Zones and we definitely nailed the simple part right on the
head. Here’s how it works. We know that 970×90 works good for computers, 728×90 works good
for tablets and 320×50 works good for phones. These are IAB standard sizes so most advertisers
are already producing creatives in these sizes.

We looked at this problem and said, you know what, why don’t we just make the ad server detect
the device type and serve an alternate ad zone that’s appropriately sized for the device.
So, that’s what we did. You can now configure your 970×90 zone to substitute a 728×90 zone in
its place for tablets and a 320×50 zone for mobile phones.

The best part about this solution is that the magic happens on the ad server, so you don’t
even need to change the zone coding on your web site to accomplish this!

Live Example

Here’s an example responsive ad zone. Space is limited on this blog, so I’m going to use
some different sizes for this example. On any type of computer you will see a 550×480 banner.
Tablet users will instead see a 336×280 banner and mobile phone users will see a 320×50 banner.

Note that if you have a User-Agent switching plugin installed in your browser you can use that
to test the responsiveness of the above banner since we detect the device type based
on it.

Making a Zone Responsive

I’m going to assume that you already have 970×90, 728×90 and 320×50 zones set up and filled
with some campaigns. The 970×90 will be shown to computer users, the 728×90 to tablet users and
the 320×50 to mobile phone users. In fact, it’s good if you already have the 970×90 zone coded
into your page since that will be required.

  1. Go to Zones and edit your 970×90 banner zone.
  2. Scroll down and click on Zone Substitution.
  3. Select your 728×90 banner zone for Tablets
  4. Select your 320×50 banner zone for Mobile Phones
  5. Press the Save Changes button

At this point you’ll need to code the 970×90 banner zone into your page if it’s not already.
The other zones are not coded into your page. We take care of the zone substitution on the
ad server, so it happens automatically.

Hiding Zones

Sometimes you don’t want a zone that appears on the desktop version of your site to appear
on your mobile site. This must be done very carefully. Simply adding CSS to hide the zone
is not a good approach because the ad content may still load and count impressions when in
reality the visitor did not see the ads! The better approach is to configure the zone to
hide itself for tablets and/or mobile devices, which completely stops the zone from being
served on those devices. For help with that, we have now written a
follow-up article showing
how to do that.

Final Thoughts

This article focused on banners, but this same approach can be applied to many types
of ads. Crawlers, lightboxes, overlays and text ads can all be made responsive. As
a rule of thumb, don’t exceed a creative width of 970 pixels for computers, 728 pixels
for tablets or 320 pixels for mobile phones and whenever possible try to stick to the
IAB standard sizes
(your advertisers will appreciate it).