Choose widths by behavior
Testing only common device presets misses the widths where layouts actually break. Begin with a wide desktop, a narrow phone, and the exact widths on either side of every major layout transition. Then drag slowly between them to find overflow, awkward wrapping, and sudden spacing jumps.
Compare stable states
- Wait for fonts and images before capturing a comparison.
- Disable nonessential animation or honor reduced motion so frames are repeatable.
- Use the same content, scroll position, viewport, and interaction state.
- Compare full-page rhythm and focused crops for high-detail components.
- Record whether a difference is a defect, an intentional improvement, or dynamic content.
Visual similarity is only one signal
A close image diff can still conceal broken semantics, keyboard traps, missing reduced-motion behavior, or links that go nowhere. Pair visual review with DOM structure, keyboard navigation, automated accessibility checks, and a production build.
Review text expansion as well. Longer labels and user-generated content reveal brittle fixed heights much faster than a perfect reference string.
Use a short release gate
- No horizontal page scroll at supported widths.
- Primary navigation and conversion action remain reachable by keyboard.
- Images reserve space and preserve useful crops.
- Focus, hover, loading, error, and success states are legible.
- Differences from the approved reference are documented.