Pattern 57
The task survives a change of screen
Change the arrangement of reading, comparison and tools while preserving state.
Concrete takeaway
Distinguish task-level patterns from their screen-specific arrangements.
Choose an approach
These are editorial decision conditions to validate. Some alternatives are successive states or can be combined; they are not always exclusive choices.
| Alternative | Use when | Tradeoff or requirement |
|---|---|---|
| A · Mobile: reader and sheet | A narrow view should prioritise the passage | Secondary study detail may cover the text |
| B · Large screen: reader and panel | Extra width can use a persistent study panel | Do not reduce the main text to unreadable columns |
| C · Narrower again | The window narrows during a task | Move the panel without losing selection or unsaved work |
The problem
A mobile reader with a bottom sheet and a desktop reader with a side panel may support the same task. Simply stretching the mobile screen wastes space; squeezing a desktop workspace hides text.
The pattern
Distinguish task-level patterns from their screen-specific arrangements. On a narrow screen, prioritise the main passage and use a sheet or a separate study view; on a larger screen, use a labelled side panel or parallel panes when it helps comparison. Base transitions on usable width and text size rather than a device name alone. Preserve edition, reference, selection, notes, playback and linked-scroll preference across resizing. Provide an explicit way to open and close additional surfaces. Do not change reading scope or turn on synchronised scrolling just because the window became wider.
Compare the alternatives
Change the arrangement of reading, comparison and tools while preserving state.
A · Mobile: reader and sheet
The passage remains recognisable behind optional study detail.
B · Large screen: reader and panel
A second surface supports study while retaining the passage.
C · Narrower again
The arrangement changes without losing the task.
Original wireframe proposals · No live controls · Grey rows represent schematic text, not loading states · Labelled placeholders are not Scripture quotations
Download this wireframe as SVGFailure modes
Desktop-only actions; panes that never collapse; resetting selections at a breakpoint; treating landscape as a requirement to split; overlapping fixed controls.
What to validate
Resize during reading, note editing, comparison and playback. Test keyboard and touch, large text, focus restoration and a player reducing usable space.
Research-informed design proposal. These visual alternatives have not been tested with users in this atlas. Source findings, documented behaviour and this proposed adaptation are different kinds of evidence.
Sources and adaptation
This card is an original design synthesis. The following sources inform its content distinctions, interaction approach or review requirements; they do not validate the whole pattern.
- Understanding ReflowOfficial guidance reviewed on 5 October 2026 · Semantic scroll restoration is an original design proposal, not a requirement stated by this criterion.
- Where should AI sit in your UIArticle reviewed · Its role interpretations should be tested with the intended audience; they do not establish universal layout rules.
- Scripture structure documentationRelevant structure and marker references reviewed · A format is not a complete model of app behaviour, annotations or formation.
Common scenarios and flows
- Compare editions across screen sizes — Inspect wording and context while retaining edition identity.
Examples in use
Attributed app evidence with dates and review limits. A screenshot illustrates an implementation; it does not establish that the proposal works for every audience.
Design principles in this decision
Editorial application of Missional by Design. These values frame review questions; they do not validate a pattern’s effectiveness.
- Hospitality — Who can use this approach in their actual context, and what complete alternative exists for someone who cannot?
Compare alternatives using the task and evidence above. Record competing needs instead of treating a principle as an automatic verdict.