9 tips for improving your site’s mobile UX
With stats like that, it’s clear the debate over responsive design is over. We called it months ago when Google updated its search algorithm to reward mobile-friendly sites. But simply squeezing your site into a version that fits on a smaller screen doesn’t cut it anymore. As Brad Frost eloquently put it, “Your visitors don’t give a shit if your site is responsive.” They just want something fast and easy to use.
With that in mind, today we’re sharing some tips for enhancing your site’s mobile user experience. If you want to keep your mobile users coming back for more, you need to adapt to the unique ways they access and interact with your content—and that goes way beyond whether or not your theme renders properly on an iPhone.
1. Simplify your navigation.
If there’s one thing you should keep in mind when evaluating your site for mobile friendliness, it’s this: mobile screens are small. A comprehensive menu might look fine on your desktop, but try to cram it onto a mobile screen and you’re going to make a mess. Think about how to shrink menus down to the fewest possible options and you’ll make it much easier for mobile visitors to navigate your site.
2. Simplify and minimize forms.
People hate filling out forms even at the best of times, but take away their keyboard, hand them a tiny touchscreen, and watch them get even more riled up. When creating forms for mobile, include only fields that are absolutely necessary. Make the fields—and the Submit button—big, clickable, and with plenty of space around them. Where possible, keep forms to a single page; where not possible, use a progress bar to show users how many pages they have to click through.
3. Make your calls to action stand out.
This might seem obvious, but so many site admins still expect their mobile users to click a CTA the size of a dust mite to read their content, join their mailing list, or buy their product. Be bold! Econsultancy recommends orange as the ideal colour for drawing attention to a button, and Apple suggests a minimum target size of 44px square. Whatever you can do to make your CTAs more noticeable—short of carnivalesque animations and weird sound effects—do it.
4. Dial down your colour palette.
“Rainbow” might be your three-year-old niece’s favourite colour, but she’s not your web designer now, is she? Your website doesn’t have to be monochrome, but a tasteful white background, plain black text, and one or two supporting colours make for a much more focused and pleasant user experience than, say, this. Yikes!
5. Keep fonts large and legible.
Remember when we said the most important consideration for mobile site design is screen size? Well, in the context of fonts and legibility, screen size is very important. For one, you don’t want your titles to fill the entire screen, or worse, for users to have to scroll down to learn what your article is about. For another, you don’t want the body text to be so small that users have to pinch and zoom to see it. We endorse Typecast’s awesome proportional method: for mobile, headlines should be 2x the body font size; subheads 1.625x (and nothing should be smaller than 14pts).
Of course, the fonts you use have a big impact on legibility too. Our rule of thumb is if you wouldn’t use it on your resume, then you shouldn’t use it on your site. Helvetica? Good. Benton Sans (the font you’re reading right now)? Good. Comic Sans? Bad. Very, very bad.
6. Be brief.
Sometimes, it’s easier to write 1,000 words than it is to write 10. We know. But we also know that nobody’s going to read your rambling manifesto on their phone. Not all of your phrases need to be 140-character sound bites, but try to include a few. Focus your attention on things like titles, slogans, and short, descriptive phrases that get your message across, and try to eliminate those pesky weasel words and redundancies that so often creep into our writing.
7. Let your images do the talking.
When you have a lot to say and not much space to say it, an image is a great choice. The right visual can do wonders for your content, evoking an emotional response that might not have been possible with plain text. Choose images that illustrate and explain, and, if you can, try to use images that complement your site design.
8. Optimize for speed.
Compelling visuals? Good. Giant RAW photos that take forever to load? Bad. Respect your users’ data plans by running your images through a tool like TinyJPG or JPEGmini before adding them to your site. Cache plugins like W3 Total Cache and WP Super Cache are another great way to speed up your site and stay in your users’ good books. They create static copies of your pages and temporarily store them until they’re needed, meaning that if someone’s already visited your site, their browser will require much less “fresh” information to load the page on subsequent visits.
9. Test, test, and test again.
There are dozens of screen sizes out there, and it’s important that your site scales to all of them. Sound daunting? It is if you’re trying to do it all yourself. But what are friends for if not testing the heck out of your mobile user experience? Email everyone you know with an iPhone, Android, Blackberry, tablet and whatever other newfangled contraptions the kids have these days, and ask them to point out your flaws. It might sting a little, but it’s worth it—promise.