A few mobile web design basics

Recently, I was craving a Nando’s burger but had no menu or phonebook. Easy I thought – just go to their mobile site, find a menu and the number of the nearest branch. If only it were that easy!

Nando’s first mistake was not detecting my mobile browser, thereby subjecting me to their second mistake – a site built entirely in Flash. So not only could I not see their menu, but I couldn’t even get their phone number! Google rescued me by finding the number on the site of a local bed and breakfast. Utter failure.

With mobile net access surpassing desktop access last year in South Africa, it is so important that you have a solid mobile offering. You need a site that targets your users’ needs and gives them what they want in the quickest time possible. Here’s how.

Limitations

It may sound obvious, but mobile is very different from desktop. The first thing to think about is the limitations of your delivery mechanism. Right now, most people access the net from what Gizmodo lovingly calls dumbphones, which generally have the rendering capabilities of desktop browsers from a decade ago. Although smartphones are growing in number, you still have to tailor your site to the widest possible audience. So:

• Use a browser detection script: When a user visits your site they should be served a different version depending on their handset capabilities. Facebook’s Desktop/Mobile/Touch options are a great idea.
• Keep the page weight down: The W3C recommends a page under 20kb! This helps the user by making it fast and saving bandwidth costs. Ruthlessly cut out unneeded graphics and compress those that you keep. Saving as 8bit GIFs works well.
• Use web standards: Don’t use proprietary formats like Flash or PDFs as most devices will not be able to render them. I’ve come across many restaurant sites that put their menu up as a PDF.
• Don’t use Javascript: Most mobiles can’t render it.
• Design for a small screen: Don’t use subtle colours or graphics that would be lost on the user and may just end up increasing the weight of the page. Don’t use light text on a dark background because it’s really difficult to read in bright surroundings. Use different line thickness and colour as a good way to separate sections. Make sure all of this degrades gracefully on devices with lower capabilities.
• Design with only one column: Mobile sites need to be able to stretch to the width of the device’s screen. Take care not to use tables or fancy layouts as they will be jumbled by the browser.
• Baby steps: Break down complex functions and inputs (such as inputting into forms) into small steps. You don’t want the user to lose all of his inputted data halfway thru a process because of network or browser issues.

Needs

You need to build a brand and they need to get their info quickly and easily. Their needs should be put first in any design, be it a web or mobile site.

• Know your user: What are their goals? Your job is to help them achieve these goals quickly and efficiently.
• Context is king: Understand how location plays a role in their needs. That said, your mobile site should provide a similar brand experience to your desktop site.
• Don’t bore them: Brevity is key. Avoid using your mobile site as a brochure site.

Some good examples

• New York Times: A very dense site that dispenses with weighty graphics and focuses purely on content. From an aesthetic standpoint it works because it echoes the mainly text-based newspaper.
• Facebook: They have perfectly been able to compress the vastly functional site down to its most contextual tasks whilst maintaining its branding.
• The Times Live: The very graphic separation of the content makes it easy to differentiate sections from each other. The colours and graphics link it to the desktop site.
• Amazon: Like Facebook, Amazon is able to condense a big site into its most core functions. Unlike Facebook, you can sign up to the service entirely on the device – no need to visit it on a desktop machine.
• Flickr: Although there are some rendering errors which leave large spaces, you can browse all of the photos quickly and easily.

Some bad examples

• Gizmodo: Strips down the site so much that all you see is headlines. The only thing you see on the homepage are headlines which are not very enticing. And the articles are so badly paginated that you spend your life clicking through to the next page. One of Gizmodo’s great strengths is the entertaining user comments which are not very well done here.
• Vodacom: Does not detect my mobile browser so takes me to the desktop site. Pretty poor for a mobile service provider.

Designing a mobile site that works across many devices requires focus on the user and their needs, which will provide a good experience of your brand.