| Page Properties | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
Lists in and of themselves don’t have a specific visual style. But within lists, there are common layout patterns.
...
Discuss grid vs flexbox and how to deliver a centred option (e.g. 3 + 2).
Behaviour
Lists themselves are often guided by the content that exists within them, so don’t specifically have a behaviour though there are some behavioural ‘extensions’ to be mindful of.
Lists are always structural, but can also be semantic. Semantic lists allow for ordered and unordered lists (and potentially definition lists).
Any individual list can be considered critical or optional. A critical list always displays its entire contents and is generally used with the list of the core content of the page (e.g. the main product list on a product listing page. An optional list can display a portion of the list, with the remained revealed through user interaction of list controls.
List controls include carousels, ‘batch loading' and pagination, which are defined separately within this section.
Filtering and sorting are also list controls that fall outside of the MVP.
...
Tracking of list performance for some types of lists is critical to understanding performance. An example is the ability to track list impressions in Google Analytics in a True-View style. This technique requires a data-attributes to log the position that the item sits within the list. This is only relevant to “optional” (cross-sell and up-sell) product lists, not all lists.
Future Expansion
Ordered lists can default to numbering from 1 in an ascending order within the MVP, but if not difficult to extend, offering ordered list flexibility to address the type, start and reverse attributes to give more granular control.
For MVP, we can assume that lists will contain the same type of item (e.g. product cards, testimonials, etc). However we have also seen interaction patterns of brands wanting to “insert” teasers and similar related content within product grids to promote alternate content. This would result in a non-semantic list and a list count that could be inaccurate if those <aside> items were included in the list count. Due to potential complexity, this type of pattern sits in future expansion.
...