Responsive web design is an approach in which a single website adjusts its layout, images and typography to suit the screen it is viewed on, from a narrow phone to a wide desktop monitor. Visitors get one URL and one codebase, and the page rearranges itself instead of redirecting to a separate mobile site.
The Three Technical Ingredients
The method rests on three techniques working together.
- Fluid grids: columns sized with percentages or flexible units rather than fixed pixel widths, so they stretch and shrink with the screen
- Flexible media: images and video that scale within their containers, for instance by limiting their maximum width to 100 percent
- Media queries: CSS rules that apply only above or below chosen screen widths, allowing the layout to change
A viewport meta tag in the page head tells mobile browsers to use the device's real width instead of imitating a large desktop screen. Without it, the other techniques often fail on phones.
Breakpoints: Where the Layout Changes
A breakpoint is the width at which the design switches to a different arrangement. A three-column row of service cards might become two columns on a tablet and a single column on a phone, while a horizontal menu collapses into a hamburger button. Good breakpoints are chosen where the content starts to look cramped or stretched, not simply to match the dimensions of popular devices, since screen sizes vary widely.
Beyond Shrinking Things
Responsiveness is more than scaling. Touch screens need larger tap targets and enough spacing between links. Phone users may need shorter forms and click-to-call buttons. Large images should be served in appropriately sized files so mobile visitors on slower connections are not downloading desktop-sized assets. Text should stay readable without zooming, and tables or wide diagrams need a plan, such as scrolling horizontally inside their own container.
Performance is part of responsiveness too. Serving the same large hero image to every device wastes bandwidth on phones, so developers use responsive image techniques, such as providing several image sizes and letting the browser choose the most suitable one, along with modern formats like WebP where they are supported.
Responsive, Adaptive and Mobile-First
These terms are related but not identical. Adaptive design serves a handful of fixed layouts chosen for specific screen widths, whereas responsive layouts flow continuously between sizes. Mobile-first is a working order: design the smallest layout first, then add complexity for larger screens. It is often combined with responsive techniques.
Testing Before Launch
Browser developer tools can simulate many screen sizes, but they cannot replace checks on real devices. It is worth testing portrait and landscape orientation, slow connections, and at least one iPhone and one Android handset, and confirming that menus, forms and pop-ups work by touch.
Also check the widths between the common breakpoints. A layout that looks right at 375 and 768 pixels can still break at 600, because real devices and resized browser windows land on every possible width.
Responsive layouts are part of our website design work. Related concepts include Core Web Vitals, which measure how pages perform for real visitors, and frontend development.