Card Display for iPad ‐ Notes
This page contains investigation notes when working on creating the card display layout. For understanding how we are presenting the layout for our "see all" section and native collection stories, please see Layout Guidelines below. All other context discusses investigation in terms of how we got to the conclusion laid out in Layout Guidelines.
If users tap “See all“ from any section in Home tab (e.g. “editor’s picks” or “our most-read collections”) - they are taken to a dedicated page for that section. Previously, the dedicated page had a single column layout for the cards. It looks fine and legible in small screens but it has big usability issues when seen in big surfaces, such as an iPad (see below). The image takes up the whole screen and it is not the best way to consume content.
The recommendation was to make this layout a 2 column one (in portrait mode) and if possible a 3 column one (landscape).
From this issue, we decided to update the card display for iPad view for both our slate detail (see all) sections and collection stories section, which rely on the same layout logic.
While it was more straightforward to create a 2 column layout in portrait mode and 3 column layout in landscape mode. The ability to view the app in Split View mode added complication. This led to some investigation in terms of whether to show a layout of cards in 1 column, 2 column or 3 column view.
Our current logic as of Monday, August 28, 2023, is as follows:
- Check whether device is using wide layout (based on device being iPad and has horizontal size class of regular).
- Display either the wide layout (2 / 3 column) or compact layout (1 column) depending on requirement in 1.
- If we want a wide layout that has a 3 column grid layout, there are 2 requirements: the view's width length must be large enough (i.e. 800) and the device must be in landscape view; otherwise, the wide layout uses a 2 column grid layout.
Note: original we attempted to use aspect ratio (as shown in the screenshots), but ultimately with width length was a better indicator on which layout to use
Landscape (iPad)
Portrait (iPad)
Other
- Cards Display Ticket: https://getpocket.atlassian.net/browse/IN-1577