What is Responsive Design?
A design approach where the same site adapts its layout to fit different screen sizes — phones, tablets, laptops, desktops.
Also known as: mobile-responsive, fluid design
Responsive design uses fluid grids, flexible images, and CSS media queries to adapt a single codebase to any screen size. It replaced the old "build a separate mobile site" pattern (m.yoursite.com) around 2013 and has been industry standard ever since.
For modern small-business sites, responsive design is table stakes — Google explicitly ranks mobile-friendly sites higher, and the majority of traffic is on phones anyway. The right approach is mobile-first: design the mobile version first, then expand for larger screens. This usually produces cleaner desktop designs than the reverse.
Common responsive-design failures: tap targets under 44×44px, text under 16px on form inputs (causes iOS to auto-zoom), layouts that break at uncommon viewport widths (1024-1199px on iPad Pro), images that don't scale properly. Test on real devices, not just dev tools.
60-80% of local-service traffic is mobile. A site that's good on desktop but bad on mobile is bad, full stop.
Related