Responsive Web Design: Principles, Breakpoints, Mistakes

People visit websites on phones, tablets, laptops, wide monitors and everything in between. Responsive web design means building one site that adapts gracefully to all of them, instead of making separate versions. It improves usability, supports search visibility and simplifies maintenance.

This guide covers the core ideas and the practical habits that make responsive sites reliable.

The three foundations

Responsive design traditionally rests on three techniques:

1. Fluid layouts: widths defined in flexible units such as percentages, fr units or rem, not fixed pixels
2. Flexible media: images and video that scale within their containers
3. CSS media queries: rules that apply styles depending on screen characteristics

Modern CSS adds powerful tools on top: Flexbox, Grid, clamp(), and container queries.

Start with the viewport meta tag

Without this line in your HTML head, mobile browsers pretend to be wide desktops and shrink your page:

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

Avoid disabling user zoom, since it harms accessibility.

Think mobile-first

Mobile-first means writing base styles for small screens and adding rules as space increases.

• It forces you to prioritise content
• It tends to produce lighter, faster pages
• It keeps CSS simpler, since you layer enhancements using min-width queries

.card-grid { display: grid; gap: 1rem; }

@media (min-width: 48rem) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

Choose breakpoints based on content

There are no universally right breakpoints. Common starting points are around 640, 768, 1024 and 1280 pixels, but the best approach is to resize your design and add a breakpoint where the layout starts to break, not where a specific device happens to land. Devices change constantly.

Use modern layout tools

Flexbox

Great for one-dimensional layouts such as navigation bars and rows of buttons. Items can wrap and share space.

Grid

Ideal for two-dimensional layouts. Patterns like repeat(auto-fit, minmax(16rem, 1fr)) create responsive card grids without media queries.

Fluid typography and spacing

clamp() lets values scale between a minimum and maximum:

h1 { font-size: clamp(2rem, 5vw, 4rem); }

Container queries

Container queries let a component respond to the width of its container, not the viewport. This makes components reusable in sidebars, grids and full-width sections. Support is now widespread in modern browsers.

Make images responsive

• Set max-width: 100% and height: auto so images never overflow
• Use srcset and sizes to serve appropriately sized files to different screens
• Use the <picture> element for art direction, such as a tighter crop on mobile
• Set width and height attributes (or aspect-ratio) to prevent layout shift
• Use modern formats and lazy-load images below the fold

These practices also help Core Web Vitals.

Design touch-friendly interfaces

• Make tap targets large enough and spaced apart
• Do not rely on hover for important functions, since touch screens lack it
• Keep primary actions within thumb reach where possible
• Simplify navigation on small screens, but avoid hiding core features. See mobile navigation patterns.

Handle typography and readability

• Keep body text at a comfortable size, commonly 16 pixels or larger
• Limit line length to roughly 45 to 75 characters for readability
• Allow text to reflow and respect users’ font-size preferences
• Ensure sufficient contrast. See colour theory for UI

Respect user preferences

Media queries can detect preferences such as prefers-reduced-motion, prefers-color-scheme and prefers-contrast. Respecting them makes your site more comfortable and accessible. See dark mode design.

Test properly

Browser dev tools and responsive modes are helpful but not enough.

• Test on real phones and tablets, including older and smaller devices
• Check portrait and landscape orientations
• Zoom to 200 percent and increase system font size
• Try slow network conditions
• Test with the keyboard and a screen reader
• Review forms, menus, modals and tables, which often break first

Common mistakes

• Fixed pixel widths that cause horizontal scrolling
• Missing viewport meta tag
• Breakpoints tied to specific devices
• Oversized images on mobile
• Hover-only menus
• Tiny tap targets
• Hiding important content on small screens

Checklist

• Viewport meta tag present
• Mobile-first base styles with min-width enhancements
• Fluid layouts using Grid, Flexbox and relative units
• Responsive images with dimensions set
• Breakpoints chosen where content breaks
• Touch targets and thumb reach considered
• Readable type and contrast at all sizes
• Tested on real devices and with zoom

Final thoughts

Responsive design is less about devices than about flexibility. Build layouts that bend, test them in real conditions, and put content first. If you want a fast, responsive site built to these standards, see our web development service or get in touch.