List-based Layout
From MobileDesign
[edit] Applies to:
User Interface: Scroll & select,
Screen input interfaces
Hardware: Screen size > Extra-small - Small - Medium,
Aspect ratio > Portrait
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.
[edit] 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.
Most mobile patterns use a list-based layout.
[edit] When Used
Most non-game screens that do not serve as the main screen of an application; almost all web pages.
[edit] 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.
