Sunday, October 30, 2011

Convert to mobile websites


If you convert a traditional website into a mobile version, it’s important to make sure a number of things happen:

Auto-Detect Mobile Phones. Mobile-friendly websites automatically detect that users are on a mobile device and then display the appropriate version of the site.

Clear Calls to Action. The most important features of the site should be the at the top of the page and should include clear calls to actions.

Avoid Mobile-Unfriendly Elements. The design should avoid mobile-unfriendly elements such as Flash, large images, video, and complex layouts.

Fluidity. Design with a fluid layout that will gracefully adapt to a range of typical mobile screen resolutions.

Touch Interface. Touch screens don’t have hover states — it’s all about fingers tapping, so don’t build a site that requires users to move their mouse over menus or other elements. Also, make sure links and other clickable elements are big enough to tap with a fingertip.

Scrolling. Limit scrolling to one direction — the site should only scroll vertically. Having to manage a page that scrolls horizontally and vertically is difficult to navigate.

One Window. Avoid pop-ups and new windows. A user’s entire experience should take place in a single window.

Use Alt Tags. Sometimes images won’t load, either because of issues with the mobile browser or because a user’s connection is too slow. Always include descriptive alt tags for images, in case they don’t appear.

Simple Navigation. Simplify your navigation. Typically, a site’s traditional navigation is too complex for a mobile site.

Clean Code. Most desktop web browsers allow a lot of leeway when rendering HTML and will usually display a site correctly, even if the code has flaws. Mobile browsers usually have less room for error, so there is an added value to having clean, simple code.

Label Forms. Some modern websites embed form labels inside the form field. On mobile, it’s much more difficult to keep track of the fields, and users often make use of “next/previous” buttons built into they keyboard. Without clear labels alongside the form fields, it might be impossible to know what information is supposed to be in which field.

Escape Hatch. Sometimes users just need to use your normal site. If possible, always have a link back to the original, unoptimized site.

It all comes down to leveraging design and technology to keep things simple, clean, fast to load and easy to digest on the go.

No comments:

Post a Comment