While designing for mobile may sound limiting compared to the sophistication of designing for desktop-oriented Web sites, there is nonetheless great scope for creating useful and appealing designs for mobile.

You can create rich mobile experiences but care needs to be taken to match the design to the capabilities of the requesting device: a site is only as good as the browser that displays it. Devices and browsers are already very good, and improving rapidly, but you can still expect to encounter hurdles like slow load times, reduced device compatibility and inconsistent stylesheet support.

Designing for the Right Device

1. Feature Phones: These are the most common device type. Feature phones usually come in candy bar, clamshell or slider form. They have a 12-key layout and typically come with voice, messaging and data capabilities. Most feature phones sold in the past three years also come with built-in digital cameras and media players. Companies typically target these phones to the general consumer.

2. Smart Phones: Smart phones share the same features as a feature phone with two primary differences: Its ability to run additional third-party applications and a slightly larger screen. Smart phones typically use a more full featured operating system and companies market them as them as advanced multimedia devices to consumers or as productivity devices to the business sector.

3. PDAs: These devices — evolved from the PDAs of the ‘90s — now often include voice, messaging, and data capabilities. PDAs have much in common with the smart phone but differ in that much of their functionality is primarily oriented towards organizational tasks rather then voice communications. Another difference is that PDAs often include QWERTY keyboard and stylus in place of the 12-key layout on normal phones. They also feature a larger screen that can often switch between portrait and landscape mode.

Feature Phones lead the market by a large margin but bear in mind that the borderline between the Feature Phones and Smart Phones is constantly shifting towards the Smart Phone category – the newest Feature Phones are often equal in functionality to yesterday’s Smart Phones.

Mobile Web Navigation

We are accustomed to a variety of navigation schemes on the Web such as tabbed navigation schemes and menus located on the sides of the main page content. These schemes give us useful visual clues about where we’re located within the site and provide reference points on how to navigate within the site. Obviously, this is more difficult to do in a mobile context because of the mobile devices’ limited screen size and navigation capability constraints. While it isn’t impossible to use desktop style navigation scheme like tabs on a mobile device, they generally do not work as well as they do on the desktop due to the limited device screen size and pointing capabilities.

The preferred and most common method of creating mobile navigation schemes is to use a simple vertical list of options, often assigning and listing the corresponding numbers (0–9) to the accesskeys for keypad navigation. You can design this list in many ways using stylesheets or images. You should consider supporting more advanced navigation methods for higher-end phones to ensure a rich user experience on these devices.

Not only does the desktop Web rely on navigation schemes we have taken for granted, but we also tend to design for it in landscape mode, where the pages are wider than they are tall. Designing for the mobile requires switching the thinking to portrait mode where the content is typically taller than it is wide.