From the BlogSubscribe Now

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.