A Complete Guide to Responsive Design: Mobile-First and Beyond

Most web traffic is mobile. A site that only works on desktop frustrates users and hurts conversions. Responsive design means one codebase that adapts to any screen—phone, tablet, laptop, or desktop. This guide covers the fundamentals, practical techniques, and how to test across devices.

The Viewport and Meta Tag

Without a viewport meta tag, mobile browsers render the page at desktop width and scale it down—tiny text, horizontal scrolling. Add this to every page:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

width=device-width sets the layout width to the device width. initial-scale=1.0 prevents zoom on load. viewport-fit=cover helps with notched devices (e.g. iPhones). This is the foundation; everything else builds on it.

Mobile-First CSS

Mobile-first means styling for small screens first, then adding breakpoints to enhance for larger ones. It's easier to add complexity than to strip it away. Your base styles apply to mobile; media queries add layout and refinements for tablets and desktops.

Breakpoints

Breakpoints are the widths at which your layout changes. Common choices:

• 576px—Large phones, small phablets
• 768px—Tablets in portrait
• 1024px—Tablets in landscape, small laptops
• 1280px—Desktops

Don't design for specific devices—design for ranges. Use min-width in media queries so styles cascade upward:

/* Base: mobile */
.container { padding: 0 1rem; }

@media (min-width: 768px) {
  .container { padding: 0 2rem; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

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

Flexible Layouts

Flexbox

Flexbox excels at one-dimensional layouts—rows or columns. Use it for nav bars, card rows, and aligning items. flex-wrap lets items wrap on smaller screens. gap adds consistent spacing without margin hacks.

.nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.card-row { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) {
  .card-row { flex-direction: row; }
}

CSS Grid

Grid handles two-dimensional layouts—rows and columns. Use it for page structure, card grids, and complex layouts. grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) creates a responsive grid that fits as many columns as the viewport allows.

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

Fluid Typography

Fixed pixel font sizes don't scale. Use clamp() for fluid typography that scales between a minimum and maximum:

h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); }
body { font-size: clamp(0.9375rem, 1.5vw, 1rem); }

Line height and spacing can use rem or em so they scale with text. Avoid tiny text on mobile—16px (1rem) is a good minimum for body copy.

Responsive Images

Don't serve a 2000px image to a 400px screen. Use srcset and sizes so the browser picks the right image:

<img src="photo-800.jpg" alt="Description"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="800" height="600" loading="lazy">

Use modern formats (WebP, AVIF) with fallbacks. Set width and height to prevent layout shift. Lazy load images below the fold with loading="lazy".

Touch Targets

On mobile, fingers need larger tap targets than mouse cursors. Buttons and links should be at least 44×44px. Add padding to increase the clickable area without making the button look huge. Ensure adequate spacing between interactive elements so users don't tap the wrong one.

Testing Responsive Design

Use browser DevTools to emulate devices—Chrome's device toolbar lets you test various viewports. Test in portrait and landscape. Check on real devices when possible; emulation doesn't capture touch behavior, performance, or real-world conditions. Test at breakpoint boundaries (e.g. 767px and 769px) to catch edge cases.

Putting It Together

Start with the viewport meta tag. Write mobile-first CSS with min-width breakpoints. Use Flexbox and Grid for flexible layouts. Apply fluid typography and responsive images. Ensure touch targets are adequate. Test across viewports and devices. A responsive site works everywhere—and that's the baseline users expect.