Why designing for mobiles matters
Watch an animated video of this article
I’m going to assume you have, or are about to get, a website. It is now more likely that your visitors will be using a mobile device than a desktop – be that a phone or a tablet. Yet it is likely that the website was designed & build on a desktop. Does the website ‘work’ on all popular screen sizes? If not, you’re losing people…
Google has switched its preferences to assess, score and rank a website (using its secret formula) to “mobile first”. In other words, it matters most how good a website looks on a small screen. Register the site with them, and they’ll be kind enough to send you warning emails that, for example, a particular image doesn’t shrink to fit, or a button is too close to the edge.
So it’s crucial to ensure that a website is optimised for display on at least the 3 main screen sizes of desktop, tablet, and mobile. The task is made a whole heap easier these days with the modern website design software – generally the transition and reshaping of the webpages is handled automatically.
All the same, someone does need to check and confirm. A common issue is a title that is nice and big on a desktop, and fits within the page, but when you see it on a mobile it breaks and wraps words over multiple lines because the font doesn’t shrink enough.
Another cardinal sin in the website world is making people scroll left and/or right. Now I’m not talking about a ‘swipe right’, this is when you can’t see what’s over on the right and have to scroll over to read it, then back to read the next line. Bad user experience, puts people off, they leave.
One design does not fit all – as mentioned, webpages nowadays are built to automatically reshape to the size of the screen they get displayed on. Usually, this follows our typical (Western) pattern of reading left to right, top to bottom – and so where there’s more than one column of stuff on a webpage, the columns get stacked on top of each other using the left-most first, then the next column under that, etc. Each column can then take the full width of a small screen. In addition, things like background images, buttons, videos are resized so that they fit within the available screen width.
Beware overcomplicated menus – navigation is crucial on a mobile device because it needs to be used with a literal touch of the finger. You’ll know from your own experience of browsing a website on a phone, moving around in a menu is quite different to what you see on a desktop using a mouse. It’s always good design to minimise a menu because having too many choices leads to none being made, and when displaying on a phone screen you need the menu to fit and be usable in a small area.
Watch button size – again, we’re expecting fingers instead of mouse clicks when it comes to buttons. One of the more important elements on your webpage (because it’s what you want your visitor to ‘do’ or why have it there?), it must be easy to tap. Your typical audience may influence whether you need buttons to actually be bigger on a smaller screen. For all visitors, the button should never be this tiny little fiddly thing you’re wanting people to touch. Note that a common solution is to make the entire section that contains that button to be clickable, so even if the visitor slightly misses the button, the webpage still accepts it as a touch/tap/click.
Are elements too close together? – similar to button size, you’ll want plenty of room between elements that you’re expecting people to touch on a small screen to avoid mistakenly touching the neighbour. A guaranteed way to annoy your visitors is to make them repeatedly attempt to do something and get the wrong thing each time.
Are your images oversized – optimised images are important for fast-loading pages no matter what screen size. Search engines will penalise a page (and so rank it lower or not at all) if there’s a giant filesize for a photo that is then shrunk down visually to fit inside the screen area. There are many options for ensuring that all your images are optimised for delivery in a webpage, be sure your website is using one. They are nearly all fully automatic so you won’t have to worry about displaying on different screen sizes.
And finally, test, test, test – testing, as with everything, is vital to ensuring a mobile optimised website is running smoothly. It’s difficult if not impossible to test a new website or webpage on the huge varity of devices, software and operating systems out there in the world, however, you can certainly check how things look on all your own devices and especially on a phone versus a desktop. There are software packages such as Sizzy that let you simulate multiple devices and show you what your website looks like. And there are online services such as Browserling and BrowserStack too.
At Winch Websites, a mobile-friendly website is a given and all our projects are assessed just before launch using the Sizzy tool. It’s quite common to come across a few items that need tweaking to suit smaller screens, so definitely a required step in our website design process.
If your website isn’t mobile friendly, perhaps it’s time for a revamp. Get in touch 😀
