More and more of the world’s online traffic is coming from mobile devices. With that in mind, we’ve put together a new series of pieces focused on the mobile world.
Here, we’re going to go through everything you need to know about mobile web design.
So, which errors should you look to avoid when looking at designing a website with mobile in mind?
Let’s go through them:
Using larger files than necessary
With the increase in quality of mobile displays, it can be tempting to try and use the highest quality images and videos possible.
After all, your users want to show off their brand new phone’s fancy display, right? Well, don’t be so sure.
Using larger files can definitely make your website look good, but there are three main consequences to doing so:
- It’ll mean your websites take longer to load
- It’ll mean that users use up their data more quickly
- It’ll mean that their roaming charges go up when travelling abroad
None of these things will endear your website to users, and most people will be more than happy to sacrifice ultra-ultra-HD images in order to use a website that loads quickly and doesn’t eat data.
Too-small touch areas
Virtually all modern mobiles are touch-screen. This is no bad thing: it’s actually a lot more flexible than an old-school keyboard.
However, a lot of websites make the error of making their clickable items way too small. The result is that it becomes much, much harder for users to navigate the website.
Because mobile pixels vary, it can be tough using pixels to measure how big your clickable links and images need to be.
The ideal solution is to focus instead on finger sizes, which are typically between 12mm and 20mm wide. People can click on things smaller than their fingers, of course, but the lower you go, the less likely users will be able to accurately click on everything.
Making things too cluttered
This is a common mistake in website design full-stop, but it’s worth emphasizing for mobiles.
If your mobile web design is too crowded, it becomes VERY easy for users to go to click on one link and inadvertently knock the one next to it.
This isn’t the only reason to steer clear of cluttered screens, of course: more options mean users are less likely to do what you want.
Uploading Photoshop files directly
This might seem like a minor issue, but you’d be surprised how many website managers are happy to upload PNG files directly into their CMS.
This is often because they want to achieve the ‘transparent’ effect that comes from the PNG.
If you want to use PNG files in a mobile design without becoming a data drain, you need to ensure the files are made as small as possible.
Keep your content short
No-one’s going to read an essay on their mobile unless it’s laid out in an app designed specifically for long-form. (Like the Kindle App.)
It’s vital to ensure that your website content is short and can be read quickly. Don’t overdo the text: keep your writing as concise as possible.
Now, you can’t go too minimal if you want to achieve effective SEO results. However, the generally accepted minimum is 300 words, which won’t look too complex as long as you break it up effectively.
Remember, smartphone screens are a lot smaller than desktop and even tablets, so you need to learn how to say what you’ve got to say fast if you want to capture user attention.
Ensure your contact information is VERY easy to find
This is another tip that definitely applies to all web design, but is worth re-emphasizing.
On mobile, you want to make it as easy as possible for users to get in touch with you.
Ideally, your mobile or email options should be front and center: they should be the first thing visitors to your mobile website see.
You don’t want users to have to search for your contact details at all: it should be as easy as clicking one button to call, or one button to send an email.
If you have any forms you need, make sure they’re simple to use
While we’d always recommend avoiding contact forms on a mobile-focused site – it’s better to link to an email or give a telephone number – if you ARE going to use them, you should go for as simple a form as you can make do with.
No-one wants to have to type out a full list of their details on a mobile device, and a lot of people simply won’t: they’ll quit and go to a competitor that doesn’t want all that information!
Now we’ve covered the mobile specific issues, we’re going to go through the more classic web design errors: these apply to both mobile and desktop pages, so make sure you steer clear of them all!
Giving users too many different options
If you’ve got more than three or four genuine links on your home page, the chances are you’re suffering from the same problem we mentioned for mobile: over-cluttering.
Of course, for desktop the problem can be even more substantial: designers suddenly have space for a lot more links!
Too many websites contain large links to every main page on the website: details on the company, links to blog posts, case studies, meet the team and so on.
There’s only one place where you link to everything: the top navigation bar!
Your home page should be lean and clean: you want enticing copy that makes users want to get in touch with you, and then have a link to exactly where they can get in touch.
And that’s it! If you’ve got effective copy and a design focused on conversion, you won’t need anything else.
If in doubt, leave it out.
Don’t ask for too many clicks
If a user wants to do something on your website, they should be able to do it within three clicks – preferably two.
Some mobile web designs ignore this, and lose a lot of visitors as a result.
If, for example, you have a section of your site dedicated to case studies, you don’t want users to have to click the case studies link on the header, only to be confronted by a set of links that break up the studies into categories, and then sub-categories!
They should be able to click on the link and see the case studies straight away.
Remember, for every extra click users have to make, you’ll lose some. (This is why Amazon introduced one-click shopping!)
Not using negative space
We’ve commented on this in another blog piece. It’s never a bad idea to employ a lot of negative space: that is white space, or space not being used.
In website design, negative space can be very effective: it can help to make a page seem less busy and less complex. It can also make text more scannable (which is valuable online) and to ensure that users remain focused on your main call to action.
Thinking you’ve got time to grab the visitor’s attention
This isn’t the case. Indeed, the general consensus is that any website has only got about eight seconds to grab the attention of a visitor.
(It’s for this reason that you want your CTA to be obvious and your page to be simple: you don’t want the user wasting some of that eight seconds on something that doesn’t actually matter!)
Remember, you want your website to convert visitors into potential customers, QUICKLY.
So what will do that?
- Effective copywriting
- Large, obvious sign-up forms
- Obvious contact information
- Minimal clutter
And so on. Remember, focus ONLY on what really matters: grabbing attention.
Not using images of people
This is a deceptively simple mistake: many companies – especially those offering B2B services – will stock their website up with high quality images of things that are associated with ‘business’ – charts, graphs, buildings, prestigious locations and so on.
However, this can actually have the effect of de-humanizing your business. And remember, people buy people.
It’s a very good idea to have human faces on your website. Ideally you want to go for you and your team, as this will put a face to the services you offer.
And this isn’t just limited to your ‘About us’ or ‘Meet the team’ pages, either: you want to try and include images of people in your case studies, articles, testimonials and often your home page.
It’s important to remember that simply being likeable is a key part of persuasion, and having pictures of real people on your site can make a difference to this.
The key to any modern website is, of course, responsive design.
We’ve covered this in depth in another blog, but here we’re going to go through some of the main things you need to consider when making a responsive design: that is, a website that displays effectively on ALL devices.
Done well, a responsive design will mean a great site on every kind of device.
Make sure your navigations remains on point
If a user doesn’t enjoy using your site, they won’t come back.
It’s important therefore to ensure that, whatever format your responsive design takes on each device, it remains easy-to-use.
The key to this is to spend enough time conducting UX research in every format. Take the time to have each of your designs tested by someone within your target market to ensure that there aren’t any issues.
And where there are problems, iron them out!
Don’t focus on individual, specific devices
With brand new smartphones being unleashed on the market every few months – and with the hype that comes from this – it can be easy to fall into the trap of designing for a specific device. Especially if it’s one that’s going to ship millions of units.
Don’t. Instead, focus on basing a site around your content. How can you format your content in every aspect ratio to ensure it looks the best?
What matters, remember, is that the copy and the images you’ve worked hard to create do the job they were put there to do: to sell!
Make sure you plan for image scaling
In any responsive design, it’s important to make sure you use the right images.
Remember that all of your images need to be able to scale up and down depending on the device they’re viewed on.
Ensure you test how the image looks on every kind of screen: a small smartphone, a mid-sized tablet, a decent sized desktop and even projected onto a bigger TV.
Use images and icons
A lot of modern websites make use of icons and images as part of the navigation, and with good reason: if designed clearly, the text can be removed on the mobile screen, saving room on smaller screens.
If you’re struggling, for instance, to squeeze some of your homepage widgets onto the mobile version of your site, experiment using purely icons instead. They can be a brilliant way of saving space without losing the navigation options for the user.
If you’d like to learn more about the differences in preparing for a mobile web design versus a desktop design and how to get the best results. Get in touch today, we’d love to hear from you.
