Handling Ads in Responsive Webpage Design

I recently had to rework a wordpress site to use a responsive layout specifically addressing responsive advertising. The original CSS designers were using @media tags to hide content as the window size changes which is quite standard and effective.

So for example in the following code as the screen drops down to a mobile size it hides the div content of the header which also happens to contain the 728×90 like so;

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.header
{
display:none !important;
}

This works great but the huge flaw in doing this is we are now hiding ads but still calling them which is a terms of service violation for the ad networks. You can not hide an advertisment from the screen you actually need to make sure the ad is not called at all.

I have seen a lot of ways that people have done it using Jquery or even wordpress plugins but candidly I found them all far to complex for my needs. Instead I am using a simple javascript snippet to detect the screen size and display the ads only if it is appropriate.

So if you load the site on a mobile device NO ADS are loaded but if you load it on desktop or an IPad advertising is loaded. The bare bones concept of how I did this is I have a DIV on the page which is empty like so;

<div id="topad"></div>

Using Javascript I am now checking the width of the users device and injecting the ad so long as the screen is wide enough to support it and if not I am not hiding the advertisement it is simply not loaded.

$(document).ready(function ()
{

	   if ($(window).width() > 480)
	 {
		 if (document.getElementById("topad"))
		 {
         document.getElementById("topsdah").innerHTML = 'injected ad tag';
		 }

Worth noting this code is a basic example and I have built on the concept significantly but if you are looking for a basic concept on how to do responsive ads this works quite well from my experience without the need for JQUERY or anything else fancy.