One Page, Every Screen

Around half of all visits to websites now come from phones, and the same page also has to work on a laptop and on a monitor three times as wide. Building a separate site for each would mean doing everything twice. Responsive design is the alternative: one page, one set of files, whose layout adapts to the width of whatever screen it is on. It starts with a single line in the head and a habit of designing for the narrow screen first.

Think of water poured into different glasses. It takes the shape of each one without being told how. A page built from normal flow behaves the same way, until something rigid is dropped into it: a box with a fixed width, like a brick in the glass. Most of responsive design is keeping the bricks out.

The Viewport Tag

The viewport, first met in Chapter 3's units, is the area of the browser window where the page is drawn. On a phone, for historical reasons, the browser does not tell the page how wide the screen really is. When smartphones arrived, almost no page was designed for them, so phone browsers pretended to be about 980 pixels wide, laid the page out at that width, and then shrank the whole result to fit the screen. Desktop pages looked like desktop pages, only tiny.

That fallback still happens today, to any page that does not say otherwise. One line in the head says otherwise.

<meta name="viewport" content="width=device-width, initial-scale=1">

This meta element tells the browser two things. The part that reads width equals device width means "lay the page out at the real width of the screen". The part that reads initial scale equals one means "start at normal size, without zooming out". Add it to the head of all three of the site's pages, next to the meta charset line, if it is not there already.

The difference on a phone is dramatic. Without the line, the page is a shrunken desktop layout with text too small to read, and the visitor has to pinch and zoom. With it, the text appears at a normal reading size and the page fills the width of the screen. Everything else in this chapter depends on this line: without it, the phone never reports its real width, so no other responsive rule can respond to it.

Fluid by Default

A page made of normal flow is already responsive. Blocks take the full width of whatever they are in, text wraps at the edge, and nothing needs to know the size of the screen. Percentages and max-width keep that property. The breakage almost always comes from a fixed width somewhere.

.card {
  width: 600px;
  padding: 1rem;
  border: 1px solid black;
}

On a laptop, this card is a comfortable 600 pixels wide. On a phone about 375 pixels wide, it cannot fit: it runs off the right edge, and the whole page can be dragged sideways to see the rest. That sideways scroll is the most common sign of a page that is not responsive, and it is almost always one fixed width.

.card {
  width: 600px;
  max-width: 100%;
  padding: 1rem;
  border: 1px solid black;
}

One added line fixes it. max-width: 100% says the card may never be wider than the space it is in, and when max-width and width disagree, the maximum wins. On the laptop the card is still 600 pixels. On the phone it shrinks to the width of the screen, its text wraps onto more lines, and the sideways scroll is gone. The border-box rule from Chapter 4 makes sure the padding and border fit inside that 100 percent.

Mobile First

Mobile-first is a way of writing CSS: you write the styles for the narrowest screen first, as the default for everyone, and then add rules that switch on only when the screen is wide enough to use more space. The narrow layout is usually one column, which is mostly normal flow, so the default styles stay short.

The opposite order, a desktop layout first with rules to undo it on phones, tends to grow longer: every extra column and fixed width has to be taken apart again. Mobile-first also means the phone layout is one you designed on purpose, not whatever was left over. The rules that switch on at wider screens are media queries, the subject of the next topic.

/* Everyone gets one column */
.columns {
  display: grid;
  gap: 1rem;
}

/* Wider screens get two */
@media (min-width: 40rem) {
  .columns {
    grid-template-columns: 1fr 1fr;
  }
}

This fragment shows the shape, not yet a rule to learn. The first rule is the phone layout: a grid with one column, since a grid with no column list has a single one. The second rule, wrapped in a media query, adds a second column only when the screen is at least 40 rem wide. On a phone the boxes stack; on a laptop they sit in two columns.

Testing Without a Drawer Full of Phones

Chrome DevTools has a device mode that makes the page behave as if it were on a phone. Open DevTools and press Ctrl+Shift+M on Windows or Cmd+Shift+M on macOS, or click the small phone-and-tablet icon at the top left of DevTools. The page now sits in a resizable frame. You can pick a phone from a list, type any width, drag the edge to watch the layout change, rotate to landscape, and the mouse pointer behaves like a finger.

Device mode is close to a real phone, not the same. It uses your computer's browser engine and fonts, and it cannot reproduce how a thumb feels on a small button or how the phone's own browser bars take up space. The honest test is a real phone. The preview server from Chapter 1 normally answers only your own computer, so the most practical way to open your site on a phone is to wait until Chapter 13, when it is published at a real address.