What is responsive web design?

What is responsive web design?

With responsive web design, you build a single website that works well on any device. The page essentially recognizes how much space is available and rearranges itself accordingly: columns that appear side by side on a wide screen stack one below the other on a phone. The user doesn’t need to zoom in or scroll horizontally; everything adjusts automatically.

Where does the term come from?

The term was coined by Ethan Marcotte, who introduced it in 2010 in an article on A List Apart. Before that, organizations often built a separate mobile website alongside the regular one. That meant maintaining two versions, making changes twice, and fixing errors twice. Marcotte proposed creating a single, flexible site that adapts instead. That idea became the standard we now take for granted.

How does responsive web design work from a technical standpoint?

Three techniques work together to get the job done.

Flexible grids.

A grid is the invisible framework on which a page is built. In responsive design, that grid uses ratios instead of fixed dimensions. For example, a column isn’t 600 pixels wide, but rather 50 percent of the available space. If the screen gets narrower, the column shrinks accordingly. This ensures that the proportions remain correct on any screen size.

Scalable images.

Images must scale with their container; otherwise, they’ll break the layout on small screens. A good responsive site also delivers the right image size for each device: a phone gets a smaller image than a wide screen. That reduces load time, and load time is a factor in both usability and searchability.

CSS media queries en breakpoints.

A media query is a rule in the CSS that specifies: these styling rules apply at this screen width. The point at which the layout changes is called a breakpoint. For example, below a certain width, the menu collapses into a hamburger icon, and the columns stack. You choose breakpoints based on where the layout will actually start to break, not based on specific devices.

Responsive versus adaptive (en "reactive").

Three terms that are often used interchangeably, even though only two of them actually exist.

Responsive: scales smoothly.

Responsive design scales seamlessly to any screen using flexible grids and percentages. There is no fixed number of layouts; the page continuously adapts to the available space. This is the standard in modern web design and is generally the easiest to maintain.

Adaptive: fixed layouts for each breakpoint.

Adaptive design works differently: it loads fixed layouts at predetermined breakpoints. Instead of scaling smoothly, the page switches to one of a handful of pre-designed versions. This can be faster in certain cases, but requires more maintenance because you have to manage multiple fixed layouts.

"Reactive": not a technical term; usually means "responsive."

"Reactive web design" is not a common technical term. In practice, people almost always mean responsive web design. Sometimes “reactive” refers to reactive programming techniques, such as those found in React, but that concerns how code reacts to data, not how a layout scales with the screen. If you come across the term, assume that “responsive” is what is meant.

Why is responsiveness important?

The benefit lies in two things at once: usability and discoverability.

Mobile user experience.

On a phone, there’s no room for error. A user who has to zoom in, can’t tap buttons, or has to scroll horizontally will leave within seconds. A responsive site prevents this by adapting to the small screen, with readable text and buttons that are large enough to tap.

SEO en mobile-first indexing.

Google uses mobile-first indexing: the mobile version of your site largely determines your ranking in search results. A responsive website that loads quickly and functions well on mobile devices scores better on Core Web Vitals and user engagement metrics. As a result, responsive design has a direct impact on your search visibility.

Responsive in custom software.

At Cube, responsiveness isn’t an option—it’s a fundamental principle. Every interface is first developed for mobile and then scaled up, because adding elements is easier than removing them. Whether it’s a website or a custom web design within a larger platform: it works on every screen. To learn how web design works as a whole and how the front-end development makes this technically possible, you can read about it in the related articles.