Responsive Design

Why It Matters

Most visits now arrive from phones, and because Google indexes with a mobile crawler the small-screen rendering is the one that counts. A fixed-width layout on a handset produces the familiar failure: text at roughly a third of its intended size, sideways scrolling, and links packed too closely to tap accurately. Visitors leave in seconds and the bounce is measurable. The old alternative, a separate m-dot site, doubles the maintenance and creates duplicate content that then needs canonical tags to untangle. One document that adapts avoids the whole mess.

How It Works

The browser reads the viewport directive first and sets its layout width to the device width. CSS is then applied in order, with media query blocks such as a min-width of 768 pixels overriding the base rules once the condition holds. Writing the base rules for the narrow case and adding complexity upwards — mobile first — keeps the stylesheet smaller and avoids undoing desktop rules on the way down. Flexbox and grid reflow content without fixed pixel columns, and container queries, supported across all major browsers since early 2023, let a component respond to the space it has rather than to the window. All of this happens in the browser: the same bytes go to every device, and the layout decision is made on arrival.

Real-World Example

Common Mistakes

• ✕Leaving out the viewport meta tag — the phone then lays the page out at 980 pixels and scales it down, so all the type comes out tiny
• ✕Picking breakpoints from a list of device widths — devices change every year, the point at which your own layout breaks does not
• ✕Sending one large image to every screen — a 2400-pixel hero costs a phone user real data for pixels the screen cannot even show

Related Terms