Deep dive · 04
What “make it responsive”
actually means
Responsive is not “the screen shrinks by itself”. It is a person deciding what changes, and at which widths. Drag the handle below.
Change the width
Drag the bar below to change the preview width. Watch how the layout rearranges.
Desktop — sidebar visible · four columns · full menu
Nothing “shrinks by itself” — it is the result of someone deciding to collapse the sidebar at 1024px, drop cards to two columns at 768px, and switch the menu to a hamburger at 480px.
Naming the points where it changes
The width at which the layout changes is called a breakpoint.
| Range | Width | Typically changes to |
|---|---|---|
| Mobile | ~ 767px | one column · hamburger menu · tables scroll sideways |
| Tablet | 768 ~ 1023px | two columns · sidebar collapsed |
| Desktop | 1024px ~ | sidebar visible · three to four columns |
“Make it one column on iPhone” — iPhones vary by model. The SE is 375px, the Pro Max 430px.
“767px and below, drop cards to one column and switch the menu to a hamburger.”
Speak in numbers, not device names. And record the breakpoints you chose so the whole project uses the same values.
They sound alike but the quote differs
Responsive Responsive
layout Onethat flexes with the width.
· holds up at in-between sizes
· one codebase to maintain
· the modern default
Adaptive Adaptive
A separate layout for each fixed size .
· can be optimised per size
· several to build = more effort
· Korean m.domain splits belong here
State which one in the contract. Write only “responsive” and you may later be told “but desktop and mobile need to be completely different” — and that is adaptive.
Responsive = one set that flexes. Adaptive = several built separately. The words are close; the work is not.
Things that only break on mobile
The classic cases where something fine on desktop falls apart on a phone.
The icon can be small, but the pressable area must be at least 44×44px.
A button fixed to the bottom ends up behind the home bar. It only appears on iPhone.
On mobile browsers the address bar comes and goes and the height changes. “100% of screen height” jumps. Mention 100dvh to your developer.
Mobile issues only show up on a real device. The mobile mode in browser dev tools does not reproduce safe area or address bar problems.
Now ask for it like this
Please build it responsive. Breakpoints are mobile up to 767px / tablet 768–1023px / desktop 1024px and up, and on mobile use one column · hamburger menu · hidden sidebar.
On mobile, make tables scroll horizontally. The whole page must not move sideways — only the table area should scroll.
Give every button and icon a touch target of at least 44×44px. Keep the icon size and make up the difference with padding.
Apply the safe area to the fixed bottom button. It must not sit under the iPhone home indicator.
For full screen height, do not use 100vh — use 100dvh instead. The height must not jump because of the mobile address bar.
A responsive request has to state what changes and how, range by range. “Make it responsive” on its own settles nothing.
WHY THIS MATTERS
Responsive is not a feature —
it is a list of decisions.
At which width, what changes, and how. Skip those decisions and the developer makes them for you, and then you file a request because the result does not match the design. Writing the decisions down is half the work.