Websites Not Fully Useable on Mobile Devices Hurt Search Rankings
The popularity of smartphones and tablets has been rising constantly since they were introduced, and they are quickly becoming a major way that people browse the internet. With this in mind, in April this year Google initiated an update (dubbed “mobilegeddon”) that meant that websites that are not fully useable on mobile devices could find themselves tumbling down their search rankings.
Those who remember the Panda update in 2011 know that this can be a painful and potentially expensive experience, with a real loss in business. However, customers can be lost due to a clunky and frustrating user experience on mobile, so even without the algorithm update it’s a good idea to make sure your website is at its best on all devices.
Whether you are building a website or updating an existing one, here’s a guide to making sure your website is mobile ready.
Type of Mobile Website
There are various ways to create websites that work well on smartphones and tablets, and these options can help you pick what’s best for your business or blog.
Mobile Friendly
This does exactly as you would expect, by not including anything that is incompatible with or will have trouble loading on a mobile device. You can navigate around the page, zoom in and out, and press all the buttons, but the website is not necessarily perfectly adapted to mobile use. This is one solution if you are lacking time or budget, or if an entirely mobile friendly website is not vital to your business (although this could affect your rankings).
Responsive
There are several responsive technology frameworks available, and they are very useful when you are designing for various screens. Responsive websites makes the transition from desktop, tablet and smartphone cohesive and offers the user a recognisable experience throughout each of these devices. Responsive technology frameworks allow you to lay out elements in a grid that then shifts to different screen sizes, with the content resizing itself to fit every screen. This leads to SEO benefits, and generally makes life easier, as you don’t have to have a separate URL for your mobile site.
Adaptive
Adaptive is very similar to responsive, except that adaptive website design is based on fixed column sizes and screen resolutions, whereas responsive is fluid and unfixed. This means that adaptive design rearranges itself according to these determined screen sizes for the best user experience.
Apps
Engineered to run on mobile devices in particular, apps are a separate entity from your desktop website. They offer a different experience to traditional webpages, but you can create themes across the two in order to ensure that users associate both with your brand. However, apps should offer something unique and worthwhile. There are hundreds of options when it comes to apps so if you create something that can stand up in its own right (such as a game or service) while complimenting your website, they can be very useful.
Fingers and Thumbs
You want users to be able to navigate your site intuitively, which means being able to do everything with a thumb or index finger. If people have to pinch in order to zoom in it usually means the content or buttons on your site are too small when translated to a mobile device, or so closely spaced together it’s hard to tap the button you want. It’s frustrating to find pages loading that you didn’t want because of misplaced taps, and can even lead people to abandon the site completely to look elsewhere.
Most index fingers are 45 to 57 pixels wide, so it’s important to bear this in mind and make your buttons and targets easily selectable. This means that customers won’t be trying to negotiate small buttons, or find themselves tapping on the wrong thing and getting annoyed.
Be Careful With Advertising
This is particularly pertinent for blogging websites where the product is your content, as advertising that is fairly unobtrusive on a traditional desktop can ruin your website when it’s on a mobile interface. Large pop ups with tiny, hard-to-click dismissal buttons can be extremely irritating for users, especially if by trying to get rid of a intruding advert they can find themselves unwillingly navigated to the advertising companies website.
Anything that blocks out content or makes the website harder to read in this instance is a bad idea, and adverts that follow the user up and down the page and hide your content are a particular no-no. It’s a good idea to check how your ads translate to mobile, in order to ensure that the methods you use to monetise your site don’t in fact spoil it.
Contact Info
Business should make all the most important information, such a location, opening times and phone number very easy to find. Icons can be useful in this instance, with buttons that allow customers to phone instantly usually welcome to people who have found you on a smartphone. This improves the user experience and also encourages custom, as people are likely to give up on you if they can’t find where your store is, or phone up when they need to.
Keep it Simple
Anything that takes a long time to load will be exacerbated on a mobile device, and ideally you want to use images and videos that are optimized for mobile and won’t slow you down. People are three times more likely to watch a video on a mobile site than they are a desktop, so it’s worth considering one, but only if you don’t use heavy media files that take an age to become watchable.
This idea of stripping back and simplicity extends to the design itself, and you want to go for something clean and unfussy to help with loading times and to also make the user experience better. With only a few seconds to get your message across, something direct and clear-cut with be much more effective than a website that’s hard to navigate and loaded with content.
The copy in your website will benefit from being similarly short and sweet. Reams of information will put people off, especially on a smaller screen which can make even a few paragraphs look monumental, and unless your website exists to host blogs and articles the wording should be instantly engaging and straight to the point.
Search Out Good Examples
While you need to be careful not to completely copy other peoples’ ideas, seeing whether other people have done it right (or wrong, in some cases) can give you a good guide. Nifty and effective designs can also offer inspiration, opening your mind to possibilities that may not have occurred to you.
The most important thing to remember when designing websites for mobile is how you interact with websites yourself. If you keep it in the back of your mind when you are browsing the internet in your own time, you’ll pick up on what it is that’s makes you impatient with websites, and what works so well that you don’t even notice it. This way you won’t make special allowances with your own site because you know it well and know what its intentions are. By experiencing your website as a customer would you can make the best decisions for it, and ultimately create the most seamless and successful result you can.
This post was written by the team at Kent Design Agency Designmatic, a design agency providing branding, packaging and web design in Tunbridge Wells.
