How to create user friendly pop-under ads

Advertising needs vs. visitor tools

Unsolicited advertising is a real annoyance on the web. However, sometimes you are asked or need to promote something and you do want it to be very much in the face of the visitors.

In the old days, we used a pop up window for that. However, as web surfers got fed up with the flood of pop-ups on a lot of sites, they started installing pop-up blockers, which later on got incorporated into the operating systems or the browsers themselves.

So pop-ups are not a clever idea to use for advertisements any longer, not only can they be blocked, but also cause warning messages that give visitors the creeps.

The solution: pop-unders. These are bits of content embedded in the site and positioned via CSS above the other content. By adding a script you can make them appear as small windows and offer a "close" functionality.

If you have JavaScript enabled you will have seen one of those showing above this text and clicked the "close" image in it to make it disappear. If you haven't JavaScript enabled you'll see the same information below the main content without the close image.

How pop-unders work

The ad used here could get be following HTML markup:

<div id="popad">
  <a href="#" 
  onclick="
  this.parentNode.parentNode.removeChild(this.parentNode);
  return false">close</a>
  <div id="popad_footage">
    <a href="[...url...]" rel="external">
    Go see the best knits at young moderns
    </a>
  </div>
  <div id="popad_content">
  <p>
  Meet the hottest knitting studs and gals 
  at <a href="[...url...]" rel="external">
  young moderns</a>.
  </p>
  </div>
</div>

With some CSS magic, this construct is turned into the ad shown here; the first step is to constrain the proportions of the DIV with the ID "popad":

#popad{
  padding:5px;
  border:1px solid #999;
  background:#eee;
  width:200px;
}

Then we give the link inside "popad_footage" a background image and dimensions - thus making the whole image clickable. We use text-indent and overflow to hide the original link text:

#popad_footage{
  height:250px;
  width:200px;
  background:url(knits.jpg) top left no-repeat;
}
#popad_footage a{
  display:block;			
  height:250px;
  width:200px;
  display:block;
  text-indent:-600px;
  overflow:hidden;
}

The rest of the styling in the demo CSS is eye candy. To position the ad above the page content we use absolute positioning for MSIE and fixed positioning for more modern browsers.

#popad{
  position:absolute;
  top:4em;
  left:40%;		
}
html>body #popad{
  position:fixed;
}

However, this technique has one really big problem: Visitors without JavaScript will get the ad, but will not be able to get rid of it - the "close" link is dead. Therefore we use a different markup and a JavaScript to create the link.

The cleaner option

We start with the HTML without the link to close the ad:

<div id="popad">
  <div id="popad_footage">
    <a href="[...url...]" rel="external">
    Go see the best knits at young moderns
    </a>
  </div>
  <div id="popad_content">
  <p>
  Meet the hottest knitting studs and gals 
  at <a href="[...url...]" rel="external">
  young moderns</a>.
  </p>
  </div>
</div>

We then add the necessary script in the head of the document:

<script type="text/javascript" 
src="popundermagic.js"></script>

The script does the following:

  • It adds a class called "dynamic" to the element with the ID "popad"
  • It creates the close link inside popad_footage and gives it the ID "popad_close".
  • It automatically opens each link inside the element with the ID "popad" that has a rel attribute of external in a new browser instance.

This means, we can determine to only apply the necessary CSS to position the ad when the visitor's browser can do it:

#popad{
  padding:5px;
  border:1px solid #999;
  background:#eee;
  width:200px;
}
#popad.dynamic{
  position:absolute;
  top:4em;
  left:40%;		
}
html>body #popad.dynamic{
  position:fixed;
}
#popad.dynamic #popad_footage{
  height:270px;
  width:200px;
  background:url(knitsjs.jpg) top left no-repeat;
}
#popad.dynamic #popad_footage a{
  height:240px;
}
#popad.dynamic #popad_footage a#popad_close{
  color:#ddd;
  height:20px;
}

This example applies another background image, that has a close button included and styles the "close" link high enough to cover this image.

The script needs the IDs described here, but you can change them by altering the variables in it:

var pa=document.getElementById('popad');
var ft=document.getElementById('popad_footage');
var closeLinkTitle='Activate to close';
var closeLinkId='popad_close';
var closeLinkText='remove this ad';
var dynamicClass='dynamic';

Get the goodies

You can download this demo page, the script and the CSS in one zip file:

Go see the best knits at young moderns

Meet the hottest knitting studs and gals at young moderns.