This post is part of a series on mobile user interface design patterns, excerpted from Designing the Mobile User Experience, John Wiley & Sons, 2007. This second set of patterns will address screen design for mobile applications.
Mobile devices vary in their screen dimension ratios as well as size. Some have a longer horizontal dimension; others are vertical or close to square. Unless a device is QVGA or larger, the screen orientation is an important organizing principle.
Design
A web page or application screen should be designed vertically, using lists or similar mechanisms. Paragraphs wrap, spilling down the screen. Each link should be on its own line. Form controls should be on their own line. Occasionally a pair of closely related controls can go on the same line; consider this a variant on the list theme as opposed to a horizontal layout.
Almost all the example screens in this chapter use a list-based layout.
Applicable Devices and Platforms
Any scroll and select device with a small screen taller than wide and is smaller than QVGA (240 × 320 pixels). Most stylus devices are large enough to support two columns.
When Used
Most non-game screens that do not serve as the main screen of an application; almost all web pages.
Rationale
Most mobile phones are oriented vertically, with screens taller than they are wide. Horizontal layout mechanisms, like side bars, tables, and horizontally-oriented control strips at best will look squished on a mobile phone. Additionally, navigating through these mechanisms on a scroll and select device can be confusing and unpredictable and only variably supported by devices.