Responsive design uses CSS media queries, flexible grids, and fluid images to make a single HTML page work across all screen sizes — phones, tablets, laptops, ultrawide monitors. Coined by Ethan Marcotte in 2010, it replaced the old approach of building separate mobile and desktop sites. Today it's the baseline expectation: if your landing page breaks on mobile, you've already lost.
But here's what teams get wrong: "responsive" and "good on mobile" aren't the same thing. A responsive page might technically render on a phone without horizontal scrolling, but still have tap targets too close together, text too small to read comfortably, images that load at desktop resolution, and a form that's painful to complete with a thumb. Responsive is a technical approach; good mobile UX is a design outcome.
Responsive design that actually converts
Test at real breakpoints, not just the ones in your CSS. The most common responsive breakpoints (768px, 1024px) miss the reality that phones now range from 320px to 430px wide and tablets from 744px to 1024px. Test on actual devices, not just browser resize. Touch targets need to be at least 44x44px. Form inputs need to be large enough to tap without zooming.
The most impactful responsive technique for landing pages: don't just reflow the same content. Reorder it. On mobile, your CTA might need to appear earlier in the scroll because users won't scroll as far. Your desktop sidebar testimonials should become inline elements on mobile. Responsiveness should change the hierarchy, not just the layout.