6 Best Practices When Designing For The Mobile Web

Add Your Comments

Mobile web design may still be in its infancy but with a predicted 1.7 billion mobile internet users by 2013, you can’t afford not to have a mobile website. Although it hasn’t been around long, a few hard and fast rules for best practice development and optimization have been established. If you’re ready to jump on the mobile web bandwagon and develop a site that is truly portable and looks great on mobile devices such as iPhone, BlackBerry and iPad, make sure you can brief your designer and make an informed choice by studying these mobile web best practice tips first…

1. Prune Back Your Content

If your mobile site is simply going to be a pared down version of your main website, the very first compromise you need to make is to accept that less is more. The small screens and trickier navigation on mobile devices mean tracts of text simply won’t cut it. Pruning down the amount of content you present on your mobile site is the best way of making the site usable and useful.

On a small iPhone screen, every pixel counts. Therefore, only the bare bones of written words are needed. Keep product descriptions short, corporate information succinct, and remove any surplus text such as archive news pages that don’t serve a mobile purpose.

Keeping text count small will also help to ensure that pages load quicker; making it more likely your mobile viewer will wait for the page to load before giving up and going elsewhere. For mobile users time is money and having to wait and potentially pay for lots of surplus data will do little to win your audience over.

2. Consider The Limitation Of Mobile Devices

There’s no doubt most of us would be totally lost without our cell phones, but they are not infallible and their shortcomings are quite apparent when trying to browse the mobile web  — small keyboards, restricted access to punctuation and fiddly mouse navigation using trackballs can make surfing the web a pain rather than a pleasure.

You can up your site’s usability factor by considering these limitations when designing your new mobile website – lengthy forms for example asking for name, email, phone number, address, message are time consuming at best and impossible at worst when completed on a mobile device. Revise your standard form design for the mobile version of your website and include just one or two fields – mobile phone number and name being the most important. The rest of the information you can complete when you follow up the inquiry.

3. Simple Navigation Equals Greater Exploration

The absence of a real mouse or pointer device on the mobile web can make navigating around a page a very frustrating, time consuming and difficult task. While the traditional website may incorporate any number of navigational structures and will often use at least two or three navigation structures on any given page, a back-to-basics approach is best on mobile websites.

Basic navigation to primary pages should be placed at the top of the page in a single line of links if possible. Additional links can be placed in the footer if needed; however, keeping page content within the field of vision without the need for scrolling is preferable.

Layouts using tables are also best avoided according to W3 guidelines, as the limited size screen can result in viewers having to scroll to view each line of text both horizontally and vertically, making the page difficult to use.

4. Forget About Zoom

It is easy to scroll down big web pages when accessed via a desktop or laptop computer. When a large page is used as part of a mobile website, the need to scroll left and right, up and down makes for an awkward and frustrating user experience. Large pages will also be shrunk to appear on a small screen, meaning the user will have to zoom into the area they wish to see. Again, without the benefit of a fully functioning mouse, this can be difficult – keep pages within device capabilities and forget about the zoom function.

The W3 guidelines for mobile web design state that it is best to limit scrolling to one direction when providing access to page content. If an image is too large to be seen simply by scrolling down the page and requires scrolling to the left or right, consider placing it on a page of its own and using a thumbnail only on the main screen.

5. Increase Conversions By Saying Less

While mobile web best practice suggests that keeping the number of superfluous pages low is the most appropriate way forward, keeping the amount of content on a page to a bare minimum is also important. Users accessing a mobile website will very often be looking for a certain snippet of information. Due to the convenience and accessibility of the mobile web, this will very often be related to their location and journey. Keeping text matter of fact and to the point will aid conversions by making it that much easier for the reader to quickly and easily find what it is they are looking for.

When writing copy for your mobile website, stick to the five Ws rule of PR writing – include the who, what, where, when and why in lines one and two. Users wanting more can skip to the subsequent paragraphs, but those pressed for time can find the information they need and carry out the desired action in an instant.

6. Consider A Text-Only Mode

Mobile web design is much like a pared-down, back-to-basics design seen in the first incarnations of traditional web pages. Much like when we depended on dial-up internet access to view the internet, images can cause mobile web pages to be slow to load and can make the viewing experience a costly one. Providing a text-only link removes this barrier.

Designing a mobile version of your website is truly a necessity in today’s rapidly changing technological space. Use these six guidelines as you begin the process, and you’ll be well on your way to entering that space in a way that will be an asset to your online business.

About the Author

Rebecca is the managing director of search engine optimization agency Dakota Digital a full-service agency offering SEO, online PR, web copywriting, media relationship management, and social media strategy. Rebecca works directly with each client to increase online visibility, brand profile, and search engine rankings. She has headed a number of international campaigns for large brands.

Add Your Comments

  • (will not be published)