UI Coach guide
Responsive UI Design
Responsive product UI: what to keep, what to reflow, and how to avoid hiding the real task behind a hamburger.
By UI Coach Editorial ·
Responsive UI is the same product at different widths, not three disconnected sites. The work is deciding which regions reflow, which collapse, and which tasks stay visible because they are the job.
Content priority, then layout
If the primary action disappears below a fold of promotional modules on a phone, the page is not responsive. It is a desktop composition squeezed. Rank content. Then choose columns.
Breakpoints are consequences
Add a breakpoint when the layout fails, not because a device marketing name exists. Tables may become stacked cards. Side navigation may become a sheet. Charts may need a horizontal scroll with a visible cue, or a simplified metric.
Do not use small screens as a junk drawer
Hiding filters, secondary actions, and help behind unlabeled icons makes experts faster and everyone else lost. If a control is needed to complete the task, it needs a discoverable home.
How to judge the work
Responsive work is done when the same job can be completed at a phone width without hunting for a control that only existed in the desktop sidebar, when tables and charts have a planned collapsed form, and when breakpoints were added because a layout failed rather than because a device name appeared in a marketing deck.
Practice this on UI Coach
Take a desktop challenge and produce a coherent mobile structure for the same job. That is closer to professional responsive work than drawing two unrelated Dribbble shots.
Sources
- Nielsen Norman Group on responsive web design