Open each part when you need it. The note’s wording and sequence are preserved.
01The decision
The Work directory needed a way to compare desktop, tablet, foldable and phone layouts. Squeezing one desktop screenshot into four device-shaped boxes would look responsive without showing responsive behavior. Most cards use a saved renderTurned into the page or experience a person can actually see and use. captured at each width; TAGD and Storyline use saved page embeds that actually reflow.
The control changes the selected local images and the embedded page widths. The previews do not contact the source applications, record analytics or change an account. The foldable option is an open viewport example, not a physical hinge or device test.
02What the labels need to carry
A useful preview says when the source was captured and whether the visitor is seeing a screenshot, a saved page or a live product. Those distinctions help someone inspect the design without mistaking a dated example for current production behavior.
Source fidelity also means keeping awkward evidence. A wrapped phone navigation can become a product follow-up; quietly repairing it inside a portfolio image would make the portfolio less truthful.
03Treat the preview as evidence with a boundary.
Practical checklist
- Use a layout captured at the stated viewport instead of cropping a desktop image.
- Keep capture date, source type and known limits beside the experience.
- Preserve the original source and transformation record.
- Verify the project link separately from the preview itself.
04Four views, one honest limitation
Concrete example
The saved Work previews use 1265 × 712 desktop, 820 × 1100 tablet, 690 × 900 open-foldable and 390 × 844 phone layouts. The narrow views demonstrate browser reflow only; they do not claim physical-device compatibility.