Responsive design

More than half of all web traffic comes from phones. A page that looks great on your laptop but is impossible to use on a phone is a page that most visitors won't stick around on. Responsive design means building pages that adapt to whatever screen they're on.

The good news: you've already done a lot of it. max-width, rem, flex-wrap and that auto-fit grid all adapt by themselves. In this lesson you'll learn the last few pieces.

Remember this line from the HTML course?

Without it, phones pretend to be a wide desktop screen and shrink the whole page down so it's tiny. With it, the page uses the phone's real width. Every responsive page needs it, and the ! shortcut in VS Code adds it for you.

A big image can easily be wider than a phone screen, which makes the whole page scroll sideways. One rule fixes that for good:

max-width: 100% means an image is never wider than its container, but it can still be smaller. height: auto keeps the proportions right so it doesn't get squished. Put this near the top of every stylesheet.

Sometimes a layout needs to actually change at a certain screen size. Maybe the menu should sit on its own line on a phone. That's what media queries are for. They apply CSS only when a condition is true:

Read it like this: by default, the header items are stacked in a column. When the screen is at least 700 pixels wide, they switch to a row with space between them.

The number where the layout changes is called a breakpoint. There's no magic number. A good way to pick one is to make your browser window narrower until the design starts to look bad, and put a breakpoint there.

Notice that the example starts with the phone layout and then adds the desktop layout with min-width. That's called mobile first, and it's the approach most developers use.

It works well because the phone layout is usually the simpler one. Things are stacked in a single column, which is often what HTML does anyway. Then you add layout for bigger screens on top. You end up writing less CSS, and the page works on the smallest screens by default.

You don't need a drawer full of phones to test your page. The developer tools have a device toolbar. Open them with Inspect and click the small icon that looks like a phone and a tablet, or press Ctrl+Shift+M on Windows or Cmd+Shift+M on Mac.

You can pick devices like an iPhone or a Pixel from a list, or drag the edges to any size you want. Slowly drag from wide to narrow and watch for things that break: text that overflows, buttons that get too small or elements that overlap.

That said, if you have a phone nearby, open your page on it too. Nothing beats the real thing. Live Server even lets you do that if your phone is on the same Wi-Fi network, though that needs a little extra setup that's easy to find online.

Fingers are a lot bigger than mouse pointers. Links and buttons that are easy to click with a mouse can be really fiddly to tap. Try to make anything tappable at least about 44 pixels tall, with some space around it. Padding on links and buttons is the easiest way to get there.