Making Your Website’s Adsense Responsive on Diverse Platforms

The one thing that would definitely give any webmaster a cause for pause would be the mobile responsiveness of their website. The world, as we know it, is increasingly leaning towards the mobile way of handling the daily drill and when it comes to accessing the Internet, the trend gets trendier.

The websites need to be designed in a manner that they can adjust to the varying devices and screen sizes so that the accessibility and visibility of businesses is enhanced on the web. To quip that your website should be responsive on every single OS platform out there would amount to stretching the truth, but the fact that it should work in unison with the most popular ones can’t be overstated.

Building “made for mobile” Websites is the First Serious Articulation of Web Designer’s Efforts

The days are past when websites were created for desktops and then, a smaller, watered-down version was launched for the website to be accessed on mobile devices by seemingly a smaller section of visitors. As we enter the mobile age, it has become imperative to create made-for-mobile websites that look equally good on desktops. Now, whether you wish to boggle the minds of your website’s visitors by visually astonishing websites or simply aim for a reasonably good user-experience, the underlying effort should be on ensuring responsiveness.

On the road to creating mobile-ready websites, the trends are likely to fluctuate further and there will be an inherent realization that you are widely off the mark when in order to adapt your site to multiple platforms, you were creating multiple versions for it. A responsive web design, thus, not only opens your online business to a wider breadth of audience, but also goes a long way in reducing your efforts.

The Audience’s Expectations and Your Efforts Must Coalesce at Some Point in Time

And that time is now! By the start of 2014, eCommerce figures had already hit the $400 billion mark and the investment of brands on mobile ads has been also touched the $10 billion mark over the period of last one year. According to the Global Mobile Media Consumption report, close to 60 percent of the Internet access is mobile, and this figure is alone worth the price of admission.

When do Your Consumers (and You) Access Internet

Glide over your audience, when do you and the friends/family/colleagues access the Internet:

• Killing time at a restaurant while the order takes an age to be delivered
• ‘Watching’ TV with family when there is another one those worthless soaps running
• Accessing Facebook in office when it’s blocked on the office network

And there are more such examples where you are with your freewheeling device, chatting with your friends, shopping from an online store, checking mails, and more.

Adsense and the Need for Responsive Ad Units

And then there is this. Adsense is unarguably the de facto tool for monetizing your blog and making it earn maximum revenue for your website. Now I won’t go about doling out sermon on what makes adsense so singularly best and makes it a better choice than other ad networks, but for what it’s worth’ responsive ads have become the order of the day.

Again, as a webmaster, you are losing out on massive revenue opportunities if the ads on your website are not visible to your mobile viewers.

• Creating Responsive Ad Units

1. Log in to your Google Adsense account
2. Navigate further by clicking ‘My Ads’
3. ‘New ad unit’ is where you ned to go to for creating a new unit and give it a personalized name
4. When you click on the ‘Ad size’ you will see a dropdown menu where you need to select ‘Responsive ad unit’
5. You know the drill then – chosing the type and style of the ad. Get the code..
6. The pop up you get has a menu item were the default is set to ‘Smart Sizing (Recommended)’

And thus you have created the much-desired responsive ad unit. And then, it has to be followed by:

Updating your WP theme with the responsive code

Of course, you should be able to find your way around editing the CSS and FTP settings for the same

1. Finalize any ad-size of your choice
2. Access the CSS file of the WP theme you are running and in there, append the following code after the @media declaration.

.adslot_1 {
width: 640px;
height: 300px;
}

You can custom change the size.

3. Then, you can find one more @media declaration that will be for the mobile devices:

@media only screen and (max-width: 480px)

Add at the bottom the same code with different sizes:

.adslot_1 {
width: 270px;
height: 270px;
}

7. The files has then to be saved and uploaded on your account

Displaying the Ad Through Widgets

• Log in to your website’s dashboard.
• Go the the widget area.
• Drag the Text Area widget to the sidebar and paste the code you have with you
• Paste the same code at the header section of your website.

If going through the above steps seems to be a prospect a tad too unwieldy, there is a host of WordPress plugins to make life easier:

Google AdSense Plugin

The plugin makes things abundantly clear right from the get go. Appropriately named,. It allows you to integrate adsense to your website without any fuss. The customization capability it hands you over with is unrivaled.

Easy Adsense

As the name suggests, this is another plugin that helps you seamlessly set up the ad units on your site and in a manner you deem most perfect.

Adsense Widget

Be it deciding on the size of the ads or their the color or simply hide them for users or admins, you can take your pick with the Adsense Widget.

While affiliate marketing keeps on making waves on the web realm, adsense is pitched perfectly to lead the charge when it comes to monetization of blog. Get everything you need in order and big bucks are there for the taking.

 

Author Bio – Mike Swan is an experienced HTML to WordPress service provider, and a web designer. He loves to share his thoughts on web design and web development trends.