10 Tips for Designing a Mobile-Friendly Website

Oleg Lola

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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Daniel

    I personally would not build a separate mobile site. Much like the SitePoint website, it should be responsive. Responsive is much more effective for search engine optimisation too. You’ve made some good points though, particularly keeping it simple.

  • Sol

    Google recommends Responsive web design and it’s much easier from a developers point of view.

  • Anonymous

    The transform example looks broken in the latest IE, FF, Chrome & Opera.

  • Anonymous

    I think this is one of the most significant information for me. And i am glad reading your article. But should remark on some general things, The website style is great, the articles is really nice : D. Good job, cheers

  • Anonymous

    very helpful tips, thank you. I noticed many customers are coming to my website each day using their mobile. So now I’m thinking about designing a mobile-friendly version to give them the best experience.

  • Adetutu (Coolidge Solutions)

    i always recommend a simple color scheme when creating a site for mobile make your text as visible as possible as mobile screens are small so a contrasting color between the background and font is advised

  • Anonymous

    I strongly disagree with N°3 has it is almost everytime wrong to do something that the visitor doesn’t want – or at least something we are not sure he actually wants.
    When I come to a URL, event with my mobile, I don’t want to go anywhere else. If I need to see a mobile friendly version of the page, I will look for it myself (provided the webmaster made it easy to find the mobile version).
    Promoting automatic redirection without any explanation or nuance is really a bad, bad advice to give.

    II like the responsive way better, but even this can be a problem if your responsvie mobile site is a less effective version of your site (if you hide buttons and links, for instance).

  • Anonymous

    Thanks for your comments. @gfra54, everything depends on the website, its purpose and content, of course – it may be better to build a separate URL for a mobile website, or you may have responsive design, for example. But the purpose of the website owner and his/her developers is to find out, to know what their visitors would want.