Why focus on the mobile web?

This series of patterns discusses the use of lists within the specific context of mobile web design. While the use of lists on the mobile web does not differ dramatically from the use within native applications, there are some significant differences. Most of these stem from the differences in navigation modes.

• Within the S40 browser, clicking the Up, Down, Left, Right navigation keys can only be used to automatically jump between the on-screen links and controls.
• Within the S60 browser, clicking these keys allows you to manipulate a cursor around the screen as you wish; then indicates when an item you are hovering over can be selected.
• Within native applications, these same keys can be custom-mapped to specific behaviours and interactions. For example, in S60 the Left and Right keys within a tabbed view are specifically mapped to (only) enable the switch from tab to tab. No additional navigation or selection of controls can be accomplished using these keys.

Because of these differences in navigation mode, certain patterns that make sense on one platform may not be quite as useful on another. While this article will focus exclusively on the mobile web, we will note theses differences throughout the patterns where possible.

Finally, the article focuses on lists as they are by far the most common way to display and organize controls, data and other content within the mobile interface.

Note: Most guidelines assume the use of HTML elements (ul, ol) to construct the list as these will naturally degrade as a vertical list on less capable browsers.

The following types of lists are discussed on the following pages:

• Mobile Web Design Pattern: Vertical List
• Mobile Web Design Pattern: Horizontal List
• Mobile Web Design Pattern: Grid
• Mobile Web Design Pattern: Tabbed List
• Mobile Web Design Pattern: Expanding List