Start from important tasks
Choose a service enquiry, product comparison or another journey that matters to the business. Walk through it at narrow, medium and wide widths. Do not evaluate responsiveness only by whether the homepage looks attractive. The form, navigation, tables and confirmation screens may have different constraints from the hero section.
Use difficult but realistic content
Try long headings, multi-line labels, missing images and unusually large values. Check whether buttons wrap, cards remain readable and important text becomes clipped. Use real translated content if the site supports multiple languages. Fixed heights that look tidy with short placeholder copy can hide information once actual business content is published.
Review zoom and input differences
Increase browser zoom and check that text and controls remain usable. Consider touch targets, keyboard access and hover-only information. A narrow viewport does not necessarily mean a touch device, and a large display does not guarantee precise pointer control. Design the interaction around available input methods rather than assumptions tied only to screen width.
Check layout movement and media
Reserve space for images and avoid unexpected shifts when fonts or dynamic content load. Inspect horizontal overflow and embedded third-party content. Test both ordinary motion and reduced-motion preferences. Record issues with a reproducible viewport and task so the development team can fix the underlying behaviour instead of patching a single screenshot.
Your practical checklist
- Test complete tasks at several widths
- Use long and incomplete real-world content
- Check zoom, keyboard and touch behaviour
- Inspect overflow and loading-related movement
Working through a similar question?
We’re happy to help you find a practical starting point.
Talk to AMGK