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>

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. Glenn Wolsey says:

    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.

  2. Ralph Dagza says:

    I don’t use adblock unless you have one of those
    “shoot the monkey” flash ads

  3. Michael says:

    \o_ .o(“I do”)

  4. Andre says:

    Nope, no adblock here. I hate just seeing chunks of webpages missing.

  5. Jack says:

    I agree with Andre- adblocking makes some pages look funny with chunks missing. So, why enforce one?

    Even if there is no shifting going on, there is now a big block of empty space!

  6. Auke says:

    No adblocking here as well. Sometimes, and that really not often, some ads can be usefull even.

  7. Ronald Heft says:

    I don’t adblock due to pages looking weird. I’ve tried it in the past and found the missing gaps more annoying than the ads.

  8. Richard Neal says:

    I use OmniWeb’s built-in adblocker, and everything looks fine, it just covers up the ad, rather than messing up the page.

  9. Jack says:

    You’ve inspired me to finally add ad’s to my site (in an unobtrusive way, of course)!

  10. Making contextual ads actually look nice has to be the holy grail of any business-savvy designer. 🙂 Since someone has to ask, can I be so intrusive to ask what is your CTR by any chance, Derek? I’m quite interested…

  11. jon deal says:

    No adblocking here, either. They don’t usually bother me. Unless they blink, make noise or obscure the content; then I vote with my “feet” and don’t visit again.

    And I clicked on one of your google ads for good measure. :-]

  12. Jordan says:

    I adblock like it’s nobodies business.

  13. Myles says:

    I adblock. Ads suck no matter how they’re presented. They’re annoying & they’re everywhere. Why would I want to see them on your site compared to Yahoo’s site? They’re just as annoying regardless of where they’re at, what site they’re on, or how they’re presented.

    Don’t take it personally.

  14. kus says:

    is there a way to kicking out adblock?

  15. Derek says:

    Adblock is client side. Not much anyone can do to prevent visitors from blocking advertisements using web browser plugins.

  16. Myles says:

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

  17. Derek says:

    Thank God indeed. The day websites can control what we do through our browsers is the end of it all. I even hate when Javascript resizes my browser window.

  18. […] has found a great way to improve the looks of your Google Adsense ads. Related […]

  19. […] Now, I am not going to just rehash what Derek explains in his post – it’s his idea and you will need to head over to his post about it to find out how he did it. Check it out because it is definitely a useful technique. Derek’s Post » […]

  20. steve says:

    [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 – There IS a bulletproof way, but I wont say it here since I hate ads!