Design your sites for AdBlock!
Posted February 5, 2010 by Nick Vogt in Web and Internet
A lot of people use ad blockers these days. They are generally the most popular plug-ins for browsers, and most come with comprehensive blacklists that will block most ads on the Internet right from the get-go. As a web designer and developer, there isn't much you can do about it. I myself use AdBlocker Plus for Firefox, and I'm not about to complain when other people use it to block my own website ads.
But what does bug me is how some websites can end up looking a little awkward with the ads blocked. DIVs and other elements will not be positioned properly, or may overlap. This is because web design/developers design with the ads in mind and generally don't care what the site looks like with the ads blocked. Whether this is an ethical complaint or not is meaningless, my point is that you should design your site so that it still looks good even with blocked ads. One way to do this is to use JavaScript to detect when ads have been blocked, and then adjust/remove certain elements accordingly.
A good example of this JavaScript technique is used on this website. At the time of this writing, there is a Google Text ad displayed in the upper right of the site with the text "H3XED Billboard" written above it in the header. When testing my site on various browsers, including the one with AdBlock Plus, I found that it looked goofy with the ad gone and just a header. To fix this I simply used a little JavaScript. So now if you try this site on a browser with an ad blocker and one without, you should notice that the "H3XED Billboard" header goes away along with the ad. (Update - My site no longer has advertisements)
This is an easy trick using the JavaScript offsetHeight attribute. Simply enclose your ad (just the ad itself) in a DIV with a distinctive id (I used "container"). Then give a distinctive id to any other elements you want to remove if the ad is blocked. Here is the code used on this site:
Now to determine if the ad has been blocked, we simply check the offsetHeight of the container DIV. If it's sufficiently small (I used 50 pixels in this example, to take into account the BR tag), it uses CSS to set the display value of both the ad DIV and the header to "none":
Be sure to put that JavaScript code somewhere after the ad container and any other elements you're removing/altering. JavaScript is not server-side code so it executes during the normal flow of the HTML. For it to alter any elements, those elements have to be loaded first.
But what does bug me is how some websites can end up looking a little awkward with the ads blocked. DIVs and other elements will not be positioned properly, or may overlap. This is because web design/developers design with the ads in mind and generally don't care what the site looks like with the ads blocked. Whether this is an ethical complaint or not is meaningless, my point is that you should design your site so that it still looks good even with blocked ads. One way to do this is to use JavaScript to detect when ads have been blocked, and then adjust/remove certain elements accordingly.
A good example of this JavaScript technique is used on this website. At the time of this writing, there is a Google Text ad displayed in the upper right of the site with the text "H3XED Billboard" written above it in the header. When testing my site on various browsers, including the one with AdBlock Plus, I found that it looked goofy with the ad gone and just a header. To fix this I simply used a little JavaScript. So now if you try this site on a browser with an ad blocker and one without, you should notice that the "H3XED Billboard" header goes away along with the ad. (Update - My site no longer has advertisements)
This is an easy trick using the JavaScript offsetHeight attribute. Simply enclose your ad (just the ad itself) in a DIV with a distinctive id (I used "container"). Then give a distinctive id to any other elements you want to remove if the ad is blocked. Here is the code used on this site:
<h3 id="billboard">H3XED Billboard</h3>
<div id="container">
AD GOES HERE
<br>
</div>
<div id="container">
AD GOES HERE
<br>
</div>
Now to determine if the ad has been blocked, we simply check the offsetHeight of the container DIV. If it's sufficiently small (I used 50 pixels in this example, to take into account the BR tag), it uses CSS to set the display value of both the ad DIV and the header to "none":
<script type="text/javascript">
if(document.getElementById('container').offsetHeight <= 50)
{
document.getElementById('billboard').style.display = 'none';
document.getElementById('container').style.display = 'none';
}
</script>
if(document.getElementById('container').offsetHeight <= 50)
{
document.getElementById('billboard').style.display = 'none';
document.getElementById('container').style.display = 'none';
}
</script>
Be sure to put that JavaScript code somewhere after the ad container and any other elements you're removing/altering. JavaScript is not server-side code so it executes during the normal flow of the HTML. For it to alter any elements, those elements have to be loaded first.
| Tags | html javascript |
|---|