Mobile Web Design Pattern: Grid
This design pattern is part of the Mobile Web Design Patterns series.
A series of list items arranged in one or more horizontal rows and/or vertical columns to form a grid.
Figure: This one row grid on the BBC Proms site could easily have been expanded to create a more traditional multi-line grid pattern.
- Use as an alternative to a vertical list containing an icon plus text. Is most appropriate if the text is short and is not expected to wrap.
Grids have several advantages over other formats:
- They often take up less vertical space than purely vertical lists.
- When well executed, they can provide a more interesting visual grouping.
- Be sure to test your grid layout on devices of different screen size and dpi, paying particular attention to the size and ease of selection of each grid item. Be sure not to crowd the list and adjust the gutter between items if needed to facilitate selection.
- Remember that the S40 and S60 browsers have different interaction models. Navigating a grid may take a bit more time or thought than navigating a list—especially if the item you wish to select requires you to traverse many other grid items.