Mobile Web Sites - Design Do and Don't

Article by YouDonkey and protected by CopyScape

Don't - Use external CSS. It requires more download time which is not a good thing
Don't - use drop-down menus (select lists) for navigation. Users won't understand or use them.
Don't - use tabs. They require graphics and tables, making them very time consuming to load. They also require the user to scroll past them to get to content.
Don't - put breadcrumb navigation at the top of the screen. To make it fit on one line, you would have to use graphics (and probably tables). The user has to scroll past them to get to the content. If you use them, put them at the bottom.
Don't - use black or dark background images or colors, including shading regions of the page. Some browsers do not support coloring text, so your page could become unreadable.

Do - Keep navigation simple and consistent. Use only one primary method for accessing content.
Do - use a simple graphic at the top of the page with a navigational icon suggesting what site (using graphic style) and what portion of the site (using graphic detail) the user is at, plus a brief title indicating what page the user is on.
Do - provide a link to your site's home page, preferably at the bottom of the page.
Do - Keep colors and images simple. Remember that your devices are small, have screens that don't necessarily render colors well, and are used in a wide variety of light and glare conditions.
Do - Use high-contrast colors for images and fonts. Users won't be able to see subtle color distinctions, even if their device does support 60k colors.
Do - Avoid background images if possible. Slows down the download time.
Do - Avoid blue and purple colors for fonts. These are traditionally colors of links. This suggestion is even more important on mobile devices than on desktop devices, as some devices will not underline links, and the only coding for a link is the color.
Do - Use the same, simple color palette for all the graphics in your site. This will help ensure a consistent look and feel and contribute to site identity.

Last thoughts
Know how your content is rendered on various devices and various carriers. Maybe some carriers, or the browsers on the phone may allow only validated XHTML tags. This may translate graphics, placement or other various items to be displayed differently. Or the items may not exist at all on a mobile browser. Do the research.

Think thin vertical, not fat horizontal (design from the top down) because most (if not all) cellular devices have a small vertical layout. Keeping the site lean and mean will keep your customers attentive and not argumentative. Avoid navigation bars, tabs, and side-by-side positioning... this goes with the whole "showing up properly" and "attentive" thing.

Think clean and basic. Devices have small screens, small processors, limited memory and restricted text input mechanisms (example: limited buttons). Keep your pages small, your text input reduced, tables minimized (or not used at all), CSS minimized and local.

Use all possible parts of the markup language. Although many devices do not support certain extensions to XHTML Basic, the features can greatly enhance usability. Most cellular devices support the WTAI library, enabling phone calls to be made directly from your page and some browsers support the CSS extension -wap-format-input, allowing you to restrict input in a text field.

No comments:

Post a Comment