In one of our previous posts, we talked about the importance of getting your site kitted out for mobile. Now we’re going to tell you what the difference should be between the desktop and mobile versions of your site, because there are plenty, and knowing the difference could make your brand the top dog in a class of mutts.
The ultimate aim of your mobile site
According to research by those clever cats at the Baymard Institute, mobile users expect the full caboodle when they tap into your site on a mobile. They’re not happy with e-commerce brands that only offer a selection of stock, or newspapers that only offer extracts from that day’s paper. Neither do they like it when important pages such as the help, about and FAQ are trimmed down or missing. In short, users want all the content accessible on their mobile. And they’re used to it being easy on desktop sites that have been perfected over the years, so they have little patience with mobile sites that perform badly. They know that if your site isn’t an absolute doddle to use, they’d be better finding a competitor who has a dreamy mobile site than sticking around trying to figure out how to navigate yours. But anyone who’s ever used a mobile to access the internet will know that it’s not easy to cram all that information and functionality into such a small space.
The obvious problems
Size is the number one issue with mobiles and tablets. If your average desktop screen is the size of a small dog at 24 inches, a tablet is less than half the size at about 10 inches diagonal. Smartphones are generally around four inches, although they can be as small as two and a half inches – the size of a baby hummingbird. Now you wouldn’t dream of dressing a baby hummingbird in a jumper made for a dog, would you? This means mobile screens are simply too small to view a desktop site properly without huge effort from the reader. Functions such as scrolling in multiple directions are a hassle; opening different windows can be a pain; hovering is out of the question for many touch-screen mobiles and tablets; check-boxes are frustrating; login and password boxes can require a lot of patience; sidebars can take up the whole darn screen; oh, and often, once you’re sufficiently zoomed out to see all the text, it’s too bloody small to read or click.
That sounds like a lot of trouble
But fear not, these obstacles can be vaulted like a very elegant horse over a bed of roses. There is a school of thought that says you shouldn’t bother with a mobile site. Instead, you should simply make your desktop site a lot simpler so that it can be viewed on any device. But that’s effectively limiting all sites to what can be viewed on a mobile, which just doesn’t make much sense. Because as we know, sites don’t just need to look different on mobile, they need to behave differently. This means making each page of your mobile site, including the home page, narrow. Now thankfully, you don’t need to go around with a ruler measuring the size of each device’s screen, creating a different site with tailored dimensions for each. Any web developer worth his/her salt will be able to use fancy coding and metadata so that the site automatically resizes according to the device.
Vaulting the hurdles like a very elegant horse over a bed of roses
No matter what the device, it’s important that users only have to scroll up and down to see more content; otherwise it’s like trying to track a wasp through a pinhole camera. It also needs to be tight, with minimum blank spaces, to make the most out of the limited amount of screen real estate. To make the most out of this space, you should think about creating collapsible menu widgets in the place of sidebars. Don’t get rid of any content, but layer it effectively. Make separate pages for each item so that it’s easy to navigate from a series of anchor menus. Overcome the touch-screen problem by creating bigger targets on the screen for hyperlinks, since the majority of mobile devices use touch screens, and human fingers are podgier than a mouse cursor. Pictures should be economised, reduced in size or eliminated altogether. If in doubt, base your designs less on a desktop website than one of those Baby’s First Phone toys. Because when it comes to mobile, the interface needs to be usable by a fat-fingered baby with jam on its hands.
