I once reviewed a site for a client that looked genuinely great on the iPhone it was designed and tested on, and fell apart on almost everything else — a Samsung with a slightly different aspect ratio, an older iPad, a laptop with a smaller-than-average screen. Nobody had done anything wrong exactly. They'd just tested on one device, assumed "responsive" meant "resizes," and shipped it. Responsive design that only works on the device you tested on isn't really responsive — it's just coincidentally fine on one screen.

Real responsive design is less about making things shrink and more about designing for a range you can't fully predict in advance.

Design for content, not for specific devices

The instinct to design around "iPhone size, iPad size, desktop size" is understandable but slightly backwards. Device sizes change constantly — new phones ship with new dimensions every year, foldables exist now, browser windows get resized to arbitrary widths on desktop. Designing for a fixed list of device breakpoints means the design is already out of date the day a device outside that list becomes common.

The more durable approach is to let the content and layout tell you where a design needs to adjust — when text lines get too long to read comfortably, when a grid of cards would need to squeeze too tight to stay usable, when navigation runs out of horizontal room. Set breakpoints where the content actually needs them, not at a fixed set of device widths that happen to be popular this year.