011 min
Why responsive design exists
Picture a designer on the team behind an online store. The store's pages were built for a 1,000-pixel-wide laptop screen, with columns of fixed width. On a laptop they look right.
A customer opens the same page on a phone. Early smartphones assumed that most sites were made for desktop screens, so their browsers claimed the screen was about 980 pixels wide. The phone then draws the page at that width and shrinks the result to fit the screen. The customer sees a tiny copy of the desktop page, and must pinch to zoom and drag sideways to read one line of text.
The team's first fix is the one many teams chose: build a second site for phones, on its own subdomain. In 2010 the designer Ethan Marcotte pointed out where that leads. After an iPhone site, someone asks for an iPad site, and then a site for the next device. Each new screen would need its own site, and each site would need its own upkeep.
So the team needs a different kind of fix: one set of pages that changes its own layout to fit the screen it lands on.
022 min
Where responsive design comes from
Ethan Marcotte gave responsive design its name in an article for the magazine A List Apart, published in May 2010. He described a page built from three technical parts: fluid grids, flexible images and media queries. He added that the approach also asks for a different way of thinking. A designer stops making a separate version of the content for each device and lets one page adjust to each viewing condition.
Marcotte built on earlier work. He had argued for layouts without a fixed width for years, and in 2009 he had published a method for building them. The 2010 article added the missing step: a way to change the layout when the window becomes too narrow for it.
Where the name came from
He took the name from architecture. In his article, "responsive architecture" is a young field that asks how physical spaces can react to the people passing through them. Its architects use embedded robotics and stretchable materials to build walls that bend and expand as a crowd approaches. Marcotte asked whether a web page could react to its visitors in a similar way.
The arithmetic of a fluid grid
A fluid grid is a layout whose widths are proportions of the container, not pixel counts. It is a flexible form of a grid system. Marcotte's 2009 article gives the rule: divide the target size by the size of the context, which is the container it sits in. He first shows it with type. A heading designed at 24 pixels inside 16-pixel text becomes 1.5 times that text size. The same division turns a column into a percentage. In his example magazine page, a figure 306 pixels wide inside a 633-pixel container becomes 48.34 percent, so it keeps its share of the container at any window width.
032 min
How responsive design works
Responsive design uses three parts, and each one fixes a different failure of the fixed page.
| Part | What it does | What it fixes |
|---|---|---|
| Fluid grid | Sets column widths as percentages of the container | Columns that overflow a narrow window |
| Flexible image | Limits an image to the width of its container | A large image that pushes the page wider than the screen |
| Media query | Applies a block of CSS only when a condition holds, such as a window narrower than 600 pixels | A layout that is right at 1,200 pixels and wrong at 400 |
A flexible image usually needs one CSS rule: a maximum width of 100 percent of its container. The image shrinks when its column narrows, and it stops growing at its own size, so a wide window does not blur it.
The media query is the part that changes the shape of the page instead of only its size. In Marcotte's example magazine page, one query takes effect below 600 pixels and removes the floats, so the main blocks stack in one column. A second query, below 400 pixels, changes how the figures sit. The widths where the layout changes are called breakpoints. A good breakpoint is the width at which the content starts to look wrong, not the width of a popular device, because new devices keep arriving with new sizes.
A fluid layout can still fail
Marcotte's own test shows why the media query is needed. His example page scaled well as the window shrank. Below 800 by 600 pixels, though, the illustration behind the logo was cropped and the navigation text wrapped badly. His conclusion was that no design, fixed or fluid, keeps working beyond the context it was made for.
042 min
The viewport tag that responsive design needs
The store team builds all three parts and sees no change on their phones. The phone still reports a width of 980 pixels, so a query that waits for a narrow window never fires. Mobile browsers tend to report a width that is not the real one, and MDN says that without a fix, breakpoints may not work as intended on them.
The fix is one line in the page head, called the viewport meta tag, set to width=device-width. The phone then reports its real width, and the queries start to work. With the true width available, the team can write the phone layout first and add rules for wider windows later. That order is called mobile-first design.
What the first media queries asked
Marcotte's 2010 example query used max-device-width: 480px. That asks about the screen of the device, not the window. Later in the same article his stacking queries use max-width, which asks about the window, and window-based queries are the ones that react when someone resizes a desktop browser.
Browsers that ignore media queries
In 2010 Internet Explorer had no built-in support for media queries. Marcotte kept the flexible grid as the base layout, so those browsers still received a layout that stretched, and he pointed readers to scripts that added partial support. Starting from a flexible base and adding queries is why a responsive page still works when a browser does not understand a query.
051 min
Responsive design at the Boston Globe
By 2011 the approach had reached a large newsroom. The Boston Globe relaunched its website with a responsive design, built by the design firms Filament Group and Upstatement together with a large internal team. The site adds and removes columns as the browser window changes width. On 15 September 2011 the web-standards writer Jeffrey Zeldman reported that the relaunch marked the first major, high-traffic site of its kind to take up the approach.
The reports he collected also gave the business reason. One layout that adapts removed the need for a separate app for each device. For the store team, that is the saving that matters: one site to build and maintain instead of one per screen.
062 min
Newer tools for responsive design
Responsive design has gained tools since 2010, and some of the original steps are now shorter.
Writing a media query two ways
Older queries state a range with two keywords, such as min-width: 30em and max-width: 50em. Newer queries can write the same range with the operators <= and >=, so 30em <= width <= 50em selects windows between 30em and 50em wide. Both forms mean the same thing, and neither one is more responsive than the other.
Layouts that need no breakpoints
A media query is not required. A grid can fit as many columns as the window allows. Take a grid rule that repeats columns at least 200 pixels wide and shares the leftover space equally. As the window grows or shrinks, the number of columns changes with no query involved. The layout reacts to the space it has, not to a width the designer chose in advance.
Container queries: reacting to the parent, not the window
A media query looks at the window. That does not work for a product card that sits in a narrow sidebar on one page and in a wide column on another, because the window is equally wide in both. A container query is an alternative to the media query: it styles an element from the size of its container, where a media query uses the window or the device. The card can then choose its own layout wherever it is placed.
072 min
How responsive design shows up in practice
Layout is only the start of a responsive redesign, because a narrow screen forces decisions about content. The store team works through these:
- What comes first. A phone shows one column, so the team has to rank content. The product and its price go before the sidebar. This is a question of visual hierarchy. Content hidden with CSS is still sent to the phone, so hiding is not the same as removing.
- Navigation. A long menu does not fit across a phone. Many sites fold it behind one control that opens the full list, a use of progressive disclosure. Test with real users that they find the control.
- Touch targets. A finger is less exact than a mouse pointer. Fitts's Law says larger and closer targets are faster to hit. WCAG 2.2 success criterion 2.5.8, Target Size (Minimum), sets a minimum of 24 by 24 CSS pixels for pointer targets, with a few exceptions.
- Hover. A phone has no pointer to hover with, so a menu that opens only on hover cannot be opened. CSS has a media feature,
hover, that checks whether the main input can hover. - Images. The
srcsetattribute and thepictureelement let the browser pick a smaller file for a small screen. Giving each image a width and height reserves its space, so the page does not jump when it loads. - Type. Sizes in relative units follow the reader's own settings. A line that is too long on a wide window is hard to read, so cap its width.
081 min
Responsive design and accessibility
Responsive design also supports people who enlarge a page to read it. WCAG 2.2 success criterion 1.4.10, Reflow, asks that content works at a width of 320 CSS pixels without scrolling in two directions. A 1280-pixel window zoomed to 400 percent gives that same width. A person with low vision who zooms in far gets the single column a phone user gets, and the layout work above is what makes that column usable. Criterion 1.4.4, Resize Text, adds that text can be enlarged to 200 percent without losing content or function. The page must also stay accessible to people who use a keyboard or a screen reader, at every width.
When two-way scrolling is allowed
Reflow has exceptions for content that needs two dimensions to make sense: images such as maps and diagrams, video, games, presentations, data tables as a whole, and interfaces that keep toolbars in view. A wide data table may scroll sideways, as long as the rest of the page does not.
Zoom locks
A viewport tag can include user-scalable=no, which turns off pinch zoom. MDN warns that this stops people with low vision from reading the page. WCAG asks for at least 2x scaling, and MDN recommends allowing up to 5x.
091 min
Responsive design vs. nearby ideas
Responsive design is often confused with ideas that sound alike.
| Idea | What it is | Difference from responsive design |
|---|---|---|
| Adaptive design | A set of fixed layouts, one chosen for each range of screen widths | The page jumps from one layout to the next at set widths, where a responsive page changes continuously |
| Mobile-first design | The order of writing: narrow-screen CSS first, wider rules added with queries | It describes how the CSS is written, not what the page does. A responsive page can be written either way |
| Separate mobile site | A second site, usually on its own address, for phones | It needs two sites kept in step, where a responsive page is one |
The axis that separates them is where the decision happens. In a responsive page, the browser decides from its own width. In an adaptive design or a separate site, the designer decided in advance which layouts exist.
101 min
Where responsive design reaches its limits
Responsive design has limits that the store team meets once the layout works.
Phone toolbars and full-height sections
The team makes a banner as tall as the window, using the unit 100vh. On a phone, the banner runs below the visible screen. The reason is that a phone's address bar and tab bar retract as the person scrolls, so the visible height changes while vh stays fixed. The web.dev team describes a newer set of units, such as dvh, that follows the current visible height. They shipped in Chrome 108, after Safari and Firefox.
One page for every device
A phone receives the same HTML and CSS a laptop does. Large desktop images and unused scripts cost the phone download time. Marcotte himself allowed that a separate site can make business sense when mobile users have a more limited goal than desktop users, so the choice is a judgment, not a rule.
111 min
Applying responsive design
The store team can apply responsive design to a page in five steps.
- Add the viewport meta tag with
width=device-width. - Write the layout for the narrowest screen first, with a single column and percentage widths.
- Widen the browser window slowly. When the content starts to look wrong, add a breakpoint there and change the layout.
- Check the page at 320 CSS pixels and at 400 percent zoom, and open it on a real phone to test touch.
- Check that images load at a size that suits the screen.
The decision to keep is the default. Build one flexible page unless the mobile users have a clearly smaller job than the desktop users. Only in that case is a separate mobile site worth its cost.
?4 questions
Questions people ask
Do I need a CSS framework to build a responsive page?
Which screen widths should I test?
Does responsive design affect search ranking?
Does a responsive page load more slowly on a phone?
§12 sources
Sources
Ethan Marcotte (2010). Responsive Web Design. A List Apart.
Ethan Marcotte (2009). Fluid Grids. A List Apart.
MDN Web Docs. Responsive web design.
MDN Web Docs. Using media queries.
Show all 12 sourcesShow fewer sources
MDN Web Docs. CSS container queries.
MDN Web Docs. Realizing common layouts using grids.
MDN Web Docs. Viewport meta tag.
W3C. Understanding Success Criterion 1.4.10: Reflow (WCAG 2.2).
W3C. Understanding Success Criterion 2.5.8: Target Size (Minimum) (WCAG 2.2).
web.dev. The large, small, and dynamic viewport units.
Jeffrey Zeldman (2011). The Boston Globe's responsive redesign. Discuss.
Google Search Central. Mobile site and mobile-first indexing best practices.
