Top Tips For Designing A Website For Mobile Devices
Mobile marketing has been on the rise for a number of years, and is set to remain the future of online marketing.
Currently in the UK, mobile traffic only accounts for 31% of all website traffic, but it’s a figure which is increasing broadly across all industries year on year. Mobile traffic has been bolstered in part by social media and emails, which are largely accessed via mobile devices.
So if you’ve found that a significant proportion of your traffic is referred from social media, then the chances are that your website will be being viewed on a mobile device from those sources. Google has also added a new ‘mobile friendly” tag to their SERPs, prompting and helping mobile device users on phones and tablets to filter their search results further.
This might also mean that Google is preparing to implement a change in its algorithms for mobile users, and websites not towing the line with mobile-friendly sites could well be penalize and suffer a drop in traffic for not complying.
So now more than ever is the time to be thinking long and hard about mobile-friendly design for web, to not only reduce bounce rates but keep your mobile audience engaged and returning to your site. Mobile website design does come with its own challenges, but with this quick guide you can ensure the best experience for your audience.
Define Your Audience
Before you jump into mobile design, you should take some time to analyze your website traffic sources – where it comes from, and where it’ going. Understand what you’re trying to achieve from a user’s perspective with your conversion objectives in mind and you’ll find the optimal design for your mobile website.
First Impressions Still Count
Browsers’ attention needs to be captured quickly, so first impressions really count. Creating an easy-to-use space for users to land, where they can access what they’re looking for quickly and efficiently within a limited screen size is your first big challenge. The mobile site will need to retain the same features as a desktop site, but also include features specific to mobile devices, including:
Succinct headings: show the user what they’re looking for
If you’ve determined that many of your users are accessing your site via mobile devices, then you’ll need to keep any headlines short and snappy – more text means more space is used. It also means that content can easily be shared on social media where character counts really matter.
Opt for icons and images: Make browsing a visual experience
With a limited space for text on mobile devices, mobile sites provide ample opportunity to explore visually-led engaging design solutions. Project Packaging’s website is a classic example of how mobile websites can use visually-driven design – with small text and large images – to engage mobile users and provide an easy-to-use interface.
Simple site navigation: many mobile phone users are used to seeing something similar to this:
The highlighted icon indicates the menu, and is a universal icon recognized by mobile users. If your audience is mobile savvy – and most of them will be – then you can cut down on space-eating text with icons like these. On a mobile site, minimal on-page navigation is a must, and menus and side bar content have be carefully thought out otherwise they could hog screen time and push the content – the good stuff – out of the way.
A top tip is that if something must be displayed on a page, such as cross-selling products or “more” menus to keep users browsing on your site, then always place them at the bottom of the page and screen.
Click to call: make calling easy and fuss-free
Online shops and sellers will have a heavy reliance on good customer support, so easy, no-fuss contact for customers is a must. One great way to implement this is with “click to call” numbers, where mobile users can click a phone number and make a call instantly. It’s a great way to convert traffic from local searches and brand searches, as this traffic usually arrives on a specific contact page because they want to get in touch with you.
UK care home providers Sunrise Senior Living are one such company with click to call in place. Their prominently displayed phone number helps users to convert as soon as it’s convenient to do so:
Page load speed: keep users engaged and browsing
Don’t make your audience hang around waiting for your site to load – keep your site’s page load speed to a minimum. Slow loading is likely to bump up your site’s bounce rate, could negatively affect your site’s rankings and is a number one bugbear for mobile users. If your conversions are lower than expected or suddenly plummeting, then always check page load speeds as a first port of call.
Google advises that page load speeds shouldn’t exceed three seconds. To see how your page load speeds are performing, check in with Google Analytics or Google’s page speed insights tool for mobile-specific landing pages. Your pages will be scored out of 100 and you can also pick up usability and technical tips for mobile sites, as well as handy fixes for many common problems:
Mobile devices come in a variety of shapes, sizes and resolutions so it’s not always an easy feat to ensure usability across the board. But there are a few simple steps you can take to optimize your site for the most popular devices.
By checking in with Google Analytics, you’ll quickly be able to ascertain what the most popular screen sizes are via the ‘Devices’ view and use this as a starting point for your mobile site design.
GO FULL WIDTH
On smaller mobile device screens, a full width icon, button or video will pop out and make on-page interaction much easier. Supersizing your forms – just like Liberis’ application below – to full width is a great way to put easy navigation and interaction (like typing and menu selection) into action in your design.
MAKE IMAGES CLICK-ABLE
Mobile usability is all about easy navigation – you don’t want users to have to try aiming for fiddly, tiny text links and feeling frustrated when they fumble onto the wrong link. This ethos does of course apply to desktop sites, but on smaller mobile screens it’s a must-have.
The British Waterways Marinas mobile website utilizes click-able images, making them into an attractive design feature and an easy-to-access click-able space that aids user browsing with little effort.
If your audience is coming to you from mobile devices, then make sure you’re giving them the best user experience possible.