1. Cover the viewport range
- Test a compact phone, a large phone, a tablet, and a laptop.
- Add the exact viewport dimensions from analytics or support reports.
- Rotate devices where orientation changes navigation or content hierarchy.
2. Check layout integrity
- Look for horizontal page overflow, clipped controls, overlapping text, and fixed overlays.
- Verify long titles, translated strings, empty states, validation errors, and populated tables.
- Check adjacent widths around each breakpoint, not only the exact preset.
3. Check interaction and access
- Keep touch targets comfortably usable and controls keyboard accessible.
- Verify accessible names, image alternatives, heading order, focus visibility, and intentional motion.
- Test forms, menus, dialogs, sticky elements, and critical navigation at every representative width.
4. Compare and document
- Overlay the approved design where visual fidelity matters.
- Capture the failure with enough surrounding context to make it reproducible.
- Include the affected viewport, expected result, actual result, and any relevant constraints in the handoff.
5. Finish on physical devices
Responsive emulation creates a fast development loop. Validate critical journeys on physical devices and target browsers before release, especially interactions involving keyboards, safe areas, scrolling, and operating-system UI.
Need help choosing between viewport testing and full device emulation? Read the mobile view and responsive device emulator guide.