Responsive Web Design Patterns and Techniques

Creating websites that work beautifully on all devices is essential. Let’s explore modern responsive design techniques.

Mobile-First Approach

Start with mobile styles, then enhance for larger screens:

/* Base styles (mobile) */
.container {
  padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

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

Fluid Typography

Scale typography smoothly across viewports:

/* Using clamp() for fluid sizing */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

p {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem);
}

/* Fluid spacing */
.section {
  padding: clamp(2rem, 5vw, 6rem);
}

Container Queries

Style elements based on their container, not the viewport:

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

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

/* When container is > 400px */
@container card (min-width: 400px) {
  .card {
    grid-template-columns: 150px 1fr;
  }
}

/* When container is > 600px */
@container card (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr auto;
  }
}

Responsive Grid Layouts

Auto-fit Grid

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

Named Grid Areas

.layout {
  display: grid;
  gap: 1rem;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

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

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

Flexbox Patterns

Responsive Navigation

.nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

Card Layout with Flexbox

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 300px;
  max-width: 100%;
}

@media (min-width: 768px) {
  .card {
    max-width: calc(50% - 0.75rem);
  }
}

@media (min-width: 1024px) {
  .card {
    max-width: calc(33.333% - 1rem);
  }
}

Responsive Images

<!-- Responsive with srcset -->
<img 
  src="image-800.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Responsive image"
/>

<!-- Art direction with picture -->
<picture>
  <source media="(min-width: 1024px)" srcset="hero-desktop.jpg" />
  <source media="(min-width: 768px)" srcset="hero-tablet.jpg" />
  <img src="hero-mobile.jpg" alt="Hero image" />
</picture>

/* CSS approach */
.hero {
  background-image: url('hero-mobile.jpg');
}

@media (min-width: 768px) {
  .hero {
    background-image: url('hero-tablet.jpg');
  }
}

@media (min-width: 1024px) {
  .hero {
    background-image: url('hero-desktop.jpg');
  }
}

Breakpoint System

:root {
  /* Breakpoints */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* Using CSS custom media (future) */
@custom-media --sm (min-width: 640px);
@custom-media --md (min-width: 768px);
@custom-media --lg (min-width: 1024px);

Responsive Tables

/* Stack on mobile */
@media (max-width: 767px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  thead {
    display: none;
  }
  
  tr {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
  }
  
  td {
    padding: 0.5rem;
    text-align: right;
  }
  
  td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

Testing Checklist

Tools for Testing

• Browser DevTools - Device emulation
• Responsively App - Multiple viewports
• BrowserStack - Real devices
• Polypane - Side-by-side views

Summary

Key responsive design principles:

1. 📱 Mobile-first - Start small, enhance up
2. 📐 Fluid sizing - Use clamp() and relative units
3. 📦 Container queries - Component-based responsive
4. 🖼️ Responsive images - Right size for viewport
5. 🧪 Test everywhere - Don’t assume, verify

Build responsive by default! 🎨