Responsive Web Design: Building Sites That Work on Every Device

What is Responsive Web Design?

Responsive Web Design (RWD) is the practice of building websites that automatically adapt their layout, typography, and content presentation to provide an optimal experience across all screen sizes — from a large desktop monitor at 2560px wide down to a small smartphone at 320px. The term was coined by web designer Ethan Marcotte in a groundbreaking 2010 A List Apart article, where he identified three foundational techniques: fluid grids, flexible images, and CSS media queries.

Mobile and tablet devices now account for over 55% of all global web traffic. A website that looks broken on mobile loses more than half its potential visitors immediately. Beyond user experience, Google uses mobile-first indexing — meaning it primarily ranks sites based on how they perform on mobile. A non-responsive site is directly penalised in search results, making responsiveness an absolute business requirement, not just a design preference.

The Viewport Meta Tag — Do This First

Without this single tag in your HTML head, mobile browsers render your page as a 980px-wide desktop layout and shrink everything to fit the phone screen — making all text completely unreadable. This one line tells the browser to use the actual device width:

<!-- Put this in every HTML page you build -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Mobile-First CSS with Media Queries

Write your base CSS styles for mobile, then progressively enhance with min-width media queries for larger screens. This approach forces you to prioritise core content and leads to better performance on slower mobile connections:

/* Base styles: applied to all screen sizes (mobile first) */
.container {
  width: 100%;
  padding: 16px;
}

.nav-links {
  display: flex;
  flex-direction: column; /* stacked on small screens */
  gap: 8px;
}

/* Tablet: 768px and wider */
@media (min-width: 768px) {
  .container { padding: 32px 5%; }
  .nav-links  { flex-direction: row; gap: 24px; }
}

/* Desktop: 1024px and wider */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
}

Responsive Layouts with CSS Grid

The most powerful responsive pattern uses Grid's auto-fill combined with minmax() to automatically adjust column count without any media queries:

/* Automatically goes: 1 col (mobile) → 2 (tablet) → 3+ (desktop) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Named template areas for full page layouts */
.page-layout {
  display: grid;
  gap: 24px;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "header  header"
      "main    sidebar"
      "footer  footer";
  }
}

.page-header  { grid-area: header; }
.page-main    { grid-area: main; }
.page-sidebar { grid-area: sidebar; }
.page-footer  { grid-area: footer; }

Flexible Layouts with Flexbox

.hero {
  display: flex;
  flex-direction: column; /* stacked on mobile */
  align-items: center;
  gap: 32px;
  text-align: center;
}

@media (min-width: 768px) {
  .hero {
    flex-direction: row;     /* side by side on desktop */
    text-align: left;
  }
}

/* Navbar that wraps gracefully on tiny screens */
.navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  gap: 12px;
}

Fluid Typography with clamp()

The CSS clamp(min, preferred, max) function smoothly scales values between a minimum and maximum — perfect for headings and spacing that should grow with the viewport:

h1 { font-size: clamp(1.75rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.25rem, 3.5vw, 2.25rem); }
p  { font-size: clamp(0.9rem, 2vw, 1.1rem); line-height: 1.75; }

/* Fluid section padding — no media queries needed */
.section {
  padding: clamp(40px, 8vw, 120px) clamp(16px, 5%, 80px);
}

Responsive Images

/* Always start with this — prevents images from breaking their container */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Serve the right size image for the right device with srcset */
<img
  src="hero-800w.jpg"
  srcset="
    hero-400w.jpg   400w,
    hero-800w.jpg   800w,
    hero-1600w.jpg 1600w"
  sizes="
    (max-width: 600px) 400px,
    (max-width: 1000px) 800px,
    1600px"
  alt="Descriptive alt text here"
  loading="lazy"
/>

Common Responsive Mistakes to Avoid

• Missing the viewport meta tag — the single most common cause of broken mobile layouts.
• Fixed pixel widths — using width: 960px instead of max-width: 960px; width: 100%.
• Touch targets too small — buttons and links should be at least 44×44px on mobile for comfortable tapping.
• Horizontal overflow — any element with width: 100vw or absolute positioning can cause a horizontal scrollbar on mobile.
• Forgetting hover states are not available on touch — never hide critical content or actions behind a CSS :hover state.

Testing Your Responsive Design

In Chrome or Firefox DevTools, press F12 then Ctrl+Shift+M to open the device emulator. Test at the key breakpoints: 375px (iPhone SE), 390px (iPhone 14), 768px (iPad), 1024px (iPad landscape / laptop), and 1440px (desktop). For the most accurate results, always test on real physical devices — iOS Safari in particular has historically had unique CSS compatibility quirks that the emulator will not always catch.