From 21 April 2015, any eSeller’s Google ranking will drop if your site isn’t mobile friendly. But it is not just Google that will penalize you if you aren’t mobile friendly, your customers and potential customers will ignore you.
So what can you do to mobilise your business? Here are some basic tips to make your site mobile friendly (which you should have done already, you naughty people tsk tsk…) that will satisfy Google and your customer base.
Check with your webhost/CMS
Most of you will be running sites through a webhost and probably using a well known CMS or ecommerce platform. Most of these third party templates already automatically do a lot of the mobile-friendly stuff for you such as setting the right width and ordering the content into infinite scrolls and so on. Most will also do this for orientation changes too, so you have the basics covered.
However, this alone does not make for a good mobile website. The very design of the site is key.
Text
The first thing to think about is how much text you are putting on. Text loads quickly, but is it really a great way to communicate with someone who is looking at your site on a tiny screen, perhaps outside in the street? Think about what you want to say and say it clearly and succinctly.
- Good short headlines – be witty and engaging rather than lengthy and detailed
- Punchy, clear text – be pithy and to the point
- Less is more – keep descriptions to the basic minimum – but offer ways to click through to see more if the reader really wants to see more.
Images
Images are a much more engaging way to sell your products and also work a lot better on mobile devices that text. However, there are some simple rules to follow about using pictures so that they are mobile friendly:
- Good quality, but low res – yes beautiful, high res photos look lovely, but even retina iPad screens aren’t that good and no one wants to wait minutes to download and image (nor do they want to use up their data allowance). So, keep images clear, but low res. Make them small – around a couple of hundred pixels in width and around 150 dpi usually works well. However, play about because you don’t want to degrade what your website looks like on PC.
- Use lots of them –a picture paints a thousand words so use lots of them rather than text
Video
Video is really key to an engaging and rich experience for users and increasingly they expect it more and more. However, this can be challenging for mobile versions of sites. So, embed video links from somewhere else – let YouTube or Vimeo do the hosting. They will also detect what device is trying to view the video through your site links and will adapt it accordingly.
But don’t rely on video. The trouble with mobile today is that the networks are consistently good, so you may have someone on your site using slow. Old fashioned GPRS or Edge and, for them, video is going to be a no-no. So by all means use video content, but don’t make it the key thing that sells your site.
Oh and in case you don’t know: don’t use Flash – Apple and newer Android devices can’t read it, so Flash videos won’t play.
Buttons
One of the biggest things you need to think about when looking to make your website mobile friendly is how people are going to click on stuff – not least the buy button.
Mobile needs to have buttons that can be clicked with fingers. Not meece/mice/mouses. So you have to design the buttons accordingly to work for fingers.
- Make them a reasonably size
- Space them out
- make them look like buttons – so use drop shadows and rounded edges
- Make them stand out
And don’t worry they will work just as well on your ‘normal’ site too.
See more on this in our “Revamp your website for the touchable world” piece here.
Scrolling
The old idea of designing a website so that you had “above the fold” and “below the fold” content is dead. This concept has been killed by mobile, where people are already inclined to scroll through stuff. So rethink the design of your site so that it scrolls down. Don’t get to hung up on the best things being “above the fold” of an imagined portrait orientated laptop or desktop screen.
However, you still need to put the most compelling stuff at the top and call to actions and the really engaging things somewhere where they will be seen straight away. This also applies to your desktop site.
For more on the infinite scroll, check our piece here.
Shopping the grid
There is a terrible propensity among ecommerce site templates to simple create a grid of products. Boring. And not very mobile friendly. While ‘shopping the grid’ was cool a couple of years ago, now everyone does it, it looks poor. And it isn’t very mobile friendly – especially when clicking throws up a pop-up light box.
Instead, think about better ways to display your content – not just on mobile but on the ‘normal’ web too. Category rows, carousels and even jazzed up girds that don’t look so ‘griddy’ are all good alternatives. Click throughs to each product are also much more mobile friendly and easier to use.
The techy stuff
As well as these design considerations, there are a host of little twiddly things that you also need to do to make your site mobile friendly. These will certainly be a pain to do, but they will be loved by Google and your customers, so it is worth taking the time to get these bits right – even though no one will actually notice
- Turn off auto-capitalise and autocorrect in any forms you have – otherwise this will change peoples names and mess about with all sorts of things as they try to type in information on the mobile version of your site.
- Don’t disable submit buttons – many websites are set up so that multiple clicks on submit buttons don’t work. You need to turn this off for mobile as often it doesn’t work first time because of network issues.
- Use standard fonts – Try and stick to using standard well known fonts as phones have a more limited repertoire of fonts built in. This is becoming less of a problem as smartphones become more sophisticated, but still avoid customer fonts as they may not render very well or at all.
FIND OUT WHAT GOOGLE WANTS
These are just some tips and tricks for making your site mobile friendly for Google. For more on what Google wants check out Google’s Guide to Mobile Friendliness here.
