---
title: "Responsive Design"
description: "Responsive design lets a page adapt its layout to any screen. Learn how media queries, flexible grids and the mobile-first approach make it work."
url: "https://nodea.io/en/glossary/responsive-design"
lang: "en"
updated: "2026-07-13"
---

# Responsive Design

> Responsiveness is a web page's ability to automatically adapt its layout and content to the screen size of the device on which it is displayed.

**Responsive design** (RWD) is a web page's ability to automatically adapt its layout, element sizes and content to the screen of the device displaying it. The same page looks and works correctly on a large monitor, a tablet and a phone alike — without maintaining separate versions of the site.

## How responsive design works

A responsive build relies on several CSS techniques working together:

- **a flexible grid** — widths defined in relative units (percentages, *fr*, *rem*) instead of fixed pixels, often built on [CSS Grid](https://nodea.io/en/glossary/css-grid) or Flexbox,
- **[media queries](https://nodea.io/en/glossary/media-query)** — rules that change styles once the viewport crosses defined width thresholds (breakpoints),
- **fluid images and media** — scaling to their container and frequently served at multiple resolutions,
- **the [viewport](https://nodea.io/en/glossary/viewport) meta tag** — an instruction telling the mobile browser to render the page at the device's actual width.

Increasingly, teams adopt a **mobile-first** approach: they design the layout for small screens first, then progressively enhance it for larger ones.

## Responsive design in practice

Responsiveness is now a baseline rather than an add-on — in many industries mobile traffic already exceeds half of all visits. It directly affects [UX](https://nodea.io/en/glossary/ux): a page that forces horizontal scrolling or pinch-zooming on a phone frustrates users and raises bounce rates. It also matters for SEO, because Google uses [mobile-first indexing](https://nodea.io/en/glossary/mobile-first-indexing) and evaluates the mobile version above all. Responsiveness is verified on real devices and in the browser's responsive-design mode, checking every breakpoint from phone to wide monitor.

### How is a responsive site different from a separate mobile version?

A responsive site is a single HTML codebase that adapts its appearance with CSS. A separate mobile version (for example m.example.com) is a distinct site under its own URL. Google recommends responsive design because it simplifies maintenance and indexing.

### Does responsiveness affect SEO?

Yes. Since Google adopted mobile-first indexing, it primarily evaluates the mobile version of a page. A non-responsive site delivers a poor phone experience and can therefore lose ranking positions.

## Related

- [Media query](https://nodea.io/en/glossary/media-query)
- [Viewport](https://nodea.io/en/glossary/viewport)
- [Mobile-first indexing](https://nodea.io/en/glossary/mobile-first-indexing)
- [CSS Grid](https://nodea.io/en/glossary/css-grid)
- [UX](https://nodea.io/en/glossary/ux)

---

Languages: [pl](https://nodea.pl/pl/slownik-pojec/responsywnosc.md)  
Site index: [llms.txt](https://nodea.io/en/llms.txt)