Tag Archive Responsive Web Design

ByApex Digital Media

Google Announces "Mobile-Friendly" Labels for Mobile SERP

ApexDigitalMedia.com is Mobile Friendly.Today the Apex team was enjoying Pizza at an undisclosed location in Agoura Hills.  As we were waiting for them to heat up our slices we all began to flip through our phones for some temporary amusement. One of our brighter team members decided to check how we are currently ranking in organic search for our business name… “Apex Digital Media.”

We were shocked and surprised to notice a small but new demarcation on Google’s Mobile SERP next to our listing that read “Mobile-Friendly.” It was something we’d never seen before and a quick search produced the recent announcement that indeed… Google has updated mobile SERP’s to let users know whether or not a site is mobile friendly. Fear not webmasters, they have clearly defined the criteria for what will earn you this tag. It is as follows:

GOOGLE: This change will be rolling out globally over the next few weeks. A page is eligible for the “mobile-friendly” label if it meets the following criteria as detected by Googlebot:
  • Avoids software that is not common on mobile devices, like Flash
  • Uses text that is readable without zooming
  • Sizes content to the screen so users don’t have to scroll horizontally or zoom
  • Places links far enough apart so that the correct one can be easily tapped

This also fits with Google’s core mission which is providing relevant results and a great user experience. They even created a test site to help you with mobile optimization.

ByApex Digital Media

Responsive Web Design for Google AdSense

One of the biggest factors in web design in 2014 and beyond is making sure that your site is responsive. For those of you unaware of what this term means, here it is: Responsive web design makes sure that your site appears as clean and professional looking as possible across all types of hardware devices. From desktop computers to tablets and mobile devices, web users today can come from anywhere. With that in mind, you want to make sure your business is thinking about their experience across all devices.

As we put together this blog for Apex Digital Media we kept this in mind. Our site needs to look great on all devices but we also want to make sure that we’re running AdSense and learning in real time from our own implementation of the product. In installing the leaderboard ads (728×90) We noticed to our dismay that on mobile devices this ad format was not adjusting for the screen size. In fact, the 728×90 ad was forcing the page out and making our site look terrible and broken on iPhone and Android devices. We needed to consider responsive web design for Google AdSense.

To solve the problem, the first thing we tried was responsively resizing the ads via CSS based on the size of a users screen. This did not work, probably because due to best practices Google does not want this ad format resized for a mobile device because it subtracts value for their advertisers. With that in mind we really wanted to keep this format on desktop and tablet versions of the site because the implementation was clean and professional looking. So we were stuck at a crossroads…

"There's Always a Way if You're Committed" - Tony Robbins

We wanted the best of both worlds… a clean mobile experience but the ability to monetize the blog with the 728×90 leaderboard ad format. We decided it would be worthwhile to just remove this format altogether for the sake of our user experience. Sometimes when you want cake you have to compromise.

If you’re reading this post on a mobile device you can probably see that the 728×90 format is not there and the site template is clean and professional. It does still contain ads though. The 300×250 format tends to work well with mobile templates so we are still able to monetize mobile traffic while maintaining a user experience that is in line with our standards and with general best practices.

How did we do it you ask? This is one area where we’re happy to share our knowledge as it will make the mobile web a better place for all… (it’s also readily available to anyone with a black belt in Google-Fu).

Google Makes Responsive Web Design for Google AdSense Easy

To start, you need to generate a piece of AdSense code for your site.  (If you don’t know how to do that yet you may want to start here.) Once you have your personalized AdSense code on your website you’ll want to surf over to this link – and scroll down to the header “Hiding an ad unit” and expand it. It will show you some sample code, copy and paste everything between the “style” tags.

Google AdSense - Hide Ads on Mobile CSS

Here’s a screen shot of the code.

Next you will want to amend your AdSense code slightly by adding the class of the style inside the ins class: “adsbygoogle” so it looks like this “adsbygoogle adslot_1”.

Finally – and this is the hangup we ran into, you MUST be sure to remove the style declaration in your personalized code. (refer to the screen shot below where it is circled in red).

AdSense Responsive Remove Code

Remove the above line of code so it doesn’t override your adjustments.

Once you have set up the style, inserted the call and removed the original style declaration from your AdSense code you can save it and it should completely remove that ad slot from any devices with a screen width of less than 400 pixels. If you’re really advanced you can also tweak the code to make that width larger or smaller.

You’re welcome.