04/09/14 · Penarth, Wales · The two most important features for selling web advertising are size and placement. Sure, there are tons of other factors, but for your everyday digital ad, “How big?” and “How high up the page?” are major selling points. Over the last few years, though, responsive design has done its best to make these agreements murky as hell for advertisers and content makers. Size and position are hard to guarantee on a fluid canvas, and I’ve seen responsive redesigns for big brands put on hold for indefinite periods of time due to uncertainty of ad placements.

While the large-scale innovations developed to sidestep these issues are more than welcome, I may have found a simple solution for the rest of the bell curve.

Exclusions

With most responsive designs, differing screen sizes make text flows longer or shorter, changing the positioning of items in the flow and making it impossible to define their vertical placement. You can hack this with fixed positioning, but that can be disruptive for reading experiences, and you have to design long areas of negative space for items to travel through. What we need are exclusions.

In Graphic Design terms, an exclusion is when you wrap text around a shape. This is used quite often in editorial design to make more interesting layouts. For the fluid canvas of a browser, exclusions represent a way for text to flow at different screen sizes, but still keep sufficient margins around imagery, blockquotes, and of course, advertising.

Exclusion properties in CSS, whether achieved through the Shapes or Exclusions module, are a along way off, but a few weeks ago I stumbled across a method to mimic this functionality right now. And an added bonus: this method allows you to explicitly define how far down the page an item will display.

This very article, and its ad placement, is a demo of fake exclusions in action. If you can, resize the browser window and note how the text wraps around the ad, and the ad retains its vertical placement in relation to the start of the article. For a simpler example, check out this demo on CodePen.

How it works

On this page, the article element has a class of .ad-placement and is given position: relative. Our .advertisement element, which houses the ad, is floated right or left based on where we want it to appear in the content, cleared on both sides, and given margin to keep the text at a comfortable distance. Note: It’s important that .advertisement is the first child of .ad-placement in your HTML.

.ad-placement {
  position: relative;
}

.advertisement {
  margin: 2em 0 2em 2em;
  clear: both;
  float: right;
}

We can then attach a pseudo-element (::before) to .ad-placement which drives the exclusion method. By floating this element in the same direction as .advertisement, and adding 100% negative margin in the opposite direction of the float, this pseudo-element acts like a magnet, pulling the content back into place at the top of the article, while its height pushes the .advertisement element down into place.

.ad-placement {
  position: relative;
}

.ad-placement::before {
  content: "";
  height: 20em;
  margin-left: -100%;
  display: block;
  float: right;
}

.advertisement {
  margin: 2em 0 2em 2em;
  clear: both;
  float: right;
}

We can now guarantee that the ad will be given plenty of space, fit nicely within the content, and always be 20em from the top of the article. Most interestingly, on mobile viewports the content completely breaks above the ad (20em from the top) and automatically continues after.

Note: This method works in on all devices and browsers I’ve tested, including: WebKit, Mobile WebKit, Firefox, and IE 8+.

For more about CSS Shapes and Exclusions, Sara Soueidan has written a great introduction over on A List Apart.