Problem
Preview on 3D touch is slow to load. This is because we are using a web view.
Proposed solution
Make a special view for previews that we can load quickly.
Design
The preview adapts the card format we use for Because you read in the feed.
This both maintains design consistency and allows for reusing/adapting already existing components.
Initial 3D touch brings up the article preview card, followed by swipe to show actions
Lead image, 1 line title, 1 line Wikidata | Image, 2 line title, 2 line Wikidata | No image, 2 line title, 2 line Wikidata | No image, 1 line title, 2 line Wikidata |
Zeplin: https://zpl.io/ag8GjQA | Zeplin: https://zpl.io/aRMNexp | Zeplin: https://zpl.io/bAmGL7o | Zeplin: https://zpl.io/VQ0Wkvk |
Design details
- Title and Wikidata descriptions utilize the same truncation (2 lines for each) as on the Because you read feed card
- Gray background increases in height to accommodate longer title / description strings (up to 2 lines each)
- Image is capped at 150px (same as Because you read card)
- If no image is available, no image is shown
- Text is truncated at first paragraph or 135px in height