Responsive design uses fluid layouts, flexible images, and CSS media queries to create a single design that adjusts automatically to fit any screen size. The same HTML is sent to every device and the browser applies the appropriate styles based on the viewport width. A responsive layout might display three columns on a desktop, two columns on a tablet, and a single column on a phone, all from the same underlying HTML structure. The visual result changes continuously as the browser window is resized rather than jumping between fixed states.
Adaptive design uses multiple fixed-width layouts, each designed for a specific screen size or device class. The server detects the type of device making the request and delivers the layout designed for that device. A desktop visitor receives the desktop layout. A mobile visitor receives the mobile layout. These layouts can be completely different HTML templates rather than CSS variations of the same template. The result looks the same as responsive design to the end user but involves a fundamentally different implementation approach.
Responsive design has become the strongly preferred approach for most websites for several reasons. Maintaining a single codebase is significantly simpler than maintaining multiple device-specific templates. Google explicitly recommends responsive design as its preferred mobile configuration and uses a mobile-first indexing approach where the mobile version of your site is treated as the primary version for ranking purposes. As device screen sizes have proliferated beyond the three or four categories that adaptive design was built around, the fluid approach of responsive design handles the diversity better.
Adaptive design has specific use cases where it remains appropriate. When the desktop and mobile experiences need to be fundamentally different, not just visually adjusted but architecturally different in what content appears and what functionality is provided, adaptive design allows a more complete redesign for each context. Some enterprise applications and highly complex web tools use adaptive approaches because the difference between the desktop and mobile use cases genuinely requires different interfaces rather than a scaled-down version of the desktop.
The practical reality for most small business websites is that responsive design is the correct approach and is what every major website builder and theme framework implements by default. When working with a developer or reviewing a website design, responsive design should be the assumption. If a developer proposes a non-responsive solution for a new website, ask why and understand the specific justification before agreeing.
Testing your responsive design on actual devices rather than relying on browser developer tools alone is important because touch targets that seem adequately sized in a browser simulation are sometimes too small for real thumb-based navigation, and rendering differences between browsers occasionally produce issues that only appear on specific real device and browser combinations.