Back to WebStarts Blog

How To Design A Mobile Website

Are you reading this on your mobile phone or a desktop computer? Chances are you're reading it on your mobile phone. Mobile phone useage has become ubiquitous. If you don't have a mobile version of your website you could be missing out on huge amounts of traffic. But creating a mobile version of your website can be tricky. What works on a desktop or laptop doesn't necessarily work on a mobile phone. In this article I'll be providing you with some helpful tips and tricks to creating a mobile version of your website done right.

1. Consider the screen space

The most obvious difference between a mobile phone and a computer screen is the amount of space you have to work with. Mobile phone screens are tiny when you compare them. For this reason you really need to focus on what elements are the most important to put in front of the people visiting your website.

Think about the most important text for your vistors to see. Perhaps it's your headline or bullet points. Whatever the case, you may need to re-arrange some of that text so it's front and center. And there's also a good chance you'll need to remove some of the text altogether.

2. What's most important?

Since you have a limited amount of screen space you'll need to prioritize your content. The most important things you want to convey should be near the top of your page while some things that are less important you may just want to leave off your page altogether.

3. Less is more.

When it comes to displaying your website on a mobile device less is more. Putting less content on your pages will give you the space you need so people like me with fat fingers don't tap the wrong part of the screen. Surrounding important content with plenty of white space will draw the eyes and give it a better chance of being noticed.

4. Make things big

Since the phone screen is small you'll need to make things like buttons and text bigger. It can be difficult to read small text on a small phone. It's easy to tap in the wrong spot when buttons and links are crammed together or not large enough. Make sure any elements that require tapping are big, with plenty of space between them so people can easily navigate your mobile website.

5. One thing, one page.

Reduce the number of actions you want site vistors to take on your mobile pages. It's best if you can make each page about one thing, with one place to click to move foward.

6. Limit the number of fields to fill out.

If you have forms on your mobile website consider limiting the number of fields you're requesting be filled out. For example, instead of asking for first name, last name, email, and phone number maybe all you really need is to get an email address. It's tedious filling out forms on a mobile device so the fewer the better.

7. Reduce the number of images.

Most mobile devices don't render pages as fast as desktops and laptops. Partly because mobile networks are still slower than wired lines, partly because mobile devices have less computing power. Limiting the number of images on your pages will ensure they resolve quickly.

8. Take advantage of phone features.

iOS and Android devices have built in features so when you click on a phone number the dialer is launched, or when you click on an email address the email client opens up. Keep this in mind while designing your site and be sure to take advantage of these features.

9. Test your mobile website on a real mobile device.

When you're working on your mobile website be sure to view it on your actual phone. Desktop browsers don't always render pages the same way as a mobile phone. If you want to know what your site visitors are seeing, you'll need to do your best to recreate their experience.

10. Design for one hand.

It's way easier to navigate on your phone if you can do it with one hand. If your site's laid out in a way your vistors will need both hands to get around you're likely going to lose them. 

Get back to