Responsive design

Main Hero

Definition

Layouts that adjust to different screen sizes and pixel densities.

Advanced

Uses fluid grids, flexible media, viewport settings, and modern CSS such as clamp and container queries to maintain readable type, accessible targets, and stable layouts across devices. Supports performance by serving correctly sized assets.

Why it matters

Improves mobile usability, search visibility, and maintenance efficiency.

Use cases

  • New website or redesign
  • Component library refactor
  • Mobile traffic growth

Metrics

  • Mobile conversion rate
  • Bounce rate on small screens
  • Core Web Vitals on mobile (75th percentile)

Issues

  • Breakpoint-only fixed widths that cause overflow
  • Tap targets that are too small

Example

Hero image delivered with srcset and sizes, type scaled with clamp, and layout adjusted with container queries.