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.
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.
Well, 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 best solutions are always the simplest ones.
We know that 970×90 works good for computers, 728×90 works well for tablets and 320×50 works well for phones. These are IAB standard sizes so most advertisers are already producing creatives in these sizes.
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!
Here’s an example responsive ad zone use case. Imagine a situation where we want the computer to show a 970×90 banner. Meanwhile Tablet users should instead see a 728×90 banner while 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.
- Go to Zones and edit your 970×90 banner zone.
- Scroll down and click on Zone Substitution.
- Select your 728×90 banner zone for Tablets
- Select your 320×50 banner zone for Mobile Phones
- 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.
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.
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).