Preventing content from "shifting" for Adblockers

Consistent page with or without ads

Anyone who inserts contextual advertisements into their pages – like Google Adsense – are aware of the fact that some readers block advertisements. Oftentimes, methods for removing advertisements from view alter the structure of a page, in turn, changing the layout. For some websites or blogs, this does not pose a problem. For websites created to present both content and advertisements in harmony, removing ad elements may have a negative impact on a pages layout.

Ultimately, the author controls layout

Contrary to what some readers [would like to] believe, the author ultimately controls how content is displayed on a site. The author also reserves the right to present advertisements [hopefully, in a tasteful manner]. The argument for both sides of the fence is lengthy and one which this post does not address. What we will address is the use of simple HTML/CSS to designate advertisement elements. Areas of a page which do not collapse are disappear from view using rudimentary adblocking tools like Firefox’s Adblock extension.

Prevent the adblock "shift"

When users remove standard advertisement scripts from view, the ad element collapses moving surrounding elements. In order to control the layout of a page from shifting, I wrap the ad script with a div which I then apply a fixed width & height to using CSS. I also add a "title" to the div to let readers with adblocking enabled know what is missing.

1px bordered Adsense block

The corresponding HTML for a 468×60 text link Google Banner might look like:

<div id="adsense_468">
<p id="adtitle">Advertisement</p>
<center>...INSERT ADSENSE CODE...</center>
</div>

With a few lines of CSS, add a fixed width & height to the #adsense_468. Similar to the advertisement presentation for the Grid Focus, we’ll also add a 1px border and use position: absolute; to move the title to the top right corner.

#adsense_468 { width: 495px; height: 70px; border: 1px solid #BBB; padding-top: 5px; position: relative; }
#adsense_468 #adtitle { font-size: 11px; position: absolute; display: block; background: #FFF; padding:0 3px; top: -8px; right: 12px; }

The question now is, who out there is adblocking? Come clean! ;)

Take Care of your Hosting Issues

Worried that you are paying to much for your hosting? Get the best website hosting available. They can also take care of your domain registration needs, making it easier than ever to host a site without breaking the bank.

Discuss - 29 Comments

  1. harrisony says:

    I do block some ads since i am on 56k and it can drag sites down badly. some ads i dont mind but flash must die

  2. Vegas says:

    I recently was at a client looking at my site behing their firewall and the ads all had a “Not Perimitted” box over every ad. How disappointing this is and I wonder how common it is?

  3. Ernest says:

    [quote comment="48015"][quote comment="47010"]Adblock is client side. Not much anyone can do to prevent visitors from blocking advertisements using web browser plugins.[/quote]

    One…You (the user/client) can disable Adblocking for certain sites that you trust.

    Two.. As a site owner YOU can um force people to see the ads you serve by making them part of your regular content Buy Pepsi! as opposed to hosting them in www adspace bannerserver.com – There IS a bulletproof way, but I wont say it here since I hate ads![/quote]

    That method really sucks though. Nothings bulletproof, and you cant do alot to stop adverts. They gonna find you one way or another.

  4. j0be says:

    [quote comment="46691"]I wish I could set ad-blocking up for specific sites, but sadly I cant so the ad-blocker stays off for me. I like some websites ad’s such as 531, Subtraction, Phill Ryu, etc.[/quote]

    For everyone who was saying anything about liking certain ads… There is the ability to add exceptions to your filter.
    Example:

    type “@@http://*5thirtyone.com/*” into your filter for adblock, and it will allow everything to display on this site.

  5. j0be says:

    without the quotes of course.

  6. Derek says:

    Adblock does offer the option to whitelist pages or entire domains from a contextual menu. Right-click on the Adblock text in your status bar and choose one of the options. Works the same as your tip J0be with less typing.

  7. bmk says:

    I block every ad I can. If a page isn’t pretty, so what? If I want “pretty”, I’ll go to an art gallery. If a page isn’t readable because the “missing” ads make it unreadable, I chalk it up to poor web design and move on to a usable link.

    • Sami says:

      Well, I think every such user who block ads should not be allowed to view the website. I have developed a script for my own website that blocks access of any such visitor who is using an ad-blocker.

      I and almost all webmasters pay for hosting and bandwidth and its our right to earn something to keep providing the service free. If visitor don’t care for webmasters, then webmasters should also do the same!

  8. AJ Styles says:

    I guess I want to chime in with a controversial thought — should people block ads at all? Considering so much valuable web content is delivered “for free” by people who generate it, hoping to reap rewards from advertising. If more and more people block advertising and advertising revenue drops as a result, it’s possible content quality will decline.