What is responsive web design?

Responsive web design is the practice of building one website that adapts to whatever screen, window or device shows it. This lesson explains why that matters and introduces the three ideas the rest of the course builds on.

One site, every screen

People open your pages on phones, tablets, laptops, large monitors, televisions and in-car screens. They resize browser windows, split screens in half, rotate devices and zoom in to read. You cannot know in advance how wide the space will be.

Early mobile web sites solved this by building a second site, often on an m. subdomain. That meant two sets of templates, two places to fix every bug, and visitors who landed on a cut-down version with missing content. Responsive design replaced that approach: one HTML document, one URL, and CSS that rearranges the same content to fit the space available.

The term was coined by Ethan Marcotte in a 2010 article on A List Apart. His definition rested on three ingredients, and they are still the foundation today.

The three ingredients

1. Fluid layouts

A fluid layout uses relative sizes, such as percentages, fr units in Grid, or flexible Flexbox items, instead of fixed pixel widths. When the viewport changes size, the layout stretches or shrinks with it.

.page {
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

This container fills small screens, stops growing at 70rem, and centres itself when there is extra room. Nothing in it is tied to a particular device.

2. Flexible media

Images and videos have a natural size. If an image is 1600 pixels wide and the screen is 390 pixels wide, it will overflow and force sideways scrolling unless you stop it:

img,
video {
  max-width: 100%;
  height: auto;
}

max-width: 100% lets media shrink to fit its container but never grow beyond its natural size. height: auto keeps the aspect ratio. In lesson 5 you will go further and send smaller files to smaller screens.

3. Media queries

Sometimes stretching is not enough. Three columns that work on a laptop are unreadable on a phone. A media query applies CSS only when a condition is true, such as the viewport being at least a certain width:

.cards {
  display: grid;
  gap: 1rem;
}

@media (width >= 48rem) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

On narrow screens the cards stack in one column. From 48rem upwards they sit in three columns. Lesson 4 covers media queries in depth.

What non-responsive pages look like

You will meet plenty of pages that were not built this way. Learning to spot the symptoms helps you find and fix them.

Here is a typical fixed-width layout that causes several of these problems:

/* Not responsive: avoid */
.wrapper {
  width: 960px;
}

.sidebar {
  float: left;
  width: 300px;
}

On any screen narrower than 960 CSS pixels this creates horizontal scrolling. A responsive version would use max-width instead of width and let the sidebar move below the main content on narrow screens.

Responsive design is also accessibility

Responsive design is not only about phones. A person who zooms a desktop browser to 400 percent sees a viewport roughly as narrow as a small phone. The Web Content Accessibility Guidelines (WCAG) include a success criterion called Reflow which asks that content works at a width equivalent to 320 CSS pixels without scrolling in two directions, except for content such as data tables and maps that genuinely needs two dimensions.

So a well-built responsive layout helps people with low vision just as much as people on small devices. You will test for this in lesson 10.

Content first

A responsive design starts with the content, not with a list of devices. Ask what the page must communicate, in what order, and what a person needs first. Then decide how that content should flow on a narrow screen, and how it can make use of extra space when there is more room.

This way of thinking leads naturally to mobile-first CSS, where you write the simplest single-column layout first and add enhancements as space grows. That is the subject of lesson 3.

What you will build in this course

Across 13 lessons you will learn to make a landing page work from 320 pixels wide to large desktop screens:

• Set up the viewport correctly and write mobile-first CSS.
• Use media queries for width, orientation and user preferences.
• Serve the right image for each screen with srcset, sizes and <picture>.
• Scale type and spacing smoothly with clamp().
• Build layouts that adapt without media queries, and choose breakpoints from your content.
• Handle tables, code and embeds on small screens.
• Test properly, use container queries, build responsive navigation and handle mobile viewport heights.

Summary

• Responsive web design means one site and one URL that adapts to every screen and window size.
• It rests on three ideas: fluid layouts, flexible media and media queries.
• Fixed pixel widths, missing viewport tags and oversized media are the most common causes of non-responsive pages.
• Responsive design supports accessibility, because zoomed pages behave like narrow screens.
• Start from the content and its order, not from a list of devices.

In the next lesson you will add the viewport meta tag that makes mobile browsers render your page at the right width.