Is Your Website Mobile Friendly?

Mobile Friendly Web Design

On April 21st 2015, Google released a new mobile friendly ranking algorithm, favouring mobile friendly web pages in the search results.

They basically said if your website wasn’t mobile friendly you should expect to see a decrease in search engine rankings.

According to comScore, mobile has surpassed desktop internet traffic, making it both the present and the future.

Mobile vs Desktop Traffic
Mobile users now expect an internet experience optimised for their mobile devices:

46% of consumers said they wouldn’t return to a website if it hadn’t loaded properly on their mobile device the first time.

You may have noticed that text labels have been added to snippets in mobile search results, alerting users to whether the web page has been developed for mobile device.

Mobile snippet search results

It’s likely that more and more users will start noticing this, resulting in the click through rate (CTR) of web pages that do not display the tag to decrease.

How do I Check my website is mobile friendly?

Head over to Google’s Mobile-Friendly Test Tool and enter your page URL:

Google Mobile Friendly Test

Unfortunately, aside from the hints on the left, if your site returns a “no” you really don’t get that much feedback.

I mean it’s brilliant WilliCreative got a YES, (which we kind of knew already) but are there any areas for improvement?

Thankfully behind the test is further helpful data, which can be found via the mobile-friendly checker Chrome extension or by entering the URL manually via the bulk mobile friendly checker urlitor

Further Responsive Test

As you can see from the screenshot, Google considers 5 rules that impact whether a website is mobile friendly:

1) Viewport Configuration

Problems occur when you do not specify a viewport meta tag or specify a viewport that fails to adapt to different screen sizes.

Google recommends the following:

<meta name=viewport content =”width=device-width, initial-scale=1″>

In layman’s terms the above is simply telling the browser to make the width of the page the same as the screen size and as wide as it can be within that screen, in the event a user turns their phone sideways.

2) Font legibility

Problems occur when text on a web page is too small for users to read.

3) Use of incompatible plugins

Problems occur when plugins that most mobile browsers don’t support like Silverlight or Flash are used.

4) Content to Viewport

Problems occur when the web page fails to fit horizontally within the viewport size.

5) Size and Proximity of Links

Problems occur when form fields, links and buttons are either too close together or too small for a user to easily tap on a touch screen device.

If you wish to dig further I suggest using Google Search Consoles usability report. It will provide you information on crawl errors under the smartphone option:

Search Console

It will also allow you to compare mobile and smartphone traffic and search engine rankings. Lower mobile rankings may indicate you have a problem.

Search Console Smartphone

 

Mobile SEO

What if my website isn’t mobile friendly?

1) Create a mobile version of your current website.

You can do this quickly and easily by using a conversion platform like duda or bMobilized.

Duda Mobile

It’s a cost effective solution for those on a limited budget, however it’s important to understand you will be creating a second site, which means you will have to update two sites rather than one. This will increase workload and possibly infuriate users if their is less content available on the mobile version of your website

2) Use a plugin

If your website has been developed on a content management system (CMS), there are several plugins available that provide solutions to making your website mobile friendly.

WordPress:

WPtouch

WP Touch

 

Using extensions to help render content for mobile devices, WP-touch is used on over 5.5 million WordPress blogs.

JetPack

Jetpack plugin

JetPack provides a secondary option via it’s “Mobile Theme”, which can be used for the optimization of a WordPress site for mobile devices.

Joomla:

JoomlaShine

JoomlaShine provides a simple option to make your website responsive if you are running the Joomla platform.

Drupal:

ThemeKey and MobileTheme are modules available on the Drupal platform. They detect whether your website is being visited via a mobile device and take action by switching to a mobile friendly theme.

3) Redesign The Website

Responsive design ensures the same code for the website works across multiple screen resolutions.

No matter the size of the device – tablet or smartphone, you have a site that is relatively consistent across the board.

Holmes Place Cafe Responsive Web Design

If your website is running on a CMS, an option would be to simply change to a responsive theme. Although this sounds like a simple and quick fix, it may cause changes to your website, particularly within widget areas.

Using a plugin like Theme Test Drive, will allow you to view the changes before making a decision.

If you have the budget, employing the services of a web designer could be the best option. Maybe it’s time for a change and the design and development of a brand new site would compliment the growth and success your business is currently receiving?

I’ve heard WilliCreative are excellent and very reasonable :)

If you require further information, those friendly people at Google have put together a comprehensive guide on how to make your website mobile friendly.

Comments, questions below.

James Brands specialises in the development of websites and applications at WilliCreative. He is also a proven SEO expert using the latest techniques to increase the visibility of both local and national client sites.

Leave a Reply

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