10 Tips for Designing a Mobile-Friendly Website

With all the current talk about mobile-friendly websites and responsive design, it’s entirely possible that your company or your clients are considering moving into the mobile space.

Structuring a mobile-friendly website means rethinking the design process for a variety of screens across multiple mobile platforms. While tablets may be able to handle your full website, screens of smartphones are limited in terms of space, and yours is the task of providing their owners with a completely different user experience, which must undoubtedly be positive.

How you achieve that could involve many different steps and approaches. In my experience, however, some basic guidelines have emerged that are common to just about all projects involving design for mobile. Here are 10 tips that may help you.

1. Keep it Simple.

Keep in mind that simplicity is an absolute necessity for a mobile-friendly website. Even for a desktop site, being overloaded with content is often not good. But when a mobile site is heavy, that means no friendliness at all. And to over-complicate a mobile website is much easier.

2. Be Concise.

What’s the purpose of design of a mobile app or a mobile website? That’s getting users where they need as quick as possible, with minimum taps, swipes, and attention required. If a screen can be skipped, skip it – there must be nothing excessive in a mobile website.

3. Open the Door.

But before your visitors even start surfing across your website, they have to enter it. Since the server identifies mobile devices, make sure that mobile visitors are automatically redirected to the mobile page.

4. Consider the Context.

When choosing features and content for your website, do not hurry, think them over, think what your visitors will need and what they’ll look for. It can be a feature of direct communication between you and your visitors (a phone number, a click-to-call, a feature of online booking/reservations etc.). It can be a list of main services with information; you may provide users with locations if necessary. You define what’s necessary in your particular business that must be first brought to the attention of mobile visitors. Remember that actions a person might want to take when using their mobil while out and about are not necessarily the same as when they are using a desktop at home or a laptop in the office. Meanwhile, long bios and other secondary content load must be left out on a mobile version.

5. Keep it Short.

Don’t allow too much text input for users. It’s quite an issue in the world of tablets, let alone smartphones, where typing something that exceeds a tweet, a message or a comment, is painful. Even if you require filling a form for some reason, like signup, make sure it’s short – a login/email and a password, or whatever. Each additional field reduces user satisfaction.

6. Brand it.

Of course you want the design of your website to showcase your brand with logo, colors and style, make it instantly recognizable. There’s always a way of carefully incorporating them into the design, without harming usability.

7. Don’t Overcrowd.

Don’t plan to place too much information on one screen page. That’s going back to crowding the interface and making navigation troublesome. Any visitor must be enabled to easily walk through pages of your site, without any pressure on attention.

8. Be Clear.

Keep your mobile pages as clear as possible. If it’s needed to access the full information on some issue, there can be a link to the full version of your website.

9. Design for the Screen.

Your designers will consult you on making decisions about the looks of your mobile site. These are such rules as proper size of buttons and spaces between them (to prevent tapping a wrong button); avoiding overloading pages with various images; or leaving those intrusive popups behind. All of these and other suggestions will make your website more attractive – because here attractiveness means convenience in use.

10. Test for Compatibility.

Define the range of devices so your website could be properly tested on them: various devices, operating system versions and screen resolutions. Development companies have a storage of mobile devices for testing, so you only have to choose.

If you adopt all, or even most, of these guidelines you will make design for mobile much easier on yourself.

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Jump Start Responsive Web Design.

Comments on this article are closed. Have a question about Mobile Web Development? Why not ask it on our forums?