What Is Responsive Web Design? A Plain-English Guide

Visit a well-built website on your phone, then open the same site on a laptop. The text, images and menus rearrange themselves to fit each screen. Nobody built two separate websites; the same pages simply adapt. That is responsive web design.

The term was coined by web designer Ethan Marcotte in 2010. He described combining three techniques, fluid grids, flexible images and media queries, so that a single layout could respond to the size of the screen it was viewed on. The tools have improved a great deal since then, and the approach is now simply the standard way websites are built.

This article explains how responsive design works in everyday language, why it matters for your business, and how to check your own site.

The problem responsive design solves

Early websites were usually designed for one screen size: a desktop monitor. When smartphones arrived, those fixed-width pages either appeared as tiny, zoomed-out miniatures or forced visitors to pinch, zoom and scroll sideways to read anything.

Some businesses responded by building a separate mobile site, often at a different address. That meant maintaining two versions of everything, and the two often drifted apart. Responsive design takes a different approach: one set of content at one address, with a layout that rearranges itself depending on the space available.

Fluid layouts

The first ingredient is a fluid layout. Instead of giving page sections a fixed width, designers size them in relative terms, such as a percentage of the screen or a share of the available space. When the screen gets narrower, the columns get narrower too, rather than spilling off the edge.

Modern CSS, the language that controls a website's appearance, has made this much easier. Layout tools called flexbox and CSS grid let items shrink, grow and wrap onto new lines automatically. MDN, the widely used web developer reference maintained by Mozilla, describes these modern layout methods as inherently responsive.

Flexible images

A layout that shrinks is not much use if a large photo inside it refuses to. A common technique is to tell images never to grow wider than their container. On a big screen the image displays at its natural size; on a small screen it scales down to fit, and it never stretches beyond its original size and turns blurry.

Responsive images go a step further. Developers can offer the browser several versions of the same picture at different sizes, and the browser picks the most suitable one for the screen. That way a phone does not have to download a huge image intended for a wide desktop display, which can help pages load faster.

Media queries and breakpoints

Media queries are rules in CSS that apply certain styles only when particular conditions are met, most often when the screen is narrower or wider than a set width. The widths at which the layout changes are called breakpoints.

For example, a hypothetical bakery website might show its menu in three columns on a desktop, two on a tablet and one on a phone, with the navigation collapsing into a menu button on small screens. All of that can be handled with media queries applied to the very same page.

Google's web.dev guidance recommends choosing breakpoints based on your content rather than on particular devices, brands or operating systems. In practice, that means designing for a small screen first, then widening the window and adding a breakpoint wherever the design starts to look stretched or awkward. New devices appear every year; your content's needs change far less often.

The viewport meta tag

One small but essential line of code makes all this work on phones. Historically, many mobile browsers pretended to be a desktop screen roughly 980 pixels wide and shrank the whole page down to fit. That behavior helped old, desktop-only sites, but it defeats responsive design.

The viewport meta tag, placed in the head section of each page, tells mobile browsers to match the page's width to the device's actual screen width. A commonly recommended version sets its content to width=device-width, initial-scale=1. Without it, a site's carefully planned breakpoints may never take effect on phones.

One caution: some sites add settings to the same tag that stop visitors from zooming in. MDN warns that disabling zoom prevents people with low vision from being able to read the page properly, so it is best avoided.

Why it matters for your business

Responsive design is not just about appearances. It affects how easily customers can find your information, contact you or buy from you on whatever device they happen to be holding at the time.

It also matters for search. Google states that it uses the mobile version of a site's content for indexing and ranking, an approach known as mobile-first indexing, and it recommends responsive design as the easiest pattern to implement and maintain. That does not mean responsiveness alone will improve your rankings, but a site that works poorly on phones starts at a disadvantage with visitors and search engines alike.

How to check your own site

You don't need technical skills to do a basic check. Try the following:

• Open your site on your own phone and on a friend's, and try common tasks such as finding your hours or sending a contact form.
• On a desktop computer, drag the browser window narrower and wider and watch whether the layout adjusts smoothly.
• Look for text you have to zoom to read, buttons that are hard to tap, or anything that makes you scroll sideways.
• Check that images, videos and tables fit the screen instead of overflowing it.
• Run a free audit with Lighthouse, which is built into the Chrome browser's developer tools, for more detailed suggestions.

If you find problems, they can often be fixed without a full redesign, although very old sites built around fixed widths may need a deeper rebuild.

Key takeaways

• Responsive design lets one website adapt its layout to any screen size, at a single address.
• It rests on fluid layouts, flexible images and media queries, with modern CSS tools such as flexbox and grid doing much of the work.
• The viewport meta tag is essential for responsive pages to display correctly on phones, and it shouldn't be used to block zooming.
• Google indexes the mobile version of sites and recommends responsive design.
• You can spot many problems yourself by testing your site on a phone and resizing your browser.

Sources

• MDN Web Docs, Responsive web design
• MDN Web Docs, The viewport meta tag
• web.dev, Responsive web design basics
• Google Search Central, Mobile-first indexing best practices