How to handle ads using responsive web design

Responsive design is a web design strategy where a web page adjusts its content to the screen size of the device it is viewed on. By doing this, developers only need to make one web page instead of having 2 or 3 versions of the same page (and maybe even some apps). This can potentially save time and costs. A challenge when shifting to a responsive web design is how to handle the ads on a webpage. Some ads may only be viewable on large screens while others only look good on small screens. The following will show you different ways of handling ads on a web page using responsive web design with Cxense Display and describes the pros and cons of each strategy. The two strategies involve either calling in Content units for specific screen sizes or having several Creatives in the same Campaign.


Strategy 1: The many content units way

One approach can be to call in various content units on the page based on the screen width of the visiting device. This will ensure that the best suitable ads will be shown on each visiting device. To make this work, some placements, such as the top banner, may need to be handled by more than one content unit. Which content unit to be called must be determined by a script on the web page before loading the page. Some devices, such as smartphones and tablets, can change view when tilted. If the device can handle larger ads when tilted, the content units containing these ads can also be called in the initial page load. By doing that, ads will look optimal on a device able to handle both portrait and landscape views.

This strategy can be used solely on mobile devices by using the information available in a browser’s user agent. So if a mobile OS is recognized, content units for screens with widths ranging between the width and height of the screen of the visiting device could be called. It will, however, disturb the forecast and impression count as content units and campaigns may be called but not shown. Alternatively, one content unit can be called per page load. Stretching and shrinking can then be used to ensure that e.g. top banners cover the entire width of the screen of the viewing device.

Figure 1. Example of content units to be shown based on screen width of the visiting device. The different colors represent different placements (blue = top banner).


  • No additional Targeting needed
  • Easier to handle in Cxense Display
  • Easier to find competing campaigns in the same size
  • Most detailed reporting of the two strategies


  • Requires some on site logic to determine which content units to be loaded
  • The forecast on impressions may not be completely trustworthy if more content units are called for tilt-able devices
  • Site takeovers will be a challenge

Strategy 2: The several creatives in the same campaign way

Another strategy is to keep the same content units on the web page, regardless of screen size ad call in one of several creatives for a campaign by using creative targeting. A script on the web page side will be needed to determine when to call in which creative. The different creatives can be triggered by using keyword, category or even custom targeting where the parameter can be the screen width.

To make this work, the campaign must use “Any Dimension” and the delivery rule must be set to “Serve first valid creative”. The ads can be stretched or shrunken to fit any screen. One creative must be used as a fallback creative for when targeting does not work. A major advantage of this approach is that the same content unit will be loaded each time. This makes the forecast more accurate as the number of impressions on the content unit will match the number of impressions on campaigns.

Figure 2. Example of how various creatives can be called, stretched and shrunken depending on the width of the viewing device.


  • Forecast is more trustworthy
  • Simpler content unit structure


  • Requires targeting (keyword, category or custom) on creative level
  • Lesser detailed reporting than in strategy 1

What to remember when showing ads in a responsive design:

  • Mobile first – have campaign material for small screen devices
  • Have creatives in several sizes (e.g. 930×180, 728×90, 320×80), use shrinking/stretching if necessary (set ad width (in content unit tag) to percentage instead of pixels)
  • Book a total number of impressions/clicks rather than a specific number for each size
  • Have fallback images for devices incompatible with flash (e.g. iOS and OS X devices)
If you use composed javascript on your responsive web page, you should only include the content units in the init call that can be shown on the width of the pageload, as impressions will be counted on content units and found campaigns in the init call.
Have more questions? Submit a request


Powered by Zendesk