Responsive Design

Responsive Web Design

This skill covers implementing mobile-first responsive designs that work effectively across all device sizes using modern CSS techniques.

When to use this skill

Use this skill when you need to:

• Build responsive layouts
• Implement mobile-first designs
• Create flexible grid systems
• Handle responsive images and typography
• Support various device capabilities

Prerequisites

• Understanding of CSS fundamentals
• Knowledge of viewport meta tags
• Familiarity with CSS Grid and Flexbox
• Testing devices or browser DevTools

Guidelines

Mobile-First Approach

Philosophy

• Design for mobile by default
• Progressive enhancement for larger screens
• Content priority drives layout decisions
• Touch-friendly interactions

Viewport Configuration

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

CSS Strategy

/* Mobile first: Base styles for mobile */
.card {
  padding: 1rem;
  width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
  .card {
    padding: 1.5rem;
    width: 50%;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .card {
    padding: 2rem;
    width: 33.333%;
  }
}

Breakpoint Strategy

Standard Breakpoints

/* Mobile first breakpoints */
/* Small devices (phones) - default */

/* Medium devices (tablets) */
@media (min-width: 768px) { }

/* Large devices (desktops) */
@media (min-width: 1024px) { }

/* Extra large devices */
@media (min-width: 1280px) { }

/* 4K and ultra-wide */
@media (min-width: 1536px) { }

Content-Based Breakpoints

• Break when content breaks, not at device widths
• Use relative units (em, rem) for breakpoints
• Test with actual content

/* Break when line length becomes unreadable */
.container {
  max-width: 100%;
  padding: 1rem;
}

@media (min-width: 65ch) {
  .container {
    max-width: 65ch; /* Optimal reading width */
    margin: 0 auto;
  }
}

Layout Techniques

CSS Grid

/* Responsive grid */
.grid {
  display: grid;
  gap: 1rem;
  /* Single column by default (mobile) */
  grid-template-columns: 1fr;
}

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

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

/* Responsive without media queries */
.grid-auto {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 300px), 1fr)
  );
}

Flexbox

/* Responsive navigation */
.nav {
  display: flex;
  flex-direction: column; /* Mobile: stacked */
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row; /* Desktop: horizontal */
    gap: 2rem;
  }
}

/* Responsive cards */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px; /* Grow, shrink, basis */
  min-width: 0; /* Allow shrinking below basis */
}

Responsive Typography

Fluid Typography

/* Clamp: minimum, preferred, maximum */
h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

p {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.25rem);
  line-height: 1.6;
}

Responsive Line Height

body {
  font-size: 1rem;
  line-height: 1.5;
}

@media (min-width: 768px) {
  body {
    font-size: 1.125rem;
    line-height: 1.6;
  }
}

Responsive Images

Art Direction

<picture>
  <!-- Mobile: portrait crop -->
  <source 
    media="(max-width: 767px)" 
    srcset="hero-mobile.jpg"
  >
  <!-- Desktop: full image -->
  <source 
    media="(min-width: 768px)" 
    srcset="hero-desktop.jpg"
  >
  <img src="hero-default.jpg" alt="Description">
</picture>

Resolution Switching

<img 
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="
    (max-width: 600px) 400px,
    (max-width: 1000px) 800px,
    1200px
  "
  src="image-800.jpg"
  alt="Description"
>

Object Fit

.image-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Container Queries

Modern Responsive Alternative

/* Container query instead of media query */
.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

@container card (min-width: 700px) {
  .card {
    grid-template-columns: 300px 1fr;
  }
}

Touch and Input Considerations

Touch Targets

/* Minimum touch target size */
button, 
.nav-link,
.form-input {
  min-height: 44px;
  min-width: 44px;
}

/* Adequate spacing between touch targets */
.nav-list li {
  margin-bottom: 0.5rem;
}

Hover Capability

/* Only apply hover styles on hover-capable devices */
@media (hover: hover) {
  .button:hover {
    background-color: #0056b3;
  }
}

/* Fallback for touch devices */
@media (hover: none) {
  .button:active {
    background-color: #0056b3;
  }
}

Dark Mode Support

/* Dark mode media query */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
  }
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Testing

Device Testing Checklist

• iPhone (Safari)
• Android (Chrome)
• iPad/Tablet
• Small laptop (1024px)
• Desktop (1920px)
• Rotated devices

Browser DevTools

• Responsive Design Mode
• Device emulation
• Network throttling
• Touch simulation

Examples

See the examples/ directory for:

• grid-layouts/ - Responsive grid patterns
• navigation-patterns/ - Responsive nav designs
• typography-system/ - Fluid type scales
• dark-mode/ - Dark mode implementation

References

• MDN Responsive Design
• Every Layout
• Responsive Web Design by Ethan Marcotte
• Modern CSS Solutions
• Container Queries