Google’s Mobile Friendly Website Update – Beat Mobilegeddon Now

Another update from Google? Well, that is not a new thing for Internet Marketers and Search Engine Optimizers. They have always been hit by google’s algorithm updates. Some were so fierce that they brought down many websites from thousands of daily visitors to ZERO. This one however, is believed to be less fierce than previous ones as it will effect only mobile search rankings.

I found it quite funny that updates with names of cute animals ruined businesses while this one, being given a horrifying name – Mobilegeddon – will only effect a part of your traffic. A big LOLz for it.

What will you learn in this post:

  1. Check if your site passes Google’s Mobile friendly update
  2. What is the basic Concept behind Mobile friendliness
  3. Different ways to make your site mobile friendly

This one is going to be a big read. You can download printable PDF of this post below.

Check If Your Website Is Mobile Friendly Or Not

The first thing to do to avoid being hit by this update is to test and analyze if your website is mobile friendly or not. To do this go to Google’s own Mobile friendly test page. Enter your url and analyze. If you get a message in green saying “Awesome! This page is mobile-friendly” you are good or else you’ve got to make your website responsive as soon as possible. Here is how my blog looks.

Mobile friendly website

 

You can also check responsiveness of a webpage by shrinking the width of browser window like this.

check mobile friendliness

Did you notice how the logo re-positioned itself, how the menu bar items absorbed into a single “MENU” button and how the side bar disappeared.

Running these test only analyzes the url inserted by you. To see if all the pages in your website are good with mobilegeddon update or not, sign in to your webmaster account. If you don’t use webmaster I suggest you sign up and see this video to add sites in it. Click on the site you want to analyze and from left sidebar go to Search Traffic >> Mobile Usability. This page shows you the number of pages that failed the test.

Google webmaster Mobile usability

You can click on the “Usability Errors” in lower section to see the urls of the pages that are returning those errors.

The report in this image is of IMNabeel and those two pages returning error are custom pages that I myself uploaded in blog’s directory. Since I am using a responsive theme, all the pages generated with this theme are responsive.

What is the basic concept behind mobile friendliness

Not all internet users use same screen sizes to surf web. Some use 15 inch monitors while others use 32 inch LCD/LED screens. Some use 4.5 inch smartphones while others use 10 inch tablet PCs. A website if not made with advance design techniques, will not appear properly on all of these screens.

Non-mobile friendly web pages ruin the usability by adding a horizontal scroll bar. Users have to scroll in four directions (up, down, right and left) to use the website. To make a website appear properly on all these screen sizes, responsive web design (RWD) is put to use.

The aim of responsive web designs is to provide optimal viewing experience across a wide range of display devices. Resizing, panning and scrolling is reduced for the end user.

How does Responsive Web Design (RWD) Work?

Working of RWD is easy to understand. In RWD we do not set the height and width of different website elements by defining number of pixels. We do it by defining the percentage of screen. For example if you use an image in a webpage and set its width and height to be 1000 pixels and 500 pixels respectively, the image will not appear properly on screens that are less wider than 1000 pixels. Here is an example:

non respoive

 

As you can see that the featured article image on bbc.co.uk is not responsive therefore Cameron’s picture is getting cut. If the width of this image was set in terms of percentage of screen, it would have become responsive. Here is how it appears in the single post page. The image auto re-sized after I shrinked the width of browser window, which means it is responsive there.

fluid image

 

This was only one example but I hope you have understood the basic concept behind responsiveness. There are several ways of how you can easily convert your non-mobile friendly website to a mobile friendly website.

Beating Mobilegeddon

No matter what updates does google launch, Internet Marketers always find a way to get over it. If your website has been penalized by this update you can get it right by making your website responsive. Here I will be discussing about how you can make a wordpress site a mobile friendly website.

Change Your Website’s Theme

As most of the websites now a days are made on wordpress, the easiest and the best option for making it responsive is to replace your non responsive theme with a good responsive theme. This option saves you one heck of a job. You can get some good mobile friendly themes Here. Just search for the word responsive or get this top seller responsive theme.

With a responsive theme you don’t need to worry about any coding at all. You just have to install and activate it and it takes care of responsiveness.

Install A Plugin

Another way of doing so is to install a plugin that will keep your desktop theme intact but display a different mobile friendly version of your website to mobile users. Here are a few plugins that can do the task for you.

JetPack: It really is what it is called. Along with dozen other features it comes with “Mobile Theme” option with help of which you can easily optimize your desktop site for mobile screens.

WPTouch: It is also a decent solution to the problem. It detects mobile visitors and displays a different version of your site that is compatible with mobile phones.

You can also try these plugins to do the job:

All these themes are free to use and some have paid versions with additional functionalities too.

Using Media Queries

What if you dont have a wordpress based site? If you are using any other platform you can always find responsive themes or some plugins to take care of the thing but if your website is static or HTML based you will have to use media queries for that.

Media queries detect width of the screen and displays content accordingly. For example if I don’t want to display sidebar for devices less than 480 pixels wide, I can write a few lines of code for that. I just have to find out what is the sidebar being called in the CSS of my blog. If my sidebar is being called #leftnav, the code goes like this:

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

#leftnav { display: none;}

}

This piece of code removes sidebar if my website is visited from a screen less than 480 pixels wide. Same code can be used with any element just by changing “#leftnav” to relevant id selectors.

Using media queries can be a bit hectic and require more time and research. To learn more about media queries see this article.

Hire A Freelancer

If any of the above mentioned techniques are not working for you, you can always hire somebody to do it for you. You can find experienced web developers and designers on freelancing sites like Freelancer, Odesk, Elance etc. Post a project and wait for the bids to come in. You will be able to see profiles, portfolios and customer feedbacks of all those who place a bid. Find someone reasonable and award the project.

Even though the update will have its impact on mobile search results, it can’t be ignored. According to ComScore insights number of mobile users have long ago surpassed number of computer users and similarly the trend of mobile browsing is also increasing rapidly.

mobile traffic stats 2015
Source

I will be more than glad to answer queries. If we have more solutions for this mobile friendly website update, please share through comments.

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *