Beginner's Guide to Using Responsive AdSense Ads

On
Page layouts of a websiteAs more and more websites are switching to responsive designs, a need to switch from fixed width advertisements to responsive ads is increasing as well. Fortunately, the most popular pay-per-click ad network Google AdSense supports responsive ads out-of-the-box which can be easily integrated within any responsive design. Today, we're going to look at some of the best approaches to nicely integrate these ads into our existing responsive layout. To use this tutorial, you need an approved AdSense account and of course a website with responsive design. I'll strongly advise you to first test the methodologies mentioned below with dummy containers on a staging site before applying these steps on a live website. If you have more flexible solutions for the same, do not hesitate the share them with us in the comments below.

Page layouts of a website Before we move ahead, I must stress that one must have a working knowledge of CSS, HTML, and responsive design concepts to take full advantage of the methods described below.

While using responsive ads, there are two basic approaches. The first one is relatively simpler but may not give you the best results while the second approach gives you more control over ad behavior giving your better returns. So what are these two approaches?

Platform controlled ad size - The simple approach involves dropping the default responsive ad code within the target container. Now, whenever the container size changes depending on the viewport, the size of the ad is decided by the platform that is serving the ad. In many situations, the ad doesn't fit nicely into the container.

Site owner controlled ad size and alignment - The second method, gives complete control over ad size and its alignment within the container. Naturally, this approach gives you best-fit approach for the target container in different conditions. This almost always gives you better returns than the former approach.

One of the common methodologies to integrate responsive ads is the use of custom JavaScript code for optimal ad behavior for different screen sizes. This methodology can be cumbersome at times and may accidentally involve change of default ad code. So, we're not going to use this approach and will keep the default ad generating code intact. So let's get started and see how we can integrate responsive AdSense ads within our responsive design in the best possible way.

Generating the Right Ad Code

While generating a responsive ad unit within your AdSense account, you'll get the default ad code with 'auto' feature that modifies the ad code automatically depending on the size of the parent container. Use the drop-down menu and quickly select the 'Advanced' mode for the code. This way, you will get a code snippet more or less matching with the sample code shown below.

<style type="text/css">
.dummy-ad { width: 320px; height: 100px; }
@media (min-width:500px) { .dummy-ad { width: 468px; height: 60px; } }
</style>
<ins class="adsbygoogle dummy-ad"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="1234"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
This advanced ad code can be broadly divided into two parts. The first part includes the CSS code to handle ad code behavior on screen size change. And the second part includes the primary ad code for displaying the advertisement.

Ad Behavior Case Study

Let's take a simple case study to clearly understand how a typical responsive advert may behave ideally within a responsive template. The example discussed below is just a generic example for demonstration purpose. In real situations, you may want your ad to behave differently than the way mentioned here.

3-column website window sketch The sample image shown above is a 3-column responsive template with two sidebars on both side and the main content column in the center. You can see, our responsive ad is left aligned wrapped by the post content and is right below the post title. So, following are our initial facts and figures.

  • Our template width is about 1300px.
  • As the screen size will reduce (around 1150px), left sidebar will go below the primary content column.
  • Further screen size reduction (around 960px) will eventually pull the right sidebar below making all columns below one another in a single section.
  • In single column mode, post content column will be on top, left sidebar below it and the right sidebar at the bottom.
  • In single column mode, ad will take the shape of center aligned horizontal banner instead of floating around.
Two column site template sketch Single column site template sketch As you can see, all three graphics shown above can give you a fair idea about the whole scenario. One can easily imagine that the width of all the 3 columns will change in different conditions. Since our responsive ad is inside the center column, let's pick it and analyze how its width will change as the screen size will reduce.

  • At the maximum screen size, 1300px or more, both middle column and right sidebar will have a fixed width while the left sidebar will shrink as we move towards a smaller screen size.
  • At 1150px as soon as the left sidebar will go down, middle column will expand to compensate the empty space on the left side of the screen. In other words, at this point, middle column width will increase by roughly 20% to 25%.
  • From here on, as we move forward towards a smaller screen size, right sidebar width will remain intact, while the middle column (now left column) width will start shrinking.
  • At 960px, as soon as the right sidebar will go down, then entire screen width will be available for the middle column and its width will expand by about 30% to 35%.
  • And from here on, as we move towards smaller screen sizes, the width will decrease seamlessly.
  • So, you can easily visualize that the middle column width will increase (1150px), decrease and then will again increase substantially (960px) before switching to single column mode.
Now, let's move on the real part of customizing our ad code to behave nicely in the situation visualized above.

Customizing Ad Behavior

Before we move ahead, let me share one of the essential CSS code snippets one must use to address a minor issue with responsive AdSense advertisements.

ins { 
    background: transparent;
    text-decoration: none;    
}
What about this CSS code and how does it help?

Well, sometimes a newly generated AdSense code (sometimes older ones too) fills the ad container with a light yellow color in a flash for a short period of time while the ad is being fetched from the server. The CSS snippet code shown above ensures such color flashes doesn't happen on your site while the ads are fetched from the server.

Second, important thing is how we handle <ins> tag. Unfortunately, in different browsers (including legacy web browsers), <ins> container can be a block level or an inline element depending on the type of parent container it resides in.

And now, let's tabulate some of the finer details before we dive into the code. As you may have noticed, the ad will initially float on the left side in desktop mode and later will be rendered as center aligned rectangular banner on small screens. So, to make that happen seamlessly, following things will be considered.

  • Two separate ad blocks will be used for this section. First one will be used for the floated ad and the second one will be used for center aligned horizontal banner.
  • We'll start from the large desktop screen and will move towards the smaller screen while adding custom CSS code.
  • We'll address the margin and padding issues throughout the process to ensure the ad fits nicely into the available space.
  • Ad container's (<ins>) block level status will be explicitly maintained in every condition.
So here are our two ad blocks in their initial state included right below the post title. Pay attention on the CSS code of both the ad units.

Horizontal Center Aligned Ad (initial state)
<style type="text/css">
.horizontal-banner { width: 320px; height: 100px; display: none !important; }
</style>
<ins class="adsbygoogle horizontal-banner"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="1234"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Left Aligned Floating Ad (initial state)
<style type="text/css">
.left-floating-ad { float: left; display: block !important; margin: 5px 10px 0 0; width: 336px; height: 280px; }
</style>
<ins class="adsbygoogle left-floating-ad"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="4321"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  • State #1 : In desktop mode (1300px or above), center aligned top horizontal banner is hidden (inactive) and is not visible at all while the left aligned floating ad will render as a large rectangular ad (336px x 280px) with appropriate margins on the right and bottom of the ad.
  • State #2 : At (1165px), left sidebar will go down and as mentioned before, our middle column will slightly expand. In this state, no code change is necessary since the middle column width is good enough to accommodate floating large rectangular ad.
  • State #3 : At (960px), right sidebar will go down and as visualized before our middle column will expand. Still no code change is necessary. Still our horizontal ad is in hidden (inactive) state and the floating ad on the left is still showing large rectangular ad. Now the design in single column mode.
  • State #4 : Around (600px), the content column width will reduce to such an extent that a large rectangle floating ad is no more looking nice with relatively thin strip of text on the right side wrapped around it. So, it's time to reduce the size of the ad to (300px x 250px).
  • State #5 : Around (550px), we will further reduce the size of our left aligned floating ad to (250px x 250px).
  • State #6 : And now comes the interesting part! Around (500px), we will first make the floating ad inactive and will trigger the center aligned horizontal banner below post title. At this stage, current floating ad (250px x 250px) will become inactive and a large horizontal mobile banner of size (320px x 100px) will become active. As the horizontal ad will become active, we will also center align it and will create bit of top and bottom margins so that it doesn't touch post text or post title.
  • State #7 : And last but not the least, around (400px), we will further reduce the size of center aligned horizontal banner to (234px x 60px). This arrangement will easily address the ad behavior issue for up to (320px) screen size.
So, here's the final code snippet for both the ads with up-to-date CSS code to ensure both the ads behave as mentioned above.

Horizontal Center Aligned Ad (complete code)
<style type="text/css">
.horizontal-banner { width: 320px; height: 100px; display: none !important; }
@media(max-width: 500px) { .horizontal-banner { display: block !important; margin: 0 auto 10px; } }
@media(max-width: 400px) { .horizontal-banner { width: 234px; height: 60px; } }
</style>
<ins class="adsbygoogle horizontal-banner"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="1234"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Left Aligned Floating Ad (complete code)

<style type="text/css">
.left-floating-ad { float: left; display: block !important; margin: 5px 10px 0 0; width: 336px; height: 280px; }
@media(max-width: 600px) { .left-floating-ad { width: 300px; height: 250px; } }
@media(max-width: 550px) { .left-floating-ad { width: 250px; height: 250px; } }
@media(max-width: 500px) { .left-floating-ad { display: none !important; } }
</style>
<ins class="adsbygoogle left-floating-ad"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="4321"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
You can clearly see, how we have added some media queries to address the ad behavior during screen size change. This sample code is just for demo purpose. While implementing this solution on a real site, you may need to fine-tune or tweak the values to match with your design and your preferences.

There are several possibilities of changing the ad behavior in the sample case study shown above. For example, when the page comes in single column mode at (960px), instead of continuing with large rectangular (336px x 280px) ad, we can disable it and can go ahead with (768px x 90px) large horizontal banner.

So, that's it, folks! I hope you can get a fair idea about how to integrate responsive AdSense ads in your design in an effective way. The methodology mentioned above uses no 3rd party scripts or plugins to get things done. If you have any questions, feel free to leave your comments below.