Pattern 15
Reflow before shrinking
Keep references, text and controls usable when space becomes scarce.
Concrete takeaway
Wrap long labels and move comparisons into a stacked layout.
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 · Large text | Text size or narrow width limits space | More vertical reading is preferable to unreadable type |
| B · Stacked comparison | A comparison cannot fit beside itself | Stacking makes correspondence harder to scan |
| C · Controls stay reachable | Fixed controls consume usable space | Safe areas and final actions need explicit clearance |
The problem
Long identifiers, enlarged text, a keyboard or a persistent player can hide the reading target or its next action.
The pattern
Wrap long labels and move comparisons into a stacked layout. Preserve accessible full references. Account for safe areas, keyboard and player space so the final passage and confirmation remain reachable.
Compare the alternatives
Keep references, text and controls usable when space becomes scarce.
A · Large text
Content flows within the available width.
B · Stacked comparison
A narrow screen does not require tiny columns.
C · Controls stay reachable
Persistent playback does not cover the final action.
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
Tiny text to fit a card; clipped actions; essential information available only through horizontal scrolling; inaccessible abbreviated references.
Bible and faith considerations
WCAG web reflow guidance supports the accessibility requirement; native apps also need platform-specific accessibility checks.
What to validate
Check narrow viewports, 200% text enlargement, screen readers and keyboard-open states. Test very long titles and references.
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 ReflowGuidance reviewed · Some content has defined exceptions; test the actual experience.
- Accessible modal dialog patternInteraction guidance reviewed · Native apps require corresponding platform mechanisms.
- Designing Audio AI People Actually TrustArticle reviewed · The author scopes this to responsible audio AI, not a complete conversational-agent guideline.
Common scenarios and flows
- Read a long passage from a conversation — Inspect complete Scripture without letting an embed take over the dialogue.
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.