How to make your website mobile-friendly

googlemobile1Are you getting Google-slapped? If you’re an author or a publisher with a website, the chances are that the search giant is shaping up to slap down your site because it doesn’t display well on mobile devices.

Google did give advance warning of the mobile-friendly update, with a notice in February declaring it would be boosting the ranking of mobile-friendly pages on mobile search results, and the change was brought in this week.

It says the aim is for searchers to get high-quality and relevant results where text is readable without tapping or zooming, tap targets are spaced appropriately, and the page avoids unplayable content or horizontal scrolling.

Mobile search and browsing is growing all the time and it’s a good move to get your site mobile-friendly, not just to get Google to stop slapping you, but also to give your readers a better, more engaged experience.

There’s a mobile-friendly test available at Google Webmasters where you can check if your site passes the new criteria and I’m happy to say this site (rogerpacker.com) passes the test (see below).

mobile-friendly-test

However, when I ran the test on some publishers’ and authors’ websites the results were not so good. Even some surprisingly big publishers, including Bloomsbury and Orion Books, have sites that are not mobile-friendly, while my sampling of smaller publishers and authors revealed the majority of them failed the test.

I won’t pick out the ones that failed as it was really a random sample, although it did include some of the big best-selling writers, and even some of those that passed had issues that needed attention for a good mobile experience.

Many of the sites looked dated, with type so small that they were difficult to read even on a desktop computer. Typography is a very important part of a website and setting a decent size is a big part of making a site suitable for mobile viewing  — 16px at least.

The good news is it’s fairly simple to make your website mobile-friendly and Google will stop slapping you as soon as you do.

If you’re a WordPress user, then you can use a plug-in to render a mobile version of your site, or — much better — switch to a properly responsive theme.

authorpro1
The AuthorPro child theme from StudioPress runs on the Genesis framework.

I’m a big fan of Studiopress themes and I use their Genesis framework as a base to design and build websites. It’s a fairly simple framework which can be adapted very well for authors’ websites and they also offer a range of ready-built themes for use with Genesis at the reasonable rate of $99.95 for the framework plus a theme. One of the child themes on offer is AuthorPro, which is specifically designed to showcase books.

If you’re looking for a free responsive theme, you can find a selection at WordPress.org. Some of the most popular themes there include WordPress’s own Twenty Fourteen, which has a magazine-style layout; Sparkling, a clean theme well suited for a creative site; and ColorWay, which has seen over 650,000 downloads and can be adapted for a wide range of sites. If you want a simple one-page site, try Zerif Lite, a very nice parallax theme.

Free themes don’t generally offer much in the way of support and they are often ‘lite’ versions which also offer a paid-for version, but a free theme might be all you need for a straightforward site so long as you recognise its limitations.

Paid-for theme companies such as StudioPress do offer excellent support and an extensive knowledge base and infrastructure featuring free plug-ins, etc.

Swapping a theme is easy in WordPress, but you’ll undoubtedly have some tidying-up to do to get your site looking good, such as loading and positioning your header or logo, assigning menus and general customizing, etc. It might provide you with a good opportunity to freshen up your website with a new updated look.

If you don’t want to bother with a new theme, you could take the plug-in route.

Jetpack is a free package from WordPress.com which includes Mobile Theme which allows smartphone viewers to see a mobile theme with your site’s latest posts, a menu to access your pages, and a search box and have the option to view the desktop site.

jetpackmobile1

Paid-for plug-ins include the WPtouch mobile suite, which costs $69 for a single site and claims to be running on over two million websites worldwide, and WP Mobile Detector, which is $50 and matches the mobile layout to the device being used to browse your site.

If you’re not running a WordPress site, then contact your hosting provider to see if they have any widgets to make your site mobile. GoDaddy, for example, has a mobile function in its Website Builder, while Bluehost offers gomobi on its shared hosting.