Vertical List
From bemoko developer wiki
Design Pattern - Vertical List
- Summary: Vertical list of content items. Each item may contain multiple elements, such as an link, icon and description.
Contents |
Design
- Related items can be placed on the same line if it doesn't make the content looked too crowded. This can take advantage of real estate on wider devices.
- Text longer than the width of the screen can be left to wrap. If an icon is placed before the text then it is preferable if the all the lines of text left aligns, however this can be challenging on less capable devices.
- Zebra striping can improve readability.[1]
When Used
- List of links or buttons
- Feed of content, e.g. tweets
- Article list - title and short (<140 characters) summary
Rationale
- Most mobile phones are used in portrait mode, with the screen higher than longer. Further more width of a device is often limited
- As a user is clicking through navigation it is more predictable if navigation items are in a single direction.
- Vertical scrolling is much preferred to horizontal scrolling, so by listing vertically you can maintain a predictable page width and let the vertical scrolling deal with variations in the height of page when you have variations in the number of items in the list.
Make it Happen
Image Buttons Variant
<div class="buttons"> <div class="button"><a href="."><img src="/verticallist/imagebuttons/button.png" alt="button1"/></a></div> <div class="button"><a href="."><img src="/verticallist/imagebuttons/button.png" alt="button2"/></a></div> <div class="button"><a href="."><img src="/verticallist/imagebuttons/button.png" alt="button3"/></a></div> </div>
See catalog/ui/root/verticallist/imagebuttons/verticallist-imagebuttons.html and catalog/ui/root/verticallist/imagebuttons/verticallist-imagebuttons.css
Exceptions
No Highlight on Hover
Some devices, such as the SonyEricsson V600i, do not highlight image links when you hover over them. This can be resolved by applying the ImageButtonsRewriter.
In the Wild
