Responsive web design is an approach to building websites so that one page adapts its layout to the screen it is viewed on, from a small phone to a wide desktop monitor. Instead of separate mobile and desktop sites, a responsive site uses flexible layouts, flexible images and CSS media queries to rearrange the same content for each screen size. It is now the default way websites are built, and the approach Google recommends.
Where responsive web design came from
The term was coined by designer Ethan Marcotte in an article titled “Responsive Web Design”, published in A List Apart in May 2010. At the time, the iPhone was three years old, and many companies were building a separate “m-dot” mobile site alongside their desktop site. Marcotte proposed one site that responds to the device, built on three ingredients:
- A fluid grid: layout widths in relative units (percentages) instead of fixed pixels.
- Flexible images: images that scale within their containers.
- Media queries: CSS rules that apply only when the screen meets a condition, such as a minimum width.
Those three ideas still describe how responsive sites work, although the CSS tools have improved a lot since.
The core principles
Content adapts, it does not disappear
A responsive page shows the same content on every device, rearranged to fit. A three-column layout on desktop becomes a single column on a phone, a horizontal menu becomes a menu button, and a large table might scroll inside its own box. Hiding important content on mobile is a common mistake, especially since Google indexes the mobile version of pages.
Layouts are fluid between breakpoints
The layout stretches and shrinks smoothly with the screen, and changes structure only at a few widths called breakpoints. Choosing those widths well is its own topic: see responsive breakpoints.
Mobile first
Most responsive sites are now built mobile first: the base CSS is the phone layout, and media queries add complexity for larger screens. This tends to produce simpler CSS and faster mobile pages. More in mobile-first design.
Touch and screen density are part of “responsive”
Responsive design is not only about width. Phones are used with fingers, have high-density screens, and switch between portrait and landscape. A responsive site has tap targets large enough for a thumb, sharp images on high-density displays, and layouts that survive rotation.
Responsive vs adaptive design
| Responsive design | Adaptive design | |
|---|---|---|
| Layout | One fluid layout that changes at breakpoints | Several fixed layouts, one per device class |
| Between sizes | Stretches smoothly | Jumps to the nearest fixed layout |
| Device detection | Not needed; CSS reacts to the viewport | Often uses the user agent on the server |
| Maintenance | One codebase | Several templates to keep in sync |
| Typical use today | Almost all websites | Some large sites and apps with very different mobile needs |
“Adaptive” is sometimes used loosely to mean the same as responsive. The useful distinction is fluid versus fixed layouts, and CSS-based versus server-based adaptation.
How responsive design is built today
Modern CSS makes responsive layouts much easier than in 2010:
- The viewport meta tag tells mobile browsers to use the device width. Without it, nothing else works. See the viewport meta tag explained.
- Flexbox and CSS Grid create layouts that wrap on their own.
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))produces a card grid that goes from one to four columns without a single media query. - Media queries change the layout at chosen widths, and also respond to orientation, dark mode, reduced motion and input type. Syntax and examples: CSS media queries guide.
- Container queries let a component respond to the width of its own container instead of the whole screen, so a card can look right in a sidebar and in a main column.
- Fluid typography with
clamp()scales headings smoothly with the screen. - Responsive images with
srcsetandsizeslet the browser download a file sized for the screen.
Frameworks such as Tailwind CSS and Bootstrap package these techniques with predefined breakpoints.
Examples of responsive patterns
- Column drop: columns stack one by one as the screen narrows.
- Off-canvas navigation: the menu slides in from the side behind a button on small screens.
- Priority content: on mobile, the key action (search, “Book now”) moves to the top.
- Responsive tables: tables scroll horizontally in their own container, or turn rows into cards.
- Art direction: a different crop of an image on mobile using the
<picture>element.
How to test a responsive website
Test at several widths, not only “phone” and “desktop”. Drag a responsive viewport in Chrome DevTools to find where layouts break, then check named devices with their real user agents and pixel ratios. A one-click mobile view such as Mobile View Extension is useful here, since it shows the same page on device presets without opening DevTools. Finish on real phones. The full method is in how to test responsive design.
Frequently asked questions
What is the main goal of responsive web design?
To give every visitor a usable, readable page with the same content, whatever the size of their screen, from one codebase.
Is responsive design the same as mobile friendly?
Responsive design is one way to be mobile friendly, and the most common. A site can be responsive and still not mobile friendly if, for example, its buttons are too small or it loads slowly on phones. See how to make a website mobile friendly.
Who invented responsive web design?
Ethan Marcotte introduced the term and the approach in 2010 in an A List Apart article.