A web design approach where the layout adapts fluidly to any screen size. The baseline standard for modern websites.
Responsive design is a web design approach in which a site's layout, images, and navigation automatically adjust to fit the screen size of the device viewing it. A responsive site looks and works correctly on a 4-inch phone, a 10-inch tablet, a 13-inch laptop, and a 27-inch desktop monitor — all from a single codebase, without separate mobile and desktop versions.
Responsive design has been the baseline standard since around 2014, when Google began penalizing non-responsive sites in mobile search rankings. Today, a non-responsive website is not just a poor user experience — it's effectively invisible to mobile searchers on Google, since mobile-first indexing means Google evaluates the mobile version of your site for all rankings.
Responsive design is achieved through fluid grids (layout columns that resize proportionally), flexible images (images that scale within their containers), and CSS media queries (rules that apply different styles at different screen widths). Modern frameworks and CSS systems like Flexbox and Grid make responsive design significantly easier than it was in the early days of the practice.
It's worth distinguishing responsive design from mobile-first design, which is a development philosophy about build order. Responsive design describes the outcome (site adapts to any screen). Mobile-first describes the process (build for mobile, then expand upward). The best sites are both: built mobile-first and responsive across all screen sizes.