Twenty useful tips for dissecting mobile web design

With the current surge in popularity of smartphones and web-capable phones, increased focus has been put on designing for mobile. There are however some marked differences between designing for the web and designing for mobile. Here are some must-have tips which cut through the mystery of designing for mobile phones.

Before You Start.

1. The mobile screen is small, and instead of planning around this, many designers use that fact as an excuse to take shortcuts. You wouldn’t want a website that only takes up a third of your screen, so why do this for mobile? It is a shocking brand experience. Think “mobile” from the start.
2. Avoid thinking along the lines of web-to-mobile site “conversions”. For example, many things are possible on powerful mobiles that are not supported by the majority of devices in the local South African market. Think “reach all our users” from the start.
3. Be very wary of using a content management system (CMS) designed to create websites that can also “spit out” mobile sites. Generally these automated mobile sites only cater for three screen sizes and don’t take into account the more than 6,000 unique handset types accessing the mobile web. Think “handset aware” from the start.
4. Be in tune with the mobile consumer – limited data, limited attention span. Get your message across quickly and cheaply. Think “snack size” from the start.
5. Don’t forget, mobile users want to find things fast. Think “they are hunters, not browsers” from the start.

Golden Design Rules.

1. Keep in mind the phone’s limitations – no mouse, no full keyboard, no monitor. This defines the user experience.
2. Be wary of image-heavy sites. When you use images, work towards square or landscape formats to limit vertical scrolling.
3. Take into account common device screen widths and make sure your banners stay legible (text) and visible (logos).
4. Be clever with your design to keep pages as light as possible. No heavy page (file) size or very long pages – low-end devices will struggle to load these pages quickly (or at all).
5. Avoid web links to non-optimised web content that low-end devices then struggle to load, ruining the user’s mobile experience.
6. Try to keep mobile sites easy to navigate and uncomplicated. A clear top and bottom navigation is key.
7. Lead visitors to the next logical step (e.g. next article, next page) without them having to go back a step to access the content.

User Experience and Testing.

1. Some mobile designers are getting away with dodgy designs as clients often have high-end devices that render the sites well. Make sure you test on low-end devices as well as BlackBerrys, iPhones and other touch-screen devices to see how your site is rendering.
2. Program with the least common denominator principle in mind so that you are not designing web ideas for mobile that will only work on the less ubiquitous high-end devices. Test your site on a variety of actual handsets and do not rely only on emulators.
3. Make sure that your call-to-actions within the mobile site are mobile related – e.g. click to call, send an SMS, go to a mobile-optimised map.
4. Look for personalisation options, where you can reduce the number of clicks required to access common content (e.g. remember my location, set preferences for content types).
5. Ensure site users can send feedback to you easily via feedback forms or site surveys, and then be sure to address and act upon common issues.

Search and Mobile Web.

1. Make sure your site is optimised for mobile search. Register and ensure submission of site maps to Google/Yahoo, and look for popular mobile directories where you can list your site.
2. When your mobile site is up and running, ensure that your main domain redirects to the mobile site when accessed via a mobile phone as search engines blend web results.
3. Use site analytics to understand user behaviour and device limitations. When are people accessing content? How many pages are they accessing? What devices and screen sizes are most common? Factor this into your decision-making over time.