Responsive Ads with Google AdSense

Responsive websites using CSS3 media queries are getting more popular every day. The convenience of a single design that adapts to virtually any device makes responsive design a very practical approach. In responsive design, images are usually scaled by using percentage widths in CSS. However, AdSense ads won't work the same way.

Probably a second impulse when implementing responsive ads is using display:none to hide wide ads in small viewports. However, using display:none on AdSense ads is explicitly prohibited by Google in their Ad Implementation Policies. There are just three alternatives for responsive websites:

AdSense Smart Sizing Responsive Ads

Google offers a responsive ad code they call Smart Sizing, which inserts the best-fitting ad automatically. According to Google's About responsive ad units:

We calculate the required size dynamically based on the width of the ad unit’s parent container, then determine what's the best standard height to go with that width.

Visit our demo to see Smart Sizing responsive ads in action:

DEMO

To create a new responsive ad unit go to the new ad unit page as usually and select "Responsive add unit(BETA)" from the Ad Size dropdown. When you get the code, pay attention to the "Mode" dropdown, which gives you two options: "Smart Sizing" and "Advanced". Advanced Mode gives just a code with inserted media queries, which should be changed manually as explained above.

AdSense Responsive Ads

The Smart Sizing ads are the best responsive ads Adsense has. An Smart Sizing ad unit may serve ads of different aspect ratios. The same unit may serve, for example, the 728x90 in large viewports and the 200x200 ad in small ones. The page has to be reloaded for the ad size to change. There is currently no official way of changing ad sizes on resize. Because of the way AdSense works and the fact that the same ad may not be available in different sizes, that would mean a request for a different ad every time the window is resized. The Smart Sizing ads do request a new ad when the user rotates a mobile device.

Smart Sizing does roughly the same as the now outdated Javascript code for responsive ads. The JS approach has the advantage of allowing to set up the break points and ads served. However this Javascript code is not one of the Acceptable Modifications listed by Google.

When implementing AdSense responsive ads in Smart Sizing (default) mode, there are is one important consideration regarding floated content. The script uses the width of the parent container to determine the ad's width and height. Be sure not to insert the ad alongside floated contents (eg. a sidebar), in the same div. This would cause the ads to be served too wide, covering your floated content. If you have floated content, place the ad in its own container and give it an explicit width, offseting for the floated content's width.

Responsive ads with CSS3 media queries

Google allows using media queries to resize your ads to the available sizes, as expressed in Modification of the AdSense ad code. This alternative gives much more control over the ad sizes served. If you don't like the ad sizes being served by the Smart Sizing code, setting them up yourself might be worth considering. When using media queries the ad sizes change on page reload and not on resize, just like with the Smart Sizing code. The example code in the AdSense docs resizes ads of the same aspect ratio. This doesn't mean it's not possible to render any standard size using media queries. For example:

.responsive { width: 200px; height: 200px; }
@media(min-width: 320px) { .responsive { width: 300px; height: 250px; } }
@media(min-width: 500px) { .responsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive { width: 728px; height: 90px; } }

Visit our demo to see the above code implemented:

DEMO

The only drawback of using media queries is that the breakpoints are set relative to the viewport size, and not the containing element. When inserting your ads, measure the width of the container for your breakpoints and then decide on the best ad size. Look for the standard sizes in the AdSense dashboard.

Or ... narrow ads

My preferred choice when inserting ads into a responsive design is to simply use narrow ad units. The recommended 300x250 Medium Rectangle should be narrow enough for most modern devices. It is also one of the best performing ad units, if not the best.

Using a fixed-width ad in a responsive design means that if you place it in the sidebar, the whole sidebar should be fixed-width or have a min-width:300px rule to keep the ads from overflowing. Many responsive themes, WordPress Twenty Thirteen for example, have 300px sidebars, which are sort of standard. Keep this in mind when creating or chosing a responsive template.

When placing ads in-content, there is usually enough room for the 300x250px ad unit. Just unfloat and center it in narrow viewports to prevent it from crushing your content. However, I understand the 300x250px unit might not fit some designs, where media queries or Smart Sizing code are the way to go.

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>