Responsive Design and Accessibility

Mobile first

Write base styles for small screens, then add complexity for larger ones:

.cards { display: grid; gap: 16px; }

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

Mobile-first CSS is simpler because phones get the least code, and it matches how most people browse.

Fluid typography and spacing

h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.section { padding-block: clamp(40px, 8vw, 96px); }

Responsive images

<img src="cake-800.jpg"
     srcset="cake-400.jpg 400w, cake-800.jpg 800w, cake-1600.jpg 1600w"
     sizes="(min-width: 1024px) 33vw, 100vw"
     alt="Chocolate cake with raspberries" width="800" height="600">

The browser downloads the smallest image that looks sharp, saving data on phones. Modern formats (.webp, .avif) are much smaller than JPEG.

Dark mode

:root { --bg: #ffffff; --text: #0f172a; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0b1020; --text: #e2e8f0; }
}
body { background: var(--bg); color: var(--text); }

Accessibility essentials

• Contrast: body text needs at least 4.5:1 against its background (WCAG AA). Check with DevTools or webaim.org/resources/contrastchecker.
• Focus styles: never remove outlines without a replacement.

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

• Touch targets: at least about 44×44 px for buttons on phones.
• Motion: respect users who get motion sickness.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

• Do not rely on colour alone: add icons or text to error states.
• Text size: never below 16px for body text on phones, or iOS zooms into inputs.

Testing

• DevTools device toolbar (Ctrl+Shift+M) at 360, 390, 768, 1024 and 1440 px.
• Check for horizontal scrolling: it nearly always means something overflowed.
• Navigate the whole page with only the Tab key.
• Run Lighthouse (DevTools) for accessibility and performance scores.

Exercise

Make the bakery site fully responsive and accessible: mobile-first grid, fluid headings, responsive images, dark mode, visible focus styles and Lighthouse accessibility above 95.

Check yourself

• Why write mobile-first CSS?
• What minimum contrast ratio does body text need?
• How do you respect reduced-motion preferences?