Quick fixes to make your website mobile-friendly

Introduction

April 2015 saw the internet go into a virtual frenzy as website owners, developers and SEOs scrambled to make their websites mobile-friendly before Google launched their new ranking algorithm, melodramatically nicknamed mobilegeddon or mobilepocalypse.

At the time of writing it’s safe to say that mobilegeddon’s impact has been pretty lacklustre and all but limited to the addition of a new label next to mobile search results.

That’s not to say however that there isn’t more to come, we are after all at the mercy of Google and its algorithm changes. It has been hinted that mobile-friendly criteria may become a ranking signal in the future.

A check of a page URL in Google’s own mobile-friendly testing tool quickly gives you Google’s verdict and some suggestions on what to do next, if anything.

The decision to provide mobile visitors with a great browsing experience may have been on your mind for a while but you’ve lacked the resources or budget to develop the best solution possible. Now with mobilegeddon you’ve been forced into a corner and need to get something done quickly and you will think about the consequences later.

So what does Google’s mobile-friendly test look for?

Google breaks the test down to five rules, with a score awarded for each:

1. Viewport Configuration

   Setting a viewport within a page allows the browser to control the page’s width and scaling across different devices.
2. Font Legibility

   Used alongside the viewport, font sizes can be scaled according to the device viewing the page.  By specifying a base font size, other styles can use relative styles to define the typographic scale.
3. Avoid Plugins
   Plugins such as Flash, Java and Silverlight have mixed support and user experience on mobile devices so should be avoided in favour of native web technologies (e.g. HTML5).
4. Size Content to Viewport
   Ensure content fits within the device’s horizontal limits to prevent users from having to scroll both vertically and horizontally to view content.  Use fluid widths for content and container elements instead of absolute widths.
5. Size and Proximity of Links
   Small links or buttons are more difficult for users to access on a touchscreen so ensure targets are larger and sufficiently spaced from other targets.

In addition to the mobile-friendly test, you should also utilise Google’s PageSpeed Insights to try and optimise your website’s loading times and user experience.

Some background information…

With the rise of smartphone and tablet usage, website owners were finding that their designed-for-desktop website wasn’t providing their visitors with the best user experience.  It wasn’t uncommon to find websites designed for a specific screen size/browser width.

To combat this, up until only a few years ago, having a separate mobile website was the norm with companies such as Microsoft, Amazon and even Google sporting an “m-dot” website, distinct from their primary domain.  Many still do prefer to go down the separate mobile route – and there are several pros and cons for each method.

Then along came CSS3 and media queries.  Now web designers and developers suddenly could create pages which were able to test the device the page was being viewed on – and adjust the layout of the design accordingly.

Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
Source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

The terms adaptive and responsive web design were coined to describe how the layout of a page can literally adapt or respond to the device it’s being viewed on.   I won’t go into the differences here as that subject would be enough to fill several blog posts alone.

To many it now made more sense to have one website with one set of content, which could adapt, respond or re-flow to the device, rather than a separate website with the associated costs of maintenance.

OK, let’s do this

Disclaimer

These fixes are really only intended as a stop-gap solution whilst you work behind the scenes on that robust, fully-fledged responsive masterpiece of a website.

Any decisions you make should consider the needs of your business and site visitors. Introducing any of these changes may also have an effect on other aspects of your SEO strategy.

Please consult with a qualified SEO before making any changes on your live website.

Assumptions

• You have an existing website
• You want to make minimal changes to the website’s HTML and CSS

With that in mind, you have a few options:

Change your website’s theme

Depending on your choice of Content Management System (or CMS – assuming you’re using one in the first place) you’ll hopefully have the ability to change the design of the website by replacing the theme or template to one that already supports responsive design techniques.

If for example you use WordPress then you should be in luck.  The theme can be changed with only a few clicks and instantly your site has a fresh design and should now be mobile-friendly.  High five!

Depending on how the existing site has been designed you may find that some content doesn’t automatically appear in the new theme so you might have to do some manual work to recreate pages, widgets or other content.

Pros
Ability to change the design instantly
Several thousand themes available (some free)

Cons
Not all previous content may be visible on the new site without additional work.
Out of the box, the new design is unlikely to fit in with your site brand.

Create a separate mobile-specific website

Possibly seen by some as admitting defeat, creating a separate mobile-friendly website is likely to be the most cost-effective solution over the short term for many websites that don’t have access to a CMS or where changing the design isn’t straightforward.

IMDB’s desktop and mobile-specific websites

Website converter services such as bMobilized and Mobisitegalore will do all the hard work for you are out there but these may come with an additional cost.  I’m going to assume you’re time rich and cash poor so let’s roll up our sleeves and do this the manual way.

For many sites, the steps for creating a mobile site are:

1. Creation of an “m.” mobile subdomain, e.g. “http://m.zazzlemedia.co.uk”.  
Depending on your hosting solution, this is usually a quick process via a control panel such as cPanel or Plesk, or by making changes directly on a server like Apache or Microsoft’s IIS.  You may also have a few hours wait whilst any DNS changes take effect.
2. Design and build new mobile-specific pages.  
   Remember we’re in a rush so in an ideal world the mobile site would be considered and designed according to the needs of your business and visitors but we want a quick fix.  So keep the design simple and focus on your great content.  When you’re done, upload the pages to your mobile subdomain.
3. Redirect mobile traffic to your new mobile-specific site.  
   Ideally this redirect will take place on the server, setting the appropriate HTTP response headers (e.g. 301, 302, etc).  But in the spirit of quick and dirty solutions we’re going to resort to a JavaScript solution instead with https://github.com/sebarmeli/JS-Redirection-Mobile-Site.
 Follow the installation instructions and examples on the repository’s page.
4. Test.  Fire up your mobile device and head to your desktop site.  You should be automatically whisked away to you new mobile site.

An additional step would be to make Googlebot aware of your website’s mobile pages using annotations:

1. On the desktop version of a page, add a link rel=”alternate” tag pointing to the corresponding mobile page URL.
2. On the mobile page, add a link rel=”canonical” tag pointing back to the corresponding desktop URL.

More information on this can be found at https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/separate-urls

Pros
Does not affect design of “main” website.
Can optimise content and tone for mobile devices

Cons
Possible SEO issues with duplicate content
Need to maintain content across two websites

Use JavaScript

Time to roll the sleeves up and get coding for this one.  I know I said I will assume you want to make minimal code changes but depending on your technical ability, the JavaScript option might be of interest.

Using the free Restive.JS plugin, you can add platform, form-factor or orientation-specific support to your website without having to work through CSS Media Queries and their breakpoints.  Instead, Restive.JS adds new style classes to your HTML and allows you to create CSS that specifically targets these classes.

Confused?  I’ll try and explain.

Assume you have a sidebar on your page that is styled by the following CSS rule:

#sidebar {background-color: #666666; width:320px;}

But on mobile devices such as smartphones and tablets you want to hide the sidebar, you can add CSS to do just that:

.mobi.tablet #sidebar{display:none}

So why wouldn’t I just use a Media Query for this? I hear you ask. There’s nothing wrong with Media Queries however as we’re against the clock, do you really have time to test your style changes based on a browser width?

Restive.JS takes care of the time consuming part and leaves you to style your website as necessary to pass Google’s test.

Pros

Install and setup in just a few lines of code.
Target your CSS based on device rather than breakpoints alone.
Can be enhanced with breakpoints for finer adjustments when time permits
A set-and-forget solution

Cons
Relies on JavaScript, which may not be available to all website visitors
Requires jQuery, which may not be available on your website

Conclusion

Whilst it’s easy to think of validating against a mobile-friendly test as just ticking a box, these improvements to your website can have a positive effect on the experience your website visitors have, leading to an increase in sales, conversions or engagement.

Mobilegeddon may have been hyped up to play on the fears of website owners but by getting a solution in place now you can safeguard yourself against algorithm changes in the short term whilst implementing a bigger redesign strategy behind the scenes.