One website, many screens
Picture writing a single website that looks perfect on a 360 px phone, on a tablet, on a laptop and on a 27-inch monitor. That's the promise of responsive design, and it's huge: today half of all web traffic is mobile. If your page doesn't work in someone's pocket, you've lost half your visitors before you even start.
The opposite is obvious at a glance. A design with fixed widths in pixels that looks perfect on your laptop breaks on mobile: horizontal scroll appears, the text overflows the sides, the buttons become tiny.
Responsive design consists of building a single document that adapts to any viewport, instead of keeping separate versions for mobile and desktop. One website, every screen.
The viewport tag (essential)
Without it, the phone pretends to be a wide screen (~980 px) and shrinks everything
down, leaving it unreadable. It always goes in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width: the viewport width = the real device width.initial-scale=1: no initial zoom.
This line is the switch that enables responsiveness. It's the first step of any serious project.
⚠️ CLASSIC TRAP: forgetting the viewport meta tag. Your responsive CSS can be flawless, but without this line the phone ignores it and shows the shrunken "desktop" version. If everything looks tiny on the phone, check the
<head>before anything else.
Mobile-first: design for mobile first
The professional strategy is mobile-first: you write the base styles thinking about the smallest screen and then add complexity for large screens through media queries.
/* Base: mobile. A single column, takes the full width. */
.gallery {
display: flex;
flex-direction: column;
gap: 12px;
}
Why start with the small one? Think of packing a bag: first you pack the essentials and, if you upgrade to a bigger bag, you add things. Much easier than starting with the huge suitcase and pulling stuff back out.
- Mobile is the hardest constraint: if it fits there, it scales up well.
- The base styles are the simplest; you keep adding improvements, not undoing tricks made for desktop.
- Most web traffic today is mobile: it deserves priority.
⚠️ CLASSIC TRAP: designing desktop-first (the big monitor first) and "I'll adapt it to mobile later." You almost always end up fighting your own CSS to undo what you did. Start small and grow: you'll suffer a lot less.