Let’s be honest, 2015 has been massive for mobile online. Google rolled out ‘Mobilegeddon’, mobile surpassed desktop searches on Google and it is now the preferred device to access the internet (in the U.S.).
Although most of this has been expected – with every recent year being hailed as ‘the year of the mobile’ – businesses were still rushed into getting a mobile website in place. In this rush, it is likely website owners have overlooked some easy wins on their mobile website.
Don’t worry; I’ve got this covered for you with 6 mobile website wins that will help to not only improve a user’s experience on your website but may also get you ahead of your competition.
If we had to highlight one issue that’s seen across most mobile sites, it would be on-page links being too close together. We’ve all been there, trying to tap one link on our mobile and accidently tapping another. As a user it can be very frustrating.
Insufficient spacing around links on your website can not only hinder a user’s ability to navigate your site, it can also result in your website not being considered mobile-friendly which affects your website’s search visibility.
Although it may be seen more as ‘essential’ as opposed to a ‘win’, by ensuring links and buttons are sufficiently spaced across your website, what may be a competitor’s downfall can easily be your strength.
Google recommend that each tap target be at least 48 CSS pixels tall/wide with sufficient room between each target without overlays. View Google’s resource on correctly sizing tap targets for more information.
To identify whether your website uses correctly sized tap targets, use Google’s PageSpeed Insights tool, which will show results on a page-by-page basis.
The number on a website is usually the first point of contact for a user when they want to get in touch with a business, regardless of the device they’re using. On a mobile device this becomes even more important.
You should ensure that when the number on your website appears on a mobile device, it can be interacted with, rather than it being static. By allowing mobile users to click to call, you’re making it a lot easier for them to interact with your business and convert.
Enabling this action involves adding the simple ‘tel:’ scheme around your contact number, marking the number as a link:
For information on implementing this code, have a look at this resource by Google.
Along with click to call, you also need to ensure a click to email feature is in place on your website. Although this is now common practice across most websites, from time to time it can be missed.
As mentioned above, you want to make it as easy as possible for your user to interact with your business and convert should they wish to. This action allows users to click an email link to be taken directly to an email window where they can compose a message, as is done on the Koozai website:
Enabling the click to email action involves adding the ‘mailto:’ scheme around the relevant email address:
Ensure you understand your user when designing your website. This is especially important when formulating the menu of your mobile website. A typical way in which web designers adapt the navigation bar is to put it behind a hamburger icon, as is used on the Koozai website:
You need to identify which is the best approach for you; one solution doesn’t work for all sites. A/B test your menu and see what works best for you and your user. Are users interacting with your menu more when navigation items are visible, or is there no difference when menu items are hidden behind the hamburger item?
By conducting split tests, the data you gather will allow you to effectively channel your audience through your mobile website.
Design and structure consistency can often be overlooked when creating a mobile-optimised website. This shouldn’t be the case. When you serve a mobile version of a website, ensuring consistency with the design and structure of the desktop equivalent is important.
If a regular desktop user visits your mobile website, they should be able to interact with it in a similar fashion to the way they would on your desktop version.
When using forms on your mobile website, make sure you’re using the correct mobile input type per field.
A number of mobile input types are available, and each input type results in a different keyboard being shown when users click in the relevant field. Below is a selection of the most commonly used input types used in contact forms:
You should provide your user with the right keyboard. By using the correct input type, you’re making it a lot easier for your user to convert and improving their experience of your mobile website. For more information on mobile input types and how to implement them, click here.
Do you have any mobile wins not mentioned in this post that you’ve implemented on your website? I’d love to hear about them. Feel free to share them in the comments below or reach me directly via Twitter – @LukeTheMono.
Alternatively, contact us today for advice and support in building a strong mobile website.