Responsive design is a method of building web pages so they adjust automatically to the width and capabilities of the device, from phones to wide monitors. It relies on fluid layouts, flexible images and CSS media queries.
Why it matters
Most traffic comes from mobile devices, and search engines evaluate the mobile version of pages. A responsive page avoids separate mobile sites, keeps one URL per page and prevents tiny text, sideways scrolling and overlapping elements.
Test at real device widths and with browser dev tools, and check touch targets, since a layout that fits can still be hard to tap.
Example
<meta name="viewport" content="width=device-width, initial-scale=1">.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }Common mistakes
- Leaving out the viewport meta tag, so phones render a zoomed-out desktop page.
- Using fixed pixel widths for containers and images.
- Hiding important content on small screens instead of reorganizing it.
Related
- CSS
- HTML
- Web app
- Tool: Core Web Vitals
- Tool: Website speed test
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.