Your website may look tidy on a phone and a laptop while making the same job much harder on one of them. A service detail might disappear inside a collapsed section. A floating button might cover the link someone needs.
A useful responsive website check follows one task through several conditions. You are looking for differences that change what a person can understand or do, rather than insisting that every screen looks identical.
Choose the task and its finish line
Pick something a customer genuinely needs to do. For example: open a service page, confirm whether the work fits their needs, and reach the inquiry page. Write down the starting URL and what counts as completion.
Use the same page content and task for each check. Keep any test information fictional, and avoid creating real appointments or orders. If the journey includes a form submission, arrange the test separately using our contact-form testing checklist.
Make three passes through the journey
- A larger screen with a mouse or trackpad. Follow the task from its starting point. Note the information, controls, and destination you use.
- A phone using touch. Start at the same URL rather than jumping directly to the destination. Check collapsed sections, overlapping elements, and controls that are difficult to select.
- A keyboard and enlarged view. On a computer, try the journey without the mouse. Then increase browser zoom and check the same content again.
A smaller browser window is useful for spotting layout changes, but include an actual phone when you can. Record any device or input method you could not check rather than marking it as working.
W3C’s initial accessibility checks explain keyboard navigation, visible focus, and zoom checks. They provide a starting point, not a complete accessibility assessment.
Compare the meaning and the next action
Look for these differences at each stage:
- Does the service description still include the same important qualifications and exclusions?
- Can you open and close menus or expandable content with the input method you are using?
- Can you tell which control has keyboard focus, and can you move away from it?
- Does a button lead to the same intended destination?
- Does enlarged text remain readable without being clipped or covered?
A two-column section becoming one column is a normal layout change. Missing information is a different issue. W3C’s reflow guidance describes keeping content and functionality available as the viewing area narrows, with exceptions for content that needs a two-dimensional layout, such as a map.
Record a difference someone else can reproduce
Use one short note per issue: page address, device and browser, orientation or zoom setting, input method, steps taken, expected result, and actual result. Add a screenshot if it makes the location clearer. Keep private customer information out of the evidence.
A fictional example: “On the service page in portrait view on my phone, the fixed contact strip covers the final line of the service-area section. On the laptop, the full section is visible.” That is more actionable than “mobile looks wrong.”
Retest the same route after a correction
Repeat the original steps, then check that the change has not disrupted the other screen or input method. Record what you verified and what remains untested.
Imbark’s website support can help you discuss layout problems and practical improvements. Send the task and the reproducible difference so the conversation starts with the behavior that needs attention.
