Responsive Web and Advertising clash

go site In a recent Digiday article about how the New York magazine online edition is moving towards responsive web design, they describe some of the challenges faced by this school of thought.

As some of you know Responsive Web design is a school of thought that says you should design your web pages in a flexible layout that allows devices with various screen sizes access your site in a somewhat similar fashion.

For instance, you want your website to be usable to the person using a 4 inch iPhone and to the person using a 30 inch desktop monitor. One person would be using their thumb to navigate and the other is using a mouse and keyboard. In the past you would have had to design two different websites but these days you can’t accomodate for every screen size with a custom site, you need to make your layout flexible via the CSS.

I think the majority of online advertisers have no idea what is about to happen to their ads. So let me give you a bit of preview.

  • Currently most ad units are standardized sizes, the IAB standard units of 728 x 90, 300 x 250,  468 x 60 and 160 x 600 etc.
  • These ad units are quite rigid meaning that if the screen is bigger the ads dont get bigger, and if the screen is smaller they don’t really scale down well. The buttons may be too small for a thumb to press or the text might be too hard to read for an average user. They are really optimized for desktop viewing.
  • In recent years mobile advertisers have introduced mobile specific ad units but these too are quite rigid in their design.
  • From a reporting perspective, if your ad unit shows on a small screen but is unreadable, it still counts as an impression. This is a waste of your ad budget.
  • Right now most publishers don’t use ad tags that have operating system detection or device detection. Using a tag like this would help determine what ad unit can be seen given the screen size.
  • Your beloved retargeting campaigns may not work. As more ad networks are allowing cross device pixeling, you are not guaranteed your retargeted ad unit will look correct on the smaller screen.

Some publishers are taking steps to make their websites respond well to the large variations in device size but they need to take steps to monetize this inventory in a comparable manner to their desktop viewers.

As more and more people access the web via their phone or tablet, it will be increasingly important to create responsive ads that scale well and are easy to click on with a thumb or mouse.

Some tips to help make your ads perform better on mobile:

  • Ask your ad network you use, what happens to my ad when a mobile user sees it? Is it possible to show them a different creative size?
  • Test your ad unit on multiple devices. Make sure it is easy to click and make sure the landing page is easy to use regardless of the device.
  • If you don’t have ad units that scale down well, ask the ad network to block those impressions from your campaign. This may cut into your campaign quite a bit but at least you know the user experience is consistent.
  • Ask them if they offer click to call services based on the device. For instance if you are a hotel and a person sees your ad on a smart phone, why not just ask the person to call instead of going to a web page?
  • Use more text based ads which tend to scale a bit better.
  • Do not use Flash ad units. iOS devices do not support flash at all and it renders inconsistently on other mobile devices.
  • Check your analytics data to see what type of devices are accessing your ad specific URLs to get a better idea of the screen sizes
  • Talk with your ad designer to see what they know about responsive web.
  • Check with your webmaster to ensure you are collecting analytics data on your visitors.

The New iPad and the Future of Display Advertising

As many of you know the new iPad was released on March 16, 2012. From an app developer standpoint thousands of developers had to upgrade their app’s graphics to take advantage of the new Retina display.

Older apps that were graphics intense looked very grainy. Apps that relied more on elements that were scalable by CSS tended to adapt without much modification.

What does all this mean for Display Advertising?

If you already have a new iPad go to CNN.com. You will notice the images on the page look grainy and the 300 x 250 ad unit at the top right looks very grainy. Any of the standard IAB ad units look grainy. To test this on CNN.com using an iPad simply “pinch” the page and as it gets smaller the pictures and text in the ads will actually look sharper. This is because you are getting closer to their native resolution.

There are several potential problems with grainy ads on websites:

  • The ads will have a lower click through rate since they look un-professional
  • The ads do not adhere to brand guidelines creating an inconsistent brand experience
  • The publisher of the site may see lower revenue due to the lower click through rates.
  • For readers with vision problems or older readers the ads will be even harder to read. Naturally if your eye can’t read it, it skips over it. Once again bad for CTR rates.

What is causing my ads to look grainy or pixelated?

  • Your ads are most likely adhering to a very old file size limit that most ad-servers have built in. The file size limit was created to ensure that the ad renders quickly even on slower connections. As broadband penetration has increased file size limits have not really increased much. Essentially everyone still plans around the lowest common denominator accessing your site. Decreasing the file size and compressing the images makes them less scalable on larger screens and therefore causes the graininess.
  • Graphics that usually have a max file size, look decent on high resolution monitors and can be easily scaled down to fit older lower resolution monitors. The issue is that most images can not be scaled up to accommodate super high resolution screens like the new iPad.

What can my website do to look consistent on the new iPad?

  • For starters, check out how many people are actually accessing your site via the new iPad. You can see this in your Google Analytics data. If you don’t have a lot of people accessing your site via an iOS device, I wouldn’t bother with any changes.
  • A simple brute force change you can make is to upload higher resolution images to your site. This will slow your site down but it will keep the look and feel of the ads consistent.
  • You can implement a different CSS specifically for the new iPad. This is not recommended since you will end up rebuilding these style sheets every time a new product is released.
  • You can code your site in responsive design to accommodate for various screen sizes. Since the pixel count on the new iPad is so high, that actually becomes your largest canvas and you then work to scale the site for various screen sizes from there. The benefit here is that you are not designing for a specific device and it is much easier to maintain.
  • If you are using a third party ad network to fill your inventory ask them to only traffic ads with high resolution on your site.
  • Last but not least write into your ad network and ask them for a larger file size limit or ask them for different versions of the ads. The other option you may have is to ask for text only ads which are not flattened into images.
  • Lastly, you can use smaller images which may not show the grainy or pixelated effect as much.

What else should I be thinking about?

Since this affects all images on your website, it is important to test your website on variety of devices. I would strongly suggest going to your local Apple store and pulling up your website on one of the new iPads to check out how it renders.

Another key thing to think about is if you are using landing pages, those are usually graphic intense but highly compressed. Make sure those pages render to the original intended quality.