Run a complete responsive review
This review checks whether a real visitor task survives POM's responsive ranges, content changes, keyboard use, overlays, and dynamic states. Run it after the page works at one width and before launch.
Build the test matrix
Choose the site's critical journeys, such as navigation to contact, form submission, directory filtering, product purchase, or account access.
For each journey prepare:
- signed-out and relevant signed-in states;
- shortest and longest realistic content;
- empty, error, loading, and success states;
- translated content where applicable;
- a real phone or tablet in addition to browser resizing.
Review POM's layout ranges
Test wide desktop, then cross below 992 px, 768 px, and 544 px. Pause immediately above and below each boundary because that is where columns, visibility, navigation, and spacing change.
Do not validate only named device presets; browser chrome, zoom, text size, and the on-screen keyboard reduce the usable viewport.
Inspect the site frame
- Open and close desktop, mobile, off-canvas, and dropdown navigation.
- Confirm focus enters an open panel and returns to its trigger.
- Check sticky and transparent headers against every first section.
- Review subheaders, breadcrumbs, sidebars, footer, contact dock, and cookie controls.
- Confirm no fixed element covers another required action.
Inspect page content
Check heading order, row and column reading order, images, galleries, carousels, forms, tables, filter panels, modals, accordions, notices, and loading indicators.
Device visibility controls remove presentation, not authorization. Essential information needs an equivalent accessible path at every width.
Test interaction and resilience
Use keyboard only, 200% zoom, long translated labels, slow loading, and a failed form or filter request. Rotate the physical device and open the software keyboard inside the lowest form field.
Expected result: the task remains understandable and completable without horizontal page scrolling, hidden focus, clipped messages, or overlapping controls.
Record corrections
Record the exact URL, width, user state, content example, and action. Correct the owning component, template, or design-system setting before adding page-specific CSS.