10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland …

Standard practice accepted by most mobile users
Use content adaptation for phones

http://website.mobi
http://mobile.website.com
http://website.com/mobile
http://website.com/m

A mobile web site needs to be user-driven. Know why your user visits your web site and provide only those features in the mobile version. Be aware that mobile users need information with minimum interaction.

List the set of functions from the desktop web site you want to port to the device. My suggestion is to take only the top 20 percent of useful features from the desktop web site to the mobile web.
• List the most important features for which the mobile user will open the site while on the move; these should be part of the home page.

Difficult Text Entry so try to avoid and keep Website "Read Only" User most likely will use Mobile with one hand Battery Powered Inconsistent Connectivity
• Restrict your mobile web site to three levels of navigation. A mobile user has a very short span of time; try to get him what he is looking for as fast as possible. Standard search navigation is Search to Result to Detail page. If the user searches for a particular item, the navigation should be Search to Detail page, and at any page the search should be visible for reuse; the user should not need to go back three steps to get to the search.
• Save user settings. This is very important and gives a better user experience by minimizing user interaction. Use the browser cache effectively to remember the user’s last set of configurations.
• Make the functions accessible. Allow maximum interaction—even the basic mobile browser allows for access keys that map the phone keys to the navigation (see case study #4, Flickr). Use them to provide shortcut keys for navigation.
minimizing user interaction.
– cache Information / settings

for all popular mobiles

one basic version optimized for mass-market mobile device and a richer version for smartphones

• Start with a basic version for older mobile phone browsers and then add extra features for the smartphone version. This helps you identify the core features of the desktop web site that need to be ported to the mobile version. Use the 80/20 rule (80 percent of the results comes from 20 percent of the features) to identify the top 20 percent of features.

• Create only two mobile versions, one for the basic phone and one for smartphones, and then optimize the richer version according to your customer’s phone. If you know 80 percent of your users use Nokia phones, optimize the web site for that device and use 100-percent width, which accommodates all other similar devices. Use content adaptation for phones with similar browser capabilities but different dimensions to adapt to a particular device.

There are two simple goals in mobile web design—to accommodate the maximum number of users and devices, and to do that with the least amount of effort.

To achieve this, you have to start with a flexible reference design—the bare-minimum functionality you want in your mobile web page—and then use a standard layout that will work across the devices. Let’s take a closer look at those two concepts.

One Basic versions of a mobile web site optimized for mass-market mobile devices
One Rich Version to accommodates all the Smartphones

Both version optimized for bandwidth—plain text with optimized images.

• Optimize everything. Optimize images for size; a PNG image can be a good trade-off between quality and size. CSS and JavaScript should also be

optimized for size. A number of online optimization tools are available for this purpose. Don’t forget to test after optimization. If you are using JavaScript

libraries, try to reduce the size by removing the functions you don’t need.
• Reduce server trips by using image sprites and merging CSS and JavaScript in the same page, instead of using additional include files. Chapter 8 goes

into this subject in more detail.

Reduce Server Trips for better user experience
Try to include optimized css and JS in the page.

Standard Layout has Vertical Scroll
layout allows the information to flow linearly downward,
so users can scroll down for more news headlines.

With blocks of information that can be individually displayed on the mobile screen
Grouped into multiple categories
The layout allows the information to flow linearly downward,
so the user can scroll down for more news blocks, headlines, and so forth
no horizontal scroll like the desktop version.

Minimal or No Advertisement
Standard abbreviations are accepted
One Page One Idea

• Avoid the following: Pop-up windows, mouse-hover menus, auto refresh, auto redirects, external links, horizontal scrolling, and frames.
• Ajax functionality, or progressive enhancement, if used sparingly can give a great user experience.
• Testing should be done on actual devices.
There are online services like deviceanywhere.com that enable remote testing on different mobile devices.
• Simplify everything. Use clear, short, simple words for links, buttons, and menus. Standard abbreviations are accepted for titles.
• One idea on one page. Always focus on one idea on a mobile web page. For a news site, a category needs to have a page of its own; don’t try to accommodate everything on a single page with a large vertical scroll.
• Thematic consistency. Keep some level of consistency with the original web site, like logo and color themes to keep the “feel” of the desktop web site. Don’t make drastic changes to the mobile site. If you are targeting a particular phone, use the design guidelines for the phone.
• Color. When using color on a mobile web page, consider the sun, shade, contrast, and brightness a user might face on the move. Use color not only for style but also for function, such as red for alert. But don’t convey important information only by color. For example, even if an error is displayed with red, there should also be text to convey the message.
• Visual aesthetic. Make the mobile web pages visually pleasing. Use visual cues instead of raw data, spaces between sections, only a few colors. One of the suggestions I give to all is to have a high noise-to-signal ratio as your guiding principle. Noise-to-signal here refers to the contrast between unimportant information (the noise) and the important information (the signal). If your color scheme is drowning your important information amidst the unimportant information, change it. Make the color scheme so that the most important information stands out of the rest. It should be clearly visible and more attractive than the rest of the page.

No need for help. Although service web sites provide a simple help for beginners, a mobile web site should be intuitive enough on its own. If you must, keep

the help to one page. And keep text input to a minimum, replacing them with select items on forms where possible.

No need for help or one page help

Keep the width of the navigation set at 100 percent to accommodate devices of different dimensions.
The Smartphone version width is set to 100 percent to accommodate devices with different dimensions.

• Future-proof your mobile web site. Test the site for both portrait and landscape mode, and make necessary changes to ensure the site displays nicely

on both. Often, the proper use of styles (100 percent width) can solve this issue. This helps make the web site future-proof.

10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 @iRajLal

Raj Lal

10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 @iRajLal