Responsive web design is an approach to building websites so that pages automatically adapt their layout to suit the screen size of the device — from wide desktop monitors to narrow smartphone screens. It uses flexible grids, fluid images, and CSS media queries to achieve this, so one set of web files serves every device well.

Why does responsive design matter?

In the early days of the web, nearly all internet access happened on desktop computers with wide screens. Web pages were designed at fixed widths — often 960 pixels. When smartphones became widespread from around 2007, those fixed-width pages looked tiny on small screens, requiring users to pinch and zoom to read anything.

Two solutions emerged:

  1. Separate mobile sites — build a completely separate website (e.g., m.example.com) for phones. This doubles the maintenance burden and often delivers a reduced experience.
  2. Responsive design — build one site that adapts to all screen sizes. Coined by web designer Ethan Marcotte in 2010, this approach quickly became the industry standard.

Today, more than half of all web traffic comes from mobile devices. Google's search ranking algorithm favours mobile-friendly pages. A non-responsive website is not just inconvenient — it is a commercial and technical failure.

What are the three pillars of responsive design?

Responsive design rests on three technical foundations:

Pillar What it does Example
Fluid grids Page columns use percentage widths, not fixed pixel widths width: 50% instead of width: 480px
Flexible images Images shrink or grow with their container max-width: 100% in CSS
CSS media queries Apply different CSS rules depending on screen width @media (max-width: 768px) { ... }

Together these three techniques ensure that a layout that uses two side-by-side columns on a desktop screen can automatically stack into a single column on a phone.

How do CSS media queries work?

A media query is a CSS rule that applies its styles only when a specified condition is true. The most common condition is max-width or min-width:

/* Default styles — for all screen sizes */
.container {
  width: 80%;
  display: flex;
  flex-direction: row;   /* columns side by side */
}

/* Override for screens narrower than 600 pixels */
@media (max-width: 600px) {
  .container {
    flex-direction: column;   /* stack vertically */
    width: 100%;
  }
}

When the browser window is wider than 600 px, the default styles apply and content sits in a row. When the browser is 600 px wide or narrower (typical for a phone), the media query kicks in and switches to a vertical stack. This single change makes a two-column layout phone-friendly without any JavaScript.

What are breakpoints?

A breakpoint is the screen width at which a media query triggers a layout change. Common breakpoints map to device categories:

Breakpoint Typical target Example rule
< 480 px Small phones @media (max-width: 480px)
< 768 px Phones and small tablets @media (max-width: 768px)
< 1024 px Tablets and small laptops @media (max-width: 1024px)
≥ 1200 px Desktop and wide screens @media (min-width: 1200px)

Breakpoints are not rigid — they should be chosen based on where your specific layout starts to look awkward, rather than fixed to particular device names (device widths change constantly as new hardware is released).

What is the viewport meta tag?

Without a crucial HTML tag, a phone browser assumes the page is designed for a desktop and scales it down so the whole page fits the screen — making everything tiny. The viewport meta tag tells the browser to use the actual device width and not to scale:

<meta name="viewport" content="width=device-width, initial-scale=1">
  • width=device-width sets the viewport width to match the physical screen width.
  • initial-scale=1 sets the initial zoom level to 100%.

This tag belongs in the <head> of every HTML page. Without it, media queries will not work as expected on mobile devices, because the browser will still behave as if it has a wide desktop-sized viewport.

What is mobile-first design?

Mobile-first is an approach where you write CSS for the smallest screen first, then add media queries to handle larger screens. This is the opposite of the traditional desktop-first approach.

/* Mobile first: default styles are for small screens */
.nav {
  display: flex;
  flex-direction: column;   /* vertical stack on mobile */
}

/* Expand for larger screens */
@media (min-width: 768px) {
  .nav {
    flex-direction: row;   /* horizontal row on tablet/desktop */
  }
}

Mobile-first is now the recommended approach because it forces designers to prioritise the essential content (important on small screens with limited space) rather than retrofitting a desktop design to work on phones.

Frequently asked questions

Do I need to know CSS for KS3 or GCSE computing exams?

At KS3, the national curriculum requires students to understand how web pages are created and how they work. Understanding the concept of CSS (Cascading Style Sheets) as the language that controls presentation, and media queries as the mechanism for responsive layouts, is appropriate KS3 knowledge. At GCSE, some specifications include HTML and CSS in their programming requirements, particularly in project work.

What is the difference between a responsive website and a mobile app?

A responsive website is accessed through a web browser and adapts its layout to any screen. A mobile app is installed on a device, runs natively, and typically has access to hardware features (camera, GPS, push notifications) that a website cannot use without permission. Many modern websites use Progressive Web App (PWA) technology to blur this distinction — PWAs can be installed on a home screen and work offline — but the underlying technology is still HTML, CSS, and JavaScript.

Why do some mobile websites look different from the desktop version?

Some sites deliver genuinely different content or features to mobile users, not just a different layout. A travel website might show a streamlined search form on mobile and a richer interface on desktop. This is sometimes done with separate mobile pages (m.example.com) or with server-side logic that detects the device and delivers different HTML. Pure responsive design delivers the same HTML to all devices and uses CSS alone to change the appearance.

What tools can I use to test whether a website is responsive?

Modern web browsers include developer tools (usually opened with F12) that have a device simulation mode. In Chrome's DevTools, the "Toggle device toolbar" button lets you view the page at any screen size and even simulate specific device models. You can also drag the browser window to any width to watch media queries trigger in real time. This is a quick way to check whether a site is responsive without needing a physical phone.

Build web skills from HTML and CSS to responsive layouts with Professor Turing at aitutors.me.