Responsive Design & Mobile-First

🔄 Recall Bridge: In the previous lesson, you built UI components — cards, modals, and dropdowns with keyboard support and accessibility. Now let’s make everything work beautifully on every screen size.

Responsive design ensures your interface works from 320px phones to 4K monitors. With mobile traffic exceeding desktop globally, mobile-first isn’t optional — it’s the default starting point.

Mobile-First CSS

Write base styles for mobile, then add complexity for larger screens:

/* Base: mobile (no media query needed) */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* Tablet */
@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

Common breakpoints (min-width, mobile-first):

Fluid Typography with clamp()

Replace fixed font sizes with fluid scaling:

:root {
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

AI prompt for fluid typography:

Generate a fluid typography scale using clamp(). Requirements: (1) Body text: min 16px on 320px screens, max 18px on 1400px screens, (2) Headings h1-h4: proportionally scaled, (3) Small text (captions): min 12px, max 14px. Use rem units. Provide the clamp() values and explain the calculation.

Responsive Images

The <picture> element with format and size optimization:

<picture>
  <source
    type="image/webp"
    srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
  />
  <img
    src="hero-800.jpg"
    srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
    alt="Descriptive alt text"
    width="1600" height="900"
    loading="lazy"
  />
</picture>

Image optimization checklist:

Responsive Patterns

✅ Quick Check: You set width: 100vw on a container to make it full-width. On mobile, there’s a horizontal scrollbar. Why? (Answer: 100vw includes the scrollbar width, while 100% of the body does not. On pages with vertical scrollbars, 100vw is wider than the visible area, causing horizontal overflow. Fix: use width: 100% instead of 100vw, or add overflow-x: hidden to the body. AI-generated CSS frequently uses 100vw — always check for this issue.)

Testing Responsive Design

AI prompt for responsive debugging:

I’m testing my page at different screen sizes. At 768px width, the sidebar overlaps the main content and the navigation links wrap to two lines. Here’s my CSS: [PASTE]. Debug the responsive behavior and suggest fixes for both issues.

Testing checklist:

Key Takeaways

• Mobile-first CSS (min-width media queries) produces cleaner, more performant code: mobile styles are the default with no media query, and you progressively add layout complexity for larger screens — mobile users on slow connections download the minimum CSS needed
• Fluid typography with clamp() eliminates breakpoint-based font size media queries: clamp(min, preferred, max) creates smooth scaling between a minimum and maximum size that adapts to any viewport without jumps or manual breakpoints
• Responsive images with srcset, sizes, and WebP format can reduce image downloads by 90% on mobile: a phone downloads a 50KB WebP instead of a 2MB desktop JPEG — always set explicit width and height attributes to prevent layout shift (CLS)

Up Next

In the next lesson, you’ll learn accessibility in depth — WCAG guidelines, ARIA roles, keyboard navigation, color contrast, and how to audit your pages for compliance.