Responsive design means your website adapts to every screen it meets. But there's a difference between a site that technically reflows and one that actually works on each device. If your "responsive" site is just the desktop layout squeezed into a narrow column, with tiny text and hover menus nobody can hover, you've built a contortionist, not a chameleon.
Where did responsive design come from?
The term comes from Ethan Marcotte's 2010 article "Responsive Web Design" on A List Apart, which combined three techniques: fluid grids, flexible images, and media queries. Fifteen years later the toolbox has grown, but the core idea stands: one site, many faithful forms.
What's changed is the stakes. Mobile devices now carry roughly 60 percent of global web traffic, according to StatCounter, and Google has indexed the mobile version of websites as the primary one since completing mobile-first indexing in 2023. The squeezed-down afterthought version of your site is the version most people, and Google, actually see.
What's the difference between responsive and squished?
A squished site shrinks. A responsive site rethinks. Compare them on the things that matter:
- Layout. Squished: three desktop columns stacked into one endless scroll in their original order. Responsive: content reprioritized for the small screen, with the key message and CTA up top.
- Navigation. Squished: desktop menu crammed into a hamburger, hover dropdowns broken on touch. Responsive: touch-first navigation with the money action visible.
- Images. Squished: the same 2,500-pixel hero downloaded over 4G and scaled down. Responsive: appropriately sized images served per device, so the page is fast where networks are slow.
- Interactions. Squished: 12-pixel text links two millimeters apart. Responsive: fingertip-sized tap targets and inputs that summon the right keyboard.
- Content. Squished: every widget survives the trip. Responsive: ruthless prioritization. Some things earn their place on mobile, some don't.
How do you build genuinely responsive sites?
- Start mobile-first. Design the small screen first and let the desktop grow out of it. The constraint forces clarity. We make the full case in our mobile-first post.
- Let content set the breakpoints. Don't design for "iPhone width" and "iPad width". Stretch the layout and add a breakpoint wherever the design starts to break. Devices change yearly; good breakpoints outlive them.
- Use fluid layouts between breakpoints. Modern CSS (flexbox, grid, relative units) lets layouts flex continuously instead of snapping between three fixed sizes.
- Serve responsive images. Use srcset or your platform's image tools so phones get phone-sized files. This is usually the single biggest mobile speed win.
- Design for input, not just width. A touchscreen laptop and a phone can share a width but not a grip. Assume touch everywhere: no hover-only reveals, generous targets, thumb-reachable actions. More on that in giving thumbs some love.
- Test on real devices. The browser's device simulator checks layout. It can't feel a cramped button or a laggy scroll on a mid-range Android. Your actual phone is your best QA tool.
The experience is the unit, not the screen
Here's the mental shift that separates good responsive work from screen squishing: stop asking "does it fit?" and start asking "does it serve this visitor, in this context, on this device?"
A founder skimming your case study on a phone in a taxi needs the conclusion fast. The same founder comparing you against two agencies on a desktop wants depth and detail. One website, one brand, two honest versions of the experience. When each device gets the version it deserves, nobody ever notices the adaptation. Which is exactly the point.
FAQ
Is responsive design still relevant, or should I build a separate mobile site?
Responsive won. A single responsive site is easier to maintain, avoids duplicate-content headaches, and is what Google expects under mobile-first indexing. Separate m-dot sites are a legacy pattern.
What's the difference between responsive and adaptive design?
Responsive layouts flex fluidly to any size; adaptive designs serve a few fixed layouts at set sizes. Most modern sites use responsive techniques, sometimes with adaptive touches for specific components.
How many breakpoints does a website need?
Usually three to five, but let your content decide. Add one where the design visibly breaks: a line gets too long, a grid gets cramped, a sidebar stops earning its space.