Whether you’ve chosen to go ‘mobile first,’ have separate desktop and mobile sites or are opting for a responsive website solution, there’s no denying that your website needs to cater for those of who are visiting via mobile devices. Here are our five top dos and five top don’ts for how to go about creating great mobile web design.
Five dos for mobile web design
1. Design with the user in mind
As with any type of design, the user should always be at the forefront of your mind, right from the pre-planning stage. You will need to consider who your target audience are, what they want/need, what their aims and purposes are and how they behave when they are using their mobile and tablet devices. Never forget to put yourself in the mindset of the user at all stages of the design process.
2. Make the text large enough to read and click
If your website is clunky or unwieldy for the user, they will become easily frustrated and are unlikely to return for a second visit. Making sure that text is large enough to read and that buttons are clear and big enough for a fingertip or thumb is therefore of crucial importance in making your mobile site usable.
3. Build it for speed
Optimising mobile website performance is vital in maintaining a fast-enough load speed. Resizing, cropping and adjusting image resolutions can save a great deal of bandwidth, thereby improving user experience and ensuring they don’t click away from your page before it’s fully loaded.
4. Streamline your content
Whilst your core message and tone of voice will remain consistent with your other communications (desktop site, blog and so on), screen real estate is at a premium on a mobile device, so you will need to streamline content as much as possible. Focus on what you really need to say and be as concise as possible whilst remaining on-brand. Where appropriate, use images, animations, video, icons and so on in place of text.
5. Test, test and test again
Testing on as many different devices as possible is key to ensuring maximum compatibility and functionality for your audience. Although there are many software simulators (those for iOS and Android as well as emulators such as BrowserStack and Responsinator) on which you can test your site, there’s no real substitute for testing using a range of real mobile devices.
Five don’ts for mobile web design
1. Don’t think it has to be just like your desktop site
Although there are some things that you’ll need to keep consistent between desktop and mobile sites (or the versions of your responsive site), there are plenty of ways in which your mobile site could (and should) be different.
Don’t be afraid to innovate and introduce things onto your mobile site that aren’t on your desktop site and vice versa – some things lend themselves particularly well to mobile, e.g. geolocation tools, which would be redundant on a desktop site. Think outside the box.
2. Don’t assume that you know how people are interacting with your mobile site
It’s very easy to assume that mobile website visitors are busy, time-pressured people who are on the go all day, or that tablet users are more likely to spend money on their devices than their phone-carrying counterparts, but these types of generalisations can be a) misleading and b) sometimes completely wrong.
The only way to know for certain how your target audience are interacting with your site and with other similar sites is to investigate. Both market research and website usability testing are really important strategies to finding out just who your audience are, what they want from your site and how they behave online.
3. Don’t over-complicate things
Keeping things simple should always be a main aim of your website design, and especially so when it comes to small screens. So it’s important to only include things on your mobile site that genuinely need to be there. If you can keep your design uncluttered and focus on function, even where real estate is limited, you can bring a sense of sleek spaciousness to the smallest screen.
4. Don’t underestimate the importance of easy navigation
The most infuriating types of website are those that are difficult to navigate. Whilst some sites make the mistake of having too little in the way of navigation, others go over-the-top and have so many layers and alternative navigation systems that it’s all too overwhelming for users to try to steer through.
When visiting a site like this on a tablet or phone device, the problem is often exacerbated, so think carefully at the planning stage about how your navigation system is going to help users to find their way quickly and easily around the site.
5. Don’t forget that your message and branding still need to come through
Even though your site for mobile might be quite different from its desktop counterpart, it still needs to maintain the look, feel and overall message of your brand. Some of this will come from using the same logo, straplines, typography and colours, but don’t forget that you can repurpose images and text content from your desktop site too.
If you are writing new copy, make sure you’re following the same house style so that your vocabulary and tone is consistent and so that visitors feel a part of your brand, whether they’re viewing on their home computer or on their smartphone.
There are, of course, plenty of other dos and don’ts to consider when designing a mobile site (don’t using Flash or Java, do reduce the amount of text entry necessary, don’t be afraid of white space, do let visitors view the full site if they prefer…), but by following the ten points above, you will be off to a flying start.
Rather than imposing limits, mobile website design poses a range of new challenges and opportunities for inventive solutions, so if your site isn’t yet mobile, embrace the technology!