More and more users are accessing our websites from more and more devices – meaning more and more websites are being left to the wayside when it comes to having a mobile design for their website.
Without a Mobile Website Design or Mobile strategy, quite simply – your website will sooner depress than impress any customers that come a-calling. So how do you rectify this? Follow our top tips below of course!
#1. Think ‘Tappable’ not ‘Clickable’.
When it comes to mobile devices; its now all about the ‘taps’ rather than the ‘clicks’ of yester-year, which creates a very different dynamic to the ‘standard’ usability of a website we all know and love.
Web design revolves around a small precise area for links, buttons, etc., an area easily found with your mouse. However, mobile links and buttons need to be larger to tap with a finger and easier to see on a smaller screen with limited focus area.
Another issue moving from desk to (mobile) device is the loss of the ‘hover’. If you think to your desktop usage, when you have a ‘hover’ action set up – such as a dropdown navigation menu – this wouldn’t occur automatically on a mobile device, only after the first tap. only occur on the first tap when viewed on a mobile device, leaving the second tap to follow the ‘command’. This could lead to confusion and restricted usability of your site, and definitely an area that needs to be considered and re-worked with any mobile site’s functionality.
#2. Keep it Simple.
When it comes to mobile sites and formatting; simplicity is always the way to go. Keeping file sizes, load times and navigation down ensures your site loads quickly and efficiently – the number one reason for customers leaving your website in search for something slicker.
The screen you are working with is substantially smaller than the usual screens of desk and laptops, so make every pixel count. Choose your placement of icons and images wisely.
However; don’t forget that simplicity does not mean your site still can’t look beautiful. Do your research and make notes for your designer on other website (in your industry or other) that you find work well on a mobile. Colour schemes, text layouts, button formation – they are all important factors that contribute to an all round great website.
#3. Business Objectives.
Before embarking on any web design/re-design – you should always, always have clear business objectives in mind with what you are setting out to achieve with your website.
What are you trying to accomplish? Are you selling? Are you trying to inject some fun and personality? Are you conveying key information and USPs?
As with any design work, prioritise these objectives and inject them into your design work. Don’t over do it of course – with limited content area it is best to focus on a key one or two for mobile websites, as the flexibility of larger sites is somewhat stripped down.
Keep brand continuity with similar images and colour schemes; but think in terms of speed, usability and your overall objective.
#4. Interaction Feedback.
As mentioned earlier, usability of your website changes when considering a ‘tap’ over a click’, but its not the only area that is key to consider.
When clicking a link online via desktop, the link will change visually to indicate it has been actioned and recognised. It is deemed good practice to continue this logic to a mobile device. With iPhones for example, the common white link turns blue when tapped. This visual interaction feedback is worth implementing across the board of devices.
If you feature content on your site that takes a little longer to load; make sure your user knows this. Use animated loading images or gifs to indicate something is in progress. This stops impatient users unaware their click is in motion leaving to view content elsewhere.
Desktop browsers have a number of various indicators built in to show something is in progress, whilst mobile ones make it less obvious. Remember to include this aspect in your mobile site design for increased usability and lower bounce-rates.
#5 TEST IT!
As with any project, program or plan; it will amount to very little if you do not implement any sort of testing post-design.
Test your site on as many devices as possible. Don’t rely on just Android and Apple as they are market leaders – look into Windows platforms and other tablet devices. The differences between the two could be the make or break for your mobile website.
Of course; it can be difficult to test on all devices without owning them all (or having some kind hearted friends and family to lend them!) so there are otherwise two main directions to take your testing in.
Number 1 would be to pay a mobile testing company who provide access to a wide selection of real devices using a virtual client. Number 2 would be by installing a variety of SDKs (Software Development Kits) and mobile phone simulators. This of course is rather time consuming; but is completely free – so if you have the tech-know-how it is well worth looking into.