Designing for Mobile
While there is an expectation that some mobile phones, such as the iPhone, are able to provide users with the ability to view and navigate traditional websites, marketers still need to consider providing users with an experience that is optimized for the mobile channel.
The mobile optimization process falls into two categories, content and design.
Mobile Content Optimization:
Marketers need to start by identifying what content will be useful for customers accessing the site via a mobile phone. Many traditional websites are developed to take advantage of the fact that consumers are on a computer accessing the Internet over a browser such as Internet Explorer or Firefox.
As such, websites are often developed with the understanding that they can provide a large depth of information assuming that users can browse to what they are looking for on their terms. However, in the mobile channel users are often looking for specific information that quickly offers them some form of insight or utility based on the fact that they are on the go. They are also limited in that the smaller screen size does not allow for a lot of navigation elements.
The key is in focusing on content that will be of most value to users in the context of being accessed on the mobile phone. In the case of many sites this may include contact/location Information, news updates, and a company overview.
This content should than be prioritized and drive a focused architecture of the information to be delivered on the mobile site.
Mobile Design Optimization:
Marketers also need to evaluate the types of devices be being used by their users. This process can be facilitated through direct customer surveys and/or through the use of secondary research such as ComScore / M:Metrics. Most likely marketers will find that many of the users are not just on advanced devices, such as the iPhone, but also on more mass market devices that are more limited in their ability to serve and view traditional websites.
As part of the design process it is important to understand that large visual elements and interactive features, such as flash, are not conducive to being viewed on a mobile phone. This can lead to the inability for the customer to access relevant information or to abandon the experience all together as they wait for the large files to download.
Marketers should work to develop mobile sites that can deliver an optimized experience based on the phones that are being used to access their content. This process should include developing a mobile site that can dynamically adjust based on the device and the use of device detection that redirects users from the website home page to the correct mobile site destination.
Design:
- Even the best mobile handsets have a fraction of the screen real estate of a PC. Make every pixel count.
- Think portrait, not landscape. Desktop websites are designed in landscape mode, where the pages are wider than they are tall. Designing for the mobile means switching to portrait mode where the content is taller than it is wide.
- Horizontal tabs and columns of text – don’t well work on the mobile. Instead, think of the mobile like a page in a book with a portrait orientation. So use a single column with text that’s left justified.
- Logo should live top left and link back to the homepage.
- The search function should be visible prior to needing to scroll down the page, as this is the most commonly used tool within a mobile site and within a PC/Mac shopping site. There shouldn’t be more than three to four scrolls on any page as a longer page could lead to longer load times and frustrate customers with the page load.
- Ensure that site pages are built to fit across the broad spectrum of all size phones.
Navigation:
- Category navigation should be simple and visible prior to needing to scroll down the page.
- Break down the categories into thorough sub-categories in order to make the site as user-friendly as possible and to eliminate the need for long scroll pages with long download times.
- On your notices, have “layered notices” to let the main points of terms, conditions and privacy laws be a short line with a link to direct the user back to the main PC/Mac site for more extensive details. This offers a comfort level to users that all privacy laws are adhered on your site.
- The “Contact us” link should be visible from all pages. Use drop-down menus whenever possible to make the most use of the small space across the mobile canvas
Usability:
- Make your site searchable. You only get one shot at having a search engine find your mobile site, since you only get one entry in the Internet Zone files – the files search engines use to start every crawl.
- There’s no mouse. Moving up and down is fine, but navigating around a screen is no fun on a mobile.
- There’s no printer. So don’t ask people to print things out.
- The keyboard is limited. PC users don’t mind filling out long forms or writing whole paragraphs. Mobile users hate it. Keep the typing to a minimum.
Optimization:
- Bandwidth may be restricted. Mobile networks are catching up fast, but many mobile devices still fall short of broadband speeds. Keep pages, images and file sizes small. All imagery should be optimized for a mobile environment, not the PC/Mac environment. WAP will not do this for you, neither will an extension such as .mobi
- Megabytes sometimes cost money. Flat data rates are increasingly the norm but some plans charge by the megabyte. And even flat data plans may incur charges when roaming. Users won’t appreciate your wasting their money.
