Mobile Web Design Pattern: Horizontal List
This design pattern is part of the Mobile Web Design Patterns series.
2. Horizontal list
A horizontal list of data which can include text and images. Horizontal lists have a somewhat limited use on the mobile web as they can be difficult to read once they begin to wrap. They are therefore best suited to very short lists.
- Best suited for lists containing small amounts of copy and a small number of list items.
- A common use is breadcrumbs which are typically short and also rendered in a small font which minimizes wrapping.
- Other common contexts of use are top (high-level) navigation menus, pagination menus, small control groupings and admin navigation.
Figure: 1. A horizontal list used to create pagination (YouTube). 2. A Horizontal list with background colour to create a primary navigation bar (Betavine) and 3. A horizontal list of breadcrumbs (Mobiforge).
Horizontal lists have several advantages over other formats:
- They can create a natural page division so are useful if needing to immediately establish a hierarchy (ex. the site’s top level navigation).
- They take up less vertical space than other lists.
- If the horizontal aspect of the list is specified entirely using CSS, they degrade naturally into a vertical list on less capable browsers.
- If the list is likely to wrap, test on devices with different screen sizes. Consider adjusting the font size to minimize wrapping and/or increasing the line height to improve legibility.
- Use a background colour to visually separate the list (or list elements) from other elements on the page. This is particularly useful if the list is being used as high level navigation.
- If the page is long and the list is being used for navigation, it’s best practice to place a second copy of the list at the bottom of the page and/or include a ‘back to top’ link.