How to make your website mobile-friendly

If you’re creating a business website, then there’s no excuse for failing to be mobile-friendly. The day of ‘mobilegeddon’ has been and gone. But dismiss it as ‘too late now’ at your peril.

To explain, on April 21 2015, an update to Google’s algorithm meant that whether your website is mobile responsive or not would have a direct impact on your mobile search ranking.

Google has chosen to use mobile-friendliness “as a ranking signal” in all languages which “will have a significant impact” on search results.

The update was described by many in the industry of web building as ‘mobilegeddon’ and SEO expert Jez Booker points out: “Normally, Google is rather vague about what an algorithm update is about and it’s possible impact. In this case, they were spelling it out clearly.”

And it goes far deeper than that. 67% of mobile users say they’re more likely to buy if the site is mobile-friendly. Last year, the total time spent on mobile platforms – both tablet and smartphone – jumped to 60% and is only going in one direction.

Compelling stuff and unless you enjoy frustrating and annoying your customers it will pay handsomely to give them what they want.

In fact it will give you a massive competitive advantage as every consumer has encountered sites not designed with mobile in mind. And despite the warnings and Google’s algorithm update you can be absolutely sure not everyone took the step to act and make their sites mobile responsive. So view this as an opportunity to make some gains against your rivals.

To secure your future mobile traffic you need to make sure your site is compatible with all of the major platforms, which means Android, iOS, plus Windows Phone and BlackBerry.

So how do you make your site mobile-friendly and avoid a deterioration in your organic search ranking?

1. Is your site mobile responsive?

If your site has a responsive design, this will typically assume you start with your desired desktop design or layout and that certain elements will be dropped as the screen size shrinks (for tablet, then mobile).

It’s worth checking your web analytics to see what proportion of customers and site visitors come to you via mobile as this will help determine how you might need to consider your design needs. Should mobile come first, for example?

Typically, this won’t be the case as a rule of thumb now is that 70% of users will arrive via desktop, with 30% mobile, which makes responsive design your most likely need. Exceptions may include location-based apps and retail store websites.

Aside from responsive design being recommended by Google, a key advantage is that you won’t have two versions to update separately if you were to create a mobile-only site.

However, it can be more expensive upfront, says Booker, and “content-heavy sites will still struggle to format to mobile screens even with a good responsive theme”.

2. Test how mobile-friendly your site is

Inevitably, there are a number of tools you can use to test whether your site is already mobile-friendly. Google’s very own Mobile-Friendly Test is an obvious place to start, says Laurence Smith, of web development specialists Everlution.

It also outlines the points you need to address, such as the text being too small or the links too close together for touchscreen use. In addition, Google’s PageSpeed Insights tool helps you see how quickly your pages load on mobile.

The PageSpeed Insights provide a little more detail to help you boost your mobile user experience ranking out of 100 along with the pagespeed ranking out of 100.

We used BrowserStack for Startups.co.uk on a free trial. There are numerous emulators – software that enable one computer system to behave like another – for testing mobile-friendliness.

Tools such as mobiReady, MobilePhoneEmulator, and Screenfly are examples you could try, with each just requiring a URL to display your site on a mocked-up mobile screen.

Isaac Ng of design and development agency Brainy Sites, says he hasn’t had much luck with emulators as “most that we’ve tried pretty much just resize the viewport on whatever browser the webApp is being opened in”, which doesn’t really provide a definitive answer on whether your site is mobile-ready.

Instead, Ng relies more on physical devices using Android, iOS, Windows Phone and BlackBerry platforms.

3. Find out what customers using mobile devices want

Once you’ve tested where you stand and have some idea of what you need to do, you need to think about what customers want when they visit your site. What is their main purpose?

This will help you determine what the mobile version of your site should look like. Ultimately, you need to be able to answer their need quickly. A quick and easy way to do this is to look at your site analytics.

• What pages are most popular from Google and other search engines?
• Which pages do visitors tend to jump to from your homepage?
• What are the most-used drop-downs?
• How do the figures differ depending on whether they are accessing the site from a smartphone or tablet?

Most people will be looking for more basic information. It may be to check a price or product, find out what services you offer, where you’re based and how you can be contacted.

Your main navigation or mobile site menu should reflect that. Provide fewer menu options to enabling users to navigate their way to a desired area quickly.

Lyndsey Simpson, owner of talent management specialists The Curve Group has been through the process of relaunching the company’s site in recent months and says “mobile use was at the forefront of our thinking”.

With 20% of traffic from smartphones alone and an additional 9% from tablet devices Simpson carefully considered how the sales funnel needed to work across all platforms.

“If somebody buys into your brand and your business first, they are more likely to buy your products and service offerings in the long run,” she says.

The result was a site that is ‘clear, not clever’, is easy to navigate, with stand-out ‘call to actions’, and a reduced level of content.

4. Make your site load times as fast as possible

You’re still at the planning stage and need to think about a few things, which will help you brief a developer or member of your team with sufficient technical skill.

As mentioned earlier, the speed at which your site loads is fundamental, especially on mobile. Any delay for the customer will most likely see their patience snap and they’ll go elsewhere.

A text-only mobile site is more likely to ensure a fast load speed, but it’s also less likely to impress and tablet users will expect a more visual experience. But don’t get carried away with imagery or large files that will take time to load.

It’s a good idea to make sure any images you put on your site are compressed, which will ensure they take less time to download.

Plugins too, can slow things down. If you have a WordPress site, there are a variety of platform specific plugins which can be set to automatically switch off for mobile if the functionality of that plugin is not required.

5. Keep your mobile design as simple as possible

Remember that your mobile users will most likely have touchscreen devices. Here’s a quick checklist to help you brief a designer, developer or employee.

• Include sufficient white space around buttons to make your mobile-friendly site easier to browse. Screen sizes will vary, so consider whether their fingers are likely to accidentally click the wrong button.
• Avoid the need for too much text to be entered for form-filling by providing dropdown selections. Again, make sure the text in the dropdowns is easy to make selections and scroll.
• Steer clear of dense copy and a small point size. Smaller mobile screens make long-form articles with fewer entries points hard to read. Equally, shorter headlines and articles are more suited to mobile.
• Decide which features are a necessity, such as ‘Click to Call’, an integration with Google Maps to help customers find a physical location, or scheduling software to enable them to book an appointment. It may, for example, be better for the user experience to include a custom designed static map rather than a link to Google Maps.
• Consider your email marketing as if you have a regular newsletter designed to encourage customers to click through to content on the site, you’ll need to keep images and elements that need to download to a minimum.
• Talk to an SEO specialist. What isn’t fully known is whether the impact on mobile search results might have a knock-on effect on desktop ranking. It’s not meant to, says Booker, but as results today tend to be reflected on both platforms SEO experts are taking nothing for granted.

If, for example, your site is published on WordPress, you can create mobile-specific content in the back-end.

Rather than doing this manually, there’s a plugin for mobiles (although not tablets) – Wptouch – that can achieve much of this. This is easy enough to search for and install from your WordPress plugins options. Working out how to configure it is a little more tricky, so is likely to require a level of technical understanding and may be worth hiring a specialist WordPress developer.

Laurence Smith of Everlution also recommends finding a responsive theme for WordPress from Themeforest.net for between $20 and $60. “WordPress makes SEO easy, but it is also relatively simple for us to plug-in a responsive WordPress theme that we can then modify and configure.”

6. Find a service to make your site mobile-friendly or hire a developer

If you decide you need a developer to handle the work, Odesk (which merged with Elance) is a good place to start if budget is an issue says Everlution’s Smith.

He estimates that for a WordPress specialist you’ll spend around £500 to install and configure a responsive theme. Everlution, which designs and builds sites in PHP and Drupal can build specialist WordPress sites for north of £2,000.

A quick search on Odesk and PeoplePerHour shows you’re likely to pay £20-40 per hour for WordPress developers.

Alternatively, there are a number of services that can actually take you through the process of making your site mobile-friendly.

At Startups.co.uk, we used the Bootstrap framework to custom build the site. It’s a very popular open source framework which most developers will know.

“Bootstrapped responsive drafts can be completed fairly quickly. But more functional mobile-heavy sites we find a lot of time is spent de-bugging cross-platform obscure errors with newer technologies, such as HTML5 canvas and video streaming,” says Brainy Sites’ Isaac Ng.

Search around though and, while it’s slightly more geared to building a website from the ground up to have a good user-experience (UX) on all devices, take a look at Google’s recommended multi-screen vendors list.

Other services worth considering include:

• Dudamobile, promises to make a site mobile-friendly in minutes or offers to build a responsive site to work on desktop, tablet or mobile
• Mobify, which is a mobile shopping platform used by a number of large brands including Superdry and Charles Tyrwhitt
• Mobilize Today, enables you to customise the way your desktop site is converted to mobile, including the option to get a quote for m-commerce functionality
• bMobilized, like Dudamobile it promises to mobilise a desktop site in minutes with you adding features and functionality such as m-commerce, analytics and ad integration, as well as a selection of plugins.