Tips to Help Design Your Website for Mobile Users

Design & DevelopPosted on October 13, 2011

When developing a website, it is important to keep in mind that many of your visitors may be mobile users. Many web users now user their smart phone and tablet devices to surf their favorite websites. This trend is growing and it is too important to ignore as a web designer.

Before we delve into mobile web design tips and techniques, we will run through the basics of mobile web users. Mobile users will not be so much concerned with the functionality of your site (features, scripts and other dynamic elements), as they will be with getting fast, accurate, relevant and well presented content. For example, if your normal website is 1000px wide, when a mobile user views this on their handheld device, they will have to scroll horizontally as they read content. This is not user friendly, and we will talk about how to avoid simple errors like this and make your site “mobile web friendly”.

For example, a mobile visitor is typically looking for a few key pieces of information: directions to your office, a click-to-call phone number or a map of your store locations. What they’re not looking for are lengthy staff bios, information about your corporate philosophy or PDFs of your latest press releases.

1 – Simple Content, Simple Delivery

When visitors come to your site, they want key information only. Depending on the business nature of the website, it is up to you to pluck out the important bits of your site that your visitors will be interested in. Do they need to read author bios? Do they need to fill out contact forms, or can you just place a phone number on your site? These type of questions will help you to simplify your content, and ultimately you will be better equipped for creating an impressive user experience. Some things to keep in mind:

eCommerce: keep your sales process as simple as possible. There should be as few steps as possible between entry onto your website and the final sale.
Services: get rid of those contact forms with 8 different fields and consider using an on-click call phone number. You will want all visitors to have easy access to you.
Portfolio: you don’t need slideshows, and you certainly don’t need stacks of imagery to get your point across. Choose a select number of media to display to visitors. It will be of more benefit you if you keep these images up to date, than it would be to put them all in at once.

2 – Layout and Delivery

The state of technology as it stands means that mobile web users receive slower connection speeds. Ultimately, this means that your site will not load as fast as a standard website. This is actually a good thing, because we’re not wanting to load the site up with high bandwidth content. With this in mind, we need to think about the site structure. How many pages do we need? What will the layout look like?

The main aim is to create user experience, and similar to Apple, its often best to stick to the basics of design. Keeping your site streamlined, with only a few pages for the user to interact with would be ideal. If you are running a blog, maybe consider using less categories, or not displaying post thumbnails. Whatever makes your site easier to use, makes it better to surf!

3 – Avoid Clutter at all Costs!

Unlike a conventional website, we want to avoid delivery of text content. Using whitespace to distribute your content gives a cleaner, sophisticated appearance and ensures that the user will see what they are clicking on. Remember that mobile screens aren’t as easy to navigate as computer screens, and some users may suffer from fat-finger-syndrome, and data entry into tiny touchscreen keyboards can be difficult. One way to get around this is to use dropdown menus where possible, to create checklists for users and to use pre-populated data fields on contact forms if you choose to go down that route.

Amazon offer some great books on mobile web design and user experience design, we recommend these for further reading: