Responsive serving of ads based on viewport size!
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Responsive ads, on demand!

Responsive serving of ads based on viewport size!


This is The Register-Guard's solution to serving ads, on demand, based on viewport size.

At The Register-Guard, we built a "responsive" template for the comprehensive redesign of our site.

Serving different ad creatives, and different ad sizes, at the various break points is a mission critical aspect of our redesign requirements (we even optimized our grid system to work with IAB Standard Advertising Units).

Scan with phone and/or click to view the latest demo:

qr code

Browse through the source code here.


  • Ad Server: OpenX Enterprise
    • By default, this Ad Server is not setup to handle responsive ad inventory
  • OpenX Inventory Basics
  • Site Sectioning:
    • Main Section with various sub-sections
    • News
      • Local News
      • Etc...
    • Sports
      • More...
    • etc...


Un-Responsive Delivery Method:

Use the out-of-the box ad unit group (AUG) tags on each and every separate template (we have approx. 50-75).

In the Wild:

Provided the ability for 1 server ping per page to request all the ads on that page, but is a lot of inventory management and overhead.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Responsive Delivery Method 1: FAIL

Create 2 AUGs per template (desktop ads, mobile ads) and use CSS display:none to show/hide ad positions… Unfortunately, while it might sound easy to impliment such a system, there are drawbacks:

In the Wild:

From a functional perspective, your first instinct might be to use a simple display:none; in your stylesheet to hide bigger ads from showing up after a certain breakpoint. However, it’s not that easy.

What happens here is that the ad code is still being loaded, the impressions are counted for the advertiser, but their ad isn’t being shown. Using display:none to hide some ads would result in skewed numbers and would definitely affect the performance of ad campaigns. Display: none; isn’t a solution, it just creates more problems.

Adaptive Web-Design & Advertising

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Responsive Delivery Method 2: FAIL

Just deliver the normal script ad tags with a document.write and all is right with the world… WRONG

In the Wild:

It all boils down to Javascript's document.write command; unfortunately, if you call a script that uses this command (after the page has loaded) it will wipe out your page and only display the output of the write command.

If you you're building a responsive website, and you want your ads to change based on viewport size, then trying to call ad tags that use the document.write command just doesn't work.

I don't blame OpenX. The problem is deeper than that… Long story short, the online advertising industry needs to stop using document.write! — Micky Hulse

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Responsive Delivery Method 3: FAIL

Deliver every individual ad unit <script> tag with writeCapture2() & onMediaQuery() scripts

In the Wild:

A few months of research can be found via the defunct branch.

The bulk of the code in that branch used OpenX's <script> tag implimentation to serve ads to our pages.

Why did it all fail? Well, there's two primary reasons:

1. Seriously crappy, third party, HTML and/or javascript!

The crap HTML and/or javascript was a huge problem for when it came to using writeCapture or PostScribe plugins.

2. The moving target that is OpenX's code base!

During a span of two months, OpenX changed their ad serving javascript twice! After each change, our code broke. This was extremely frustrating.

It's hard to leverage a system that changes on a regular basis… The last situation we wanted to be in was a Friday afternoon and all the ads across all of our sites were not serving.

After the second OpenX change, we shelved the <script> tag approach and went back to the drawing board…

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Responsive Delivery Method 4: SUCCESS

Deliver every individual ad unit tag with writeCapture2() & onMediaQuery() scripts, but in the form of an<iframe> (can be injected after page-load and won't destroy the page)

In the Wild:

We built a Django app to help us serve our ads to our network of sites (via a wicked ah-some JSON call).

In situations where we can't use <iframe>s (e.g. a pushdown), we put our CSS's show/hide within the ad creative itself! The advantage here is that the ad gets counted only once! Though, the disadvantage is that we're loading twice the assets for any one viewport size/range.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Responsive Delivery Method 5: BETTER SUCCESS

Deliver AUGs via OpenX's asynchronous JS ad tags and kill the overhead of the OnMediaQuery JS and replace with MatchMedia JS.

OpenX now supports asynchronous JavaScript ad tags for standalone, ad unit group, and multi-ad unit ad calls. Implementing these tags will decrease webpage load times; users won't have to wait for webpage content to load before ads display. Currently, you cannot generate these ad tags in the user interface; however, the documentation describes how to manually build them.

OpenX Enterprise Release Notification

This code was extracted from this repo and lives here



Note: At The Register-Guard, we use OpenX Enterprise-level ad serving solutions for publishers, so that's what the demo uses to serve the ads; fortunately, this repo's code, concepts and techniques should be easy to adapt to other ad serving software.

With that said, if you have questions/concerns/comments/other, please feel free to post them via this repo's issue tracker.




Copyright © 2013 Micky Hulse, Patrick Sullivan / The Register-Guard

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.