Defining a New Standard for Responsive Advertising

Chris Strahl
#Responsive | Posted

This past weekend at the NYC Drupal Camp Responsive Ad Sprint, a group of Drupal community members in media, advertising, and technology came together to help define the future of responsive advertising.  To learn more about our responsive advertising sprint goals, check out Annie's interview with responsive expert, Sam Richard.

[gallery columns="2" size="large" ids="14486,14485"]

Specifically, we looked at the Interactive Advertising Bureau's (IAB) new HTML5 standard for advertisements. While these new standards bring about modernization and new ways of making ads HTML5 compliant, it doesn't contain any information about responsive design.

Responsive design in advertising has always been a challenge. Responsive design seeks to adapt user's experience based on the platform (by platform I mean both the device and the browser), on which the site is viewed.  Where as, traditionally, ads hold a uniform size and shape regardless of the platform experience. Currently, adapting ads to different platforms requires techniques like a separate mobile theme, device detection, or stretching or scaling a static sized ad. None of these techniques provide an adequate or "true" cross-platform experience, nor do they come without significant technical gaps and hurdles.

The best way to create responsive ads to date is by swapping them based on the platform needs. This requires defined pre-sets for the specific ads that are served at a specific viewport size. This technique still requires some additional tricks to get it to work effectively. Further, it requires a developer to create multiple unique ads. Sometimes in the case of devices that use multiple orientations, it causes multiple ad impressions to be served to a single user.

So how do we create a solution where a single responsive ad can be designed by adapting to the viewport we've defined? A combination of technology makes this possible, including:

  • HTML5 / CSS3
  • Intrinsic ratios
  • Media queries
  • IFrames

A detailed explanation of how these technologies work together can be found in the draft specification document. However in short, a single HTML file is served within the ad space in an iframe. This ad is then made responsive based upon adjustments to the iframe size via intrinsic ratios. These adjustments cause media queries to alter the CSS applied to the HTML (or potentially change what CSS is loaded entirely). In this way, a single HTML5 ad can serve experiences adapted to nearly any platform.

Further, HTML5 has the added benefit of being able to create interactive experiences that we haven't really seen before. With new capabilities like access to geo-location information, commerce capabilities, file downloads, and more, HTML5 opens up a way to create new and rich experiences within ads.

Here are some great examples of this in action (be sure you change your screen size!):

  • This is an ad that embeds a video trailer for a movie. You could see how this would tie to a system for purchasing tickets from within the ad.
  • Ordering a sandwich online based on your geolocation data would be both convenient and delicious (unfortunately if you fill out the order form you won't actually get a sandwich).

So what's next?

We need people to look over the document we created and show the slide show we produced to representatives in the advertising industry . We're also going to be soliciting information from IAB representatives as well. The more feedback we have the better, take a look and let us know what you think!

I would like to give a big thank you to everyone that helped out at the sprint. You guys are fantastic!

Chris Strahl