What is responsive web design?
The term comes from a 2010 article by the web designer Ethan Marcotte, who proposed that sites stop being built at one fixed width and start behaving more like water in a container. He named three ingredients, and they still define the method: fluid grids, measured in proportions rather than pixels; flexible images, which scale within their containers; and media queries, the CSS rules that change the design at chosen screen widths.
Before it, brands typically had a desktop site and a separate mobile site, often on an m. address, with different content, different bugs and twice the maintenance. Responsive web design replaced that with one site and one address for every visitor. The toolkit has grown since, with CSS grid, flexbox, container queries and responsive images, but the idea is unchanged.
Why it matters
Why responsive web design matters
It is the baseline expectation of a modern website, and its absence is noticed immediately. Visitors on phones, who make up most of the traffic for most brands, either get a site that fits or a site that fights them. Google indexes the mobile version of every page and recommends responsive design as the simplest way to serve it well. And for the business it means one codebase, one content system and one set of pages to keep current, rather than parallel sites slowly drifting apart, each with its own bugs and its own out-of-date prices.
In practice
How responsive web design works in practice
- 01
The build starts with the viewport meta tag, which tells phones to render the page at their real width. The layout is constructed with CSS grid and flexbox in relative units, so it stretches and reflows rather than breaking. Media queries handle the larger changes, such as navigation that collapses into a menu or a grid that drops from four columns to one. Images are served through srcset and the picture element in several sizes, and video is embedded so that it scales with its container.
- 02
Then the site is tested at every width, not only the common ones, on real phones and tablets as well as desktop browsers, in both orientations. Content is checked too, because editors add the things that break responsive layouts: oversized tables, images without fixed proportions, embeds with hard-coded widths. Templates are designed to absorb those, and the content team is shown what to avoid.
At RIOT
Responsive web design at RIOT
riot.nyc is a WordPress site we design and build ourselves, so its responsive behavior is our own work rather than a theme's default. Much of what it shows is film, and a film page has to hold together on a phone held upright and on a wide studio monitor alike, which is a stricter test of a responsive layout than a page of text ever is.
Watch out
What people get wrong about responsive web design
Thinking it is finished at launch. A site is responsive only as long as its content is, and one wide table can undo it. Second, hiding content on mobile to make the layout easier, which also hides it from a search engine that indexes the mobile version. Third, judging it by resizing a desktop browser. Real phones bring touch, slower processors, different fonts and browser toolbars that come and go, and the site has to work with all of them.
