Responsive Web Design Best Practices: A Modern Guide

Most visitors to a typical business website arrive on a phone, often on a mid-range Android device and a patchy mobile connection. Google also evaluates your site primarily as it appears on mobile. Responsive design is no longer about making a desktop site shrink; it is about building pages that work well on every screen from the start. Modern CSS makes this much easier than it used to be.

Key takeaways

• Write mobile-first CSS and add complexity for larger screens with min-width media queries.
• Use fluid typography and spacing with clamp() instead of many fixed breakpoints.
• Use CSS Grid and Flexbox for layout, and container queries for components that live in different-sized slots.
• Serve responsive images in modern formats with correct sizes, and reserve space to avoid layout shift.
• Design for touch and accessibility, and measure Core Web Vitals (LCP, INP, CLS) on real devices.

1. Start mobile-first

Write base styles for small screens, then layer on enhancements for wider viewports. Small-screen styles end up simpler, and phones download and apply less CSS.

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

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

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

Always include the viewport meta tag. Frameworks such as Next.js add it for you:

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

Do not disable zooming with maximum-scale=1 or user-scalable=no; people who need to zoom will not be able to.

2. Fluid typography and spacing with clamp()

clamp(min, preferred, max) scales a value smoothly with the viewport while keeping it within sensible limits. One line replaces several breakpoints.

:root {
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --step-4: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --space-section: clamp(3rem, 2rem + 5vw, 7rem);
}

body { font-size: var(--step-0); line-height: 1.6; }
h1 { font-size: var(--step-4); line-height: 1.1; }
section { padding-block: var(--space-section); }

Use rem units so text respects the user's browser font-size setting, and keep line length readable (around max-width: 65ch for body text).

3. Layout with Grid and Flexbox

Use Grid for two-dimensional page layouts and Flexbox for one-dimensional rows of items. A common Grid pattern creates responsive columns with no media queries at all:

.products {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

The min(16rem, 100%) stops cards overflowing on very narrow screens. Use gap instead of margins between items, and logical properties (margin-inline, padding-block) so layouts adapt cleanly if you add right-to-left languages later.

4. Container queries for reusable components

Media queries respond to the viewport. Container queries respond to the space a component actually has, which is what you want for cards, widgets and sidebars that appear in different places. They are supported in all modern browsers.

.card-wrapper {
  container-type: inline-size;
}

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

@container (min-width: 32rem) {
  .card {
    grid-template-columns: 10rem 1fr;
    align-items: center;
  }
}

The same card now shows as a stacked layout in a narrow sidebar and a side-by-side layout in a wide content area, with no extra classes.

5. Responsive images done right

Images are usually the heaviest part of a page. Serve the right size and format to each device.

<img
  src="/images/hero-800.jpg"
  srcset="/images/hero-480.avif 480w, /images/hero-800.avif 800w, /images/hero-1600.avif 1600w"
  sizes="(min-width: 64rem) 50vw, 100vw"
  width="1600"
  height="900"
  alt="Team reviewing a website design on a laptop"
  fetchpriority="high"
/>

• sizes must describe how wide the image is displayed, or the browser will pick the wrong file.
• width and height let the browser reserve space, which prevents layout shift.
• Use AVIF or WebP where supported; use <picture> if you need a fallback format.
• Lazy-load images below the fold (loading="lazy"), but not the main hero image, which should load early.

In Next.js, the next/image component generates sizes and modern formats for you:

import Image from 'next/image';

<Image src="/images/hero.jpg" alt="Team reviewing a website design" width={1600} height={900} sizes="(min-width: 64rem) 50vw, 100vw" priority />

6. Use the new viewport units

On mobile browsers, 100vh can be taller than the visible area because of the address bar, which causes cut-off buttons on full-screen sections. Use the newer units instead:

• svh: the small viewport height (browser UI visible).
• lvh: the large viewport height (browser UI hidden).
• dvh: the dynamic viewport height that updates as the UI shows and hides.

.hero {
  min-height: 100vh;   /* fallback for older browsers */
  min-height: 100svh;
}

Prefer svh for layout so content never hides behind browser toolbars; use dvh sparingly because resizing as the user scrolls can feel jumpy.

7. Design for touch and accessibility

• Make tap targets at least about 44×44 CSS pixels, with space between them.
• Do not rely on hover; anything shown on hover must also work with a tap or keyboard focus.
• Keep visible focus styles (:focus-visible) for keyboard users.
• Respect motion preferences:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

• Check colour contrast, and make sure text can be resized to 200% without breaking the layout.

8. Performance and Core Web Vitals

Responsive design and performance go together. Google's Core Web Vitals measure real-user experience:

• LCP (Largest Contentful Paint): how quickly the main content appears. Optimise the hero image and server response time.
• INP (Interaction to Next Paint): how quickly the page responds to taps and clicks. INP replaced First Input Delay as a Core Web Vital in 2024. Reduce heavy JavaScript and long tasks.
• CLS (Cumulative Layout Shift): how much content jumps around. Reserve space for images, ads and embeds, and load fonts carefully.

Check field data in PageSpeed Insights or Google Search Console, and test on a real mid-range phone over a throttled connection, not just a fast laptop.

9. Testing checklist

• Test at narrow widths (around 320px) as well as common phone, tablet and desktop sizes.
• Rotate devices to check landscape layouts.
• Use browser device emulation for quick checks and real devices for final testing.
• Zoom text to 200% and navigate with the keyboard only.
• Run Lighthouse and review Core Web Vitals after every major change.

For the backend that powers your pages, see our guide to API optimization.

Frequently asked questions

What is responsive web design?

Responsive web design is an approach where one website adapts its layout, images and typography to work well on any screen size, from small phones to large desktop monitors. It uses flexible layouts, fluid sizing, media queries and container queries, so every visitor gets a readable, usable page without a separate mobile site.

What does mobile-first design mean?

Mobile-first design means writing the base styles for small screens first and adding enhancements for larger screens with min-width media queries. It keeps the mobile experience simple and fast, matches how most people browse, and aligns with Google's mobile-first indexing, which evaluates the mobile version of a site.

Should I use container queries or media queries?

Use media queries for page-level layout decisions based on the viewport, such as switching navigation styles. Use container queries for reusable components like cards and widgets, because they respond to the space the component actually has. Most modern websites use both, and container queries are supported in all current major browsers.

How do I make images responsive?

Provide several image sizes with srcset, describe the displayed width with sizes, and set width and height to prevent layout shift. Serve modern formats such as AVIF or WebP, lazy-load images below the fold, and load the main hero image early. In Next.js, the next/image component handles most of this automatically.

Why does 100vh cause problems on mobile?

On mobile browsers, 100vh is often based on the largest viewport, so it can be taller than the visible area when the address bar is showing. This hides buttons or content at the bottom of full-screen sections. Using the newer svh or dvh units, with 100vh as a fallback, fixes the problem.

What are Core Web Vitals and why do they matter?

Core Web Vitals are Google's metrics for real-user experience: Largest Contentful Paint for loading speed, Interaction to Next Paint for responsiveness, and Cumulative Layout Shift for visual stability. They are part of how Google assesses page experience, and improving them also makes visitors more likely to stay, read and contact you.

How do I test if my website is responsive?

Resize the browser and use device emulation in browser developer tools for quick checks, then test on real phones and tablets in both orientations. Check narrow widths around 320 pixels, zoom text to 200 percent, navigate by keyboard, and run Lighthouse or PageSpeed Insights to review performance and Core Web Vitals.

Need a responsive website?

Twigo designs and builds fast, mobile-first websites for businesses across India. See our web development services.