Responsive Web Design Basics

Responsive web design means a single website adjusts its layout to fit any screen, from a small phone to a large monitor. Visitors get a comfortable experience without pinching and zooming, and you only maintain one site. It is the standard approach today.

The viewport meta tag

Every responsive page needs this line in the head of the HTML:

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

Without it, mobile browsers pretend to be a wide desktop screen and shrink everything.

Fluid layouts

Instead of fixed pixel widths, use flexible units such as percentages, fr units in CSS Grid, and max-width constraints. This lets content grow and shrink with the screen. CSS Flexbox and Grid make building flexible layouts far easier than older methods.

Flexible images and media

Make images scale within their containers by setting max-width: 100% and height: auto. Provide multiple image sizes with srcset so devices download the most appropriate file. See how to compress images.

Media queries

Media queries apply different styles at different screen widths. For example, a three-column layout can collapse into one column on phones. Rather than targeting specific devices, choose breakpoints where your content starts to look awkward. A mobile-first approach usually uses min-width queries.

Flexible typography and spacing

Use relative units like rem for text sizes so users' browser font settings are respected. Functions like clamp() can scale headings smoothly between a minimum and maximum size. Adjust spacing too, since a generous desktop margin may be too much on a small screen. See whitespace.

A long menu that fits on desktop must collapse on mobile, often into a menu button. Make sure it is usable by touch and keyboard. See navigation best practices and keyboard navigation.

Avoid horizontal scrolling

Content should fit the width of the screen. Wide tables, long unbroken words, and fixed-width elements are common culprits. Allow tables to scroll inside their own container if needed.

Respect zoom

Do not disable pinch-zoom. Users with low vision depend on it. WCAG also expects content to reflow when zoomed, without requiring two-dimensional scrolling. See accessibility basics.

Test widely

Check your site at several widths, in portrait and landscape, and on real devices. Browser developer tools offer device simulation. Use our mobile-friendly checklist.

Performance counts

Responsive sites should not send desktop-sized assets to phones. Keep an eye on Core Web Vitals.

The bottom line

Use the viewport tag, flexible layouts, scalable images, and well-chosen breakpoints. One responsive site serves every visitor and is easier to maintain.