The playbook
Responsive Web Design: Checklist
Use this responsive web design checklist before a new release, a handoff, or a scheduled review. Its purpose is to verify the decisions that affect responsive tasks completed without obstruction. Check an actual page or interaction record; a box marked complete without evidence does not show that the customer journey works.
Put the task in context
Test long service names, validation messages, tables, and real images at narrow widths. Prefer reflowing columns to shrinking text. A horizontally scrollable data table can be appropriate, but the rest of the page should remain readable and controllable.
Before you use the checklist
Name the exact item being checked and its purpose. Gather component, viewport, overflow, interaction. If one of those details is unknown, mark it as unknown and assign a way to resolve it. An invented value makes the checklist look complete while weakening every later decision.
Working checklist
| Check | Evidence to keep | Responsible role |
|---|---|---|
| Define flexible layouts and sensible content priorities | A dated observation showing how component was verified | website lead |
| Test long text media forms and navigation at narrow widths | A dated observation showing how viewport was verified | designer or developer |
| Check touch targets zoom and overflow | A dated observation showing how overflow was verified | site owner |
Check the failure path
- Look specifically for this failure: shrinking a desktop layout until text and controls become unusable.
- Reflow content and change composition when space is limited. Record the actual correction, not just the intention to make it.
- Repeat the affected task after the correction and check interaction.
- Make sure the next owner can find the decision and supporting evidence.
Use three outcomes for each check
Mark an item as complete only when the expected behavior or information has been observed. Mark it as incomplete when a required condition is absent. Use not applicable when the condition genuinely does not belong to the chosen scope, and write a short reason. These states keep a review useful without forcing every process into an identical mold.
For example, if the check is “Define flexible layouts and sensible content priorities,” a meeting about the subject is not the evidence itself. Retain the relevant component and viewport, the decision made from them, and the result of checking that decision. The record should allow someone who missed the meeting to understand what changed.
Decide what must be resolved first
An incomplete item that prevents adapt content and interactions to different viewport sizes without losing function deserves attention before a cosmetic improvement. Assign an owner and a next action to that issue. Keep optional refinements visible, but do not let them obscure a failure in the core process.
Close the review
Recheck corrected items and note anything still uncertain. The checklist is finished when the next owner understands what was verified and what remains open. Follow responsive tasks completed without obstruction using a consistent definition so later reviews can connect execution quality with useful results.
Verify the actual visitor journey on a narrow screen and with a keyboard. A design can look complete while hiding an unreachable control or a missing confirmation. Record the task attempted and what happened at the end.
Skip the manual steps. Let AgentixHUB run this for every client.
Start now