The Breakpoint Myth
The dominant mental model for responsive design goes something like this: design a desktop layout, a tablet layout, and a mobile layout. Apply CSS media queries at 768px and 1024px. Done.
This model produces sites that look correct at three screen sizes and broken at any width in between. It's a snapshot approach in a world of infinite viewports.
What Responsive Actually Means
Ethan Marcotte, who coined the term "responsive web design" in 2010, described it as a fluid grid, flexible images, and media queries working in concert - not as three separate designs stitched together. The fluid part is the part most implementations miss.
Content should flow naturally. Grids should flex. Images should scale. Typography should adapt. The overall experience should feel intentional at any width.
The Mobile-First Imperative
Mobile-first isn't just a buzzword - it's the correct design constraint. Starting with mobile forces you to make hard decisions about what content is truly essential. What survives the constraint of a 375px viewport is the core of your product. Everything on desktop is an enhancement of that core.
Desktop-first design does the opposite: you fit everything in, then struggle to compress it for mobile. The result is compressed, not designed.
CSS Grid and Flexbox Changed Everything
With CSS Grid's 'minmax()' and 'auto-fill'/'auto-fit' keywords, you can create layouts that genuinely adapt without a single media query. A grid column definition like 'repeat(auto-fill, minmax(280px, 1fr))' produces a layout that gracefully moves from 1 column to 5 columns and everything in between.
This is responsive design as behaviour - the layout deciding what to do based on the available space, rather than switching between fixed states.
The Touch Target Problem
Responsive design isn't just visual. Interaction design changes between mouse and touch input. Hover states are meaningless on touch screens. Click targets that work at 40px for a mouse cursor fail at the same size for a finger.
WCAG guidelines recommend a minimum 44×44px touch target for interactive elements. This needs to be baked into component design, not retrofitted.
Images: The Forgotten Variable
Responsive images are more complex than the layout around them. The '<picture>' element and 'srcset' attribute exist for a reason: to serve differently-sized images to differently-sized screens, preventing mobile users from downloading a 2000px-wide hero image.
'sizes' attributes tell the browser what size the image will render at different viewport widths. Art direction - serving different crops at different breakpoints - ensures the subject of an image remains visible on small screens.
Testing on Real Devices
Browser developer tools are useful proxies, not equivalents. Real devices have different rendering engines, different touch characteristics, different performance profiles. A budget Android device often exposes performance issues that Chrome DevTools misses entirely.
The minimum testing matrix: iPhone SE (small iOS), a mid-range Android, an iPad, and a 1280px desktop. Test with real thumbs on real glass.
