The desktop dashboard shrinks to a phone screen, columns disappear and an approval button remains. A supervisor can no longer see the request's date beside its state or identify the record affected after filtering. Responsive design must preserve decisions and action context rather than merely fit components into less space.
Write what employees must understand together
In a fictional venue-preparation workflow, a supervisor reviews a long request name, date and state before taking an authorized action from a phone. This describes neither a customer system nor a completed study. The design question is which information must remain jointly accessible to identify the request and understand the action.
Prioritize intended tasks and connect each to decision fields. A long note might move into detail, while hiding record identity or state can change a neighboring button's meaning. The count of hidden columns is no success criterion: explain every relocation or abbreviation and its task implications.
A brief connecting task and presentation
Send this sheet with representative content rather than an empty dashboard screenshot. Include long and mixed text, similar names, waiting and rejected states so the chosen design does not depend on unrealistically short, ideal content.
| Field | Brief question | Example evidence |
|---|---|---|
| User decision | What must be known before acting? | Clear request identity, date and state |
| Information relationship | What must be read together? | Required fields retain their relationship |
| Action | How is the affected record and permitted action understood? | Known context before and after approval |
| Return journey | What survives details or filter changes? | An understandable position and context |
Identify what stays in the list, what opens in detail and why. When comparing several records is the actual task, users may need to see relationships between them. Turning every row into a separate attractive card can make that comparison harder.
Tables are not prohibited on phones
W3C's Reflow explanation addresses content without lost information or functionality at specified dimensions, with exceptions for inherently two-dimensional areas such as data tables. This does not exempt an entire page or justify removing inaccessible fields.
Compare a usable table within a clearly defined area against details or another structure suited to the task. Do not require cards or horizontal scrolling everywhere. Text, headings and cell relationships still need clarity, and users must understand that additional data is available.
An action target is more than its icon
Nearby view/delete or approve/reject controls can lead to unintended activation and deserve testing. The Target Size explanation covers pointer-target minima and exceptions such as spacing and equivalent controls. Use it to question ease of targeting rather than treat one number as a usability guarantee.
Request a named action and clear affected request before confirmation, plus understandable failure and waiting behavior. These requirements need suitable implementation and testing: a large button in an image prototype establishes neither input-method support nor complete application accessibility.
Test the task after changing presentation
Prepare two similar requests with different dates or states. Ask a participant to find the intended one, open details, return and take the permitted action. Change a filter and examine retained context. A specialist should write the task without supplying the button name as the answer.
Add enlarged text, Arabic/English content and mixed symbols or numbers within the prototype's capabilities. State evidence limits: a clickable prototype does not automatically establish keyboard, screen-reader or unimplemented browser behavior. This article represents neither WCAG certification nor completed user research.
Use prototype selection to choose an appropriate deliverable. Bring the task, fields, action and return map when discussing UI/UX design with Nextwave so the purchased design preserves the work staff need to perform on phones.
Reference limits
W3C's informative Reflow and Target Size explanations were read on 4 November 2026, not the full standards. Prepared with AI assistance and information and translation review.