attachment-51ddf5e0e4b091cde9788fbc

Responsive advertising is a variant of popular concept, responsive design, which is an innovation to reflect the changing nature of the consumption of digital content across an array of devices. In essence, since people consume web content on their laptops or desktop computers, phones, and tablets (all of which have a wide range of screen dimensions), web pages should be designed to display properly, and in a usable fashion, no matter which device is used to access them.

For a simple illustration of responsive design, take a look at our new blog design (which debuted yesterday). If you're on a computer, shrink your browser window and see how the layout changes.  

In the screenshots above, you can see that the way the blog is rendered changes depending on the dimensions of the browser window. As the browser window gets narrower, the responsive template changes the layout of items so that the browsing experience matches the intended device, without the need to pinch-and-zoom, or scroll horizontally. Navigation should also reflect the device used. In the narrowest/phone view, the navigation menu becomes available by tapping on the menu button that appears to the top left, for example.

Responsive Advertising

Just as a web page should adapt to the dimensions and method of interaction of the device used, the same should be the case for ads. Ads developed for desktop environments don't necessarily suit mobile ones, and vice versa. The popular Sidekick, for instance, expands from 300x250 to 850x700, moving adjacent content to accommodate the expansion. On a computer, it makes for a nice visual effect; on tablets and phones, it's downright obnoxious.

So, for a definition:

Responsive advertising: digital ads embedded on web pages that adapt—in shape, dimensions and/or layout—for devices and browsing environments of very different sizes. 

There are two paradigms for responsive ads that the IAB, in its report, describes:

  1. Stretch: an ad doesn't have fixed dimensions, but rather is sized by the ad server once it determines the width of the viewable screen. Ads delivered to a computer browser will "stretch" to accommodate a wider screen than the same ad delivered to a smartphone browser. 
  2. Swap: an ad is assembled by the ad server using various components (text, graphic and other elements, etc.) once it determines how much room it has at its disposal.

The IAB report points to a demo page developed by firm ResponsiveAds that demonstrates how this works. Screenshots below demonstrate how the Stretch and Swap look as the browser window changes dimensions:

Stretch Example

As the browser window narrows, the leaderboard (768x90) will shrink proportionately until it hits thresholds of other common banner units—468x60 and 320x50—standard sizes appropriate for tablets and smartphones, respectively. Within each of the bracketed unit types, elements within the banner change as the browser window resizes.

Swap Example

As the browser window narrows, the skyscraper (160x600) in the left rail converts into a banner (468x60) that moves to sit above the text content. Further shrinking of the browser width converts the unit into a mobile banner (300x50).