Responsive Web Design

What This Teaches

Responsive web design is the practice of building websites that adapt gracefully to different screen sizes, input types, and viewing contexts.

This lesson focuses on a mobile-first workflow: start with the smallest layout, then add complexity when the content has enough room.

You will use flexible containers, fluid images, media queries, responsive typography, and testing habits that catch layout problems early.

Why It Matters

Users do not experience a website on one perfect screen. They resize windows, zoom text, rotate phones, use touch, use keyboards, and browse on devices you cannot predict.

• Better user experience: Content stays readable, reachable, and usable across screen sizes.
• Better maintainability: One flexible website is easier to manage than separate mobile and desktop versions.
• Better accessibility: Responsive layouts support zoom, larger text, touch targets, and different input methods.
• Better performance: Mobile-first CSS encourages simpler default layouts before adding heavier desktop enhancements.

Core Techniques

Responsive design relies on a few foundational techniques that work together to make layouts flexible and adaptable.

• Fluid containers: Use flexible widths, max-width, and modern functions like min() instead of fixed page widths.
• Flexible media: Prevent images and videos from overflowing with max-width: 100% and height: auto.
• Responsive layout systems: Use grid, flexbox, gap, and wrapping patterns that adapt to available space.
• Media queries: Add CSS when conditions like min-width, orientation, or hover are true.
• Responsive typography: Use rem, line-height, readable line lengths, and controlled scaling with clamp().

Mobile-First Workflow

A mobile-first workflow starts with the simplest layout as the default. Those base styles apply everywhere.

Then use @media (min-width: ...) to enhance the layout when more space is available.

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

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

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

Media Queries: The Foundation of Responsive Design

Media queries allow you to define CSS rules that only apply when certain conditions are met, such as screen width, orientation, input type, or display capability.

@media (condition) {
  /* CSS rules to apply when the condition is true */
}

Common Conditions

• min-width: Applies styles when the viewport is at least the specified width. Common in mobile-first CSS.
• max-width: Applies styles when the viewport is at most the specified width. Common in desktop-first CSS.
• orientation: Applies styles based on portrait or landscape orientation.
• hover: Detects whether the primary input can hover, useful for avoiding hover-only interactions on touch screens.
• prefers-reduced-motion: Responds to a user motion preference.

Choosing Breakpoints

Breakpoints are specific viewport widths where your layout changes. Choose them based on content, not device names.

Resize the page slowly. When something becomes cramped, too wide, too hard to read, or awkwardly spaced, that is a good breakpoint candidate.

Responsive Container Example

Avoid starting with a fixed desktop width. A flexible container can fill small screens while staying readable on large screens.

.container {
  width: 90%;
  max-width: 960px;
  margin-inline: auto;
}

Avoid This Fixed Container Pattern

A fixed width can create horizontal scrolling on small screens. Use flexible widths unless the fixed size is truly required.

/* Avoid this as a default page container */
.container {
  width: 960px;
  margin-inline: auto;
}

Combining Conditions

You can combine conditions with and. For beginner-friendly broad support, use a comma when either condition should match.

@media (min-width: 768px) and (orientation: landscape) {
  /* Styles for landscape tablets */
}

@media (max-width: 768px), (orientation: portrait) {
  /* Styles for smaller screens or portrait orientation */
}

Other Media Features

• aspect-ratio: Target viewports with specific width-to-height relationships.
• resolution: Apply styles for high-DPI screens.
• color: Target devices with different color capabilities.
• hover: Distinguish between touch and mouse interactions.
• prefers-color-scheme: Respond to light or dark mode preference.

Mobile-First vs. Desktop-First

Viewport Meta Tag

The viewport meta tag is essential for controlling how a web page is scaled on mobile devices.

• width=device-width: Sets the viewport width to the device screen width.
• initial-scale=1.0: Sets the initial zoom level to 1.0.

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

Responsive Layout Patterns

Interactive Practice: Responsive Layout Visualizer

Use the Responsive Layout Visualizer above to resize a layout from 320px to 1200px.

Watch when the card layout changes from one column to two columns to three columns. The HTML stays the same; the CSS changes the presentation.

Responsive Images

Responsive images should fit their containers, load efficiently, and preserve meaning.

max-width: 100% prevents overflow. height: auto preserves the image proportions.

img {
  max-width: 100%;
  height: auto;
}

Using srcset and sizes

Use srcset and sizes when the browser should choose the best image file for the available layout size and device resolution.

srcset lists the available image files. sizes tells the browser how much layout space the image will occupy.

<img src="image.jpg"
     srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
     alt="Description">

Using the picture Element

Use the picture element for art direction or format switching, such as serving a different crop on small screens.

Keep the alt text on the fallback img. The meaning belongs to the image, not the individual sources.

<picture>
  <source media="(max-width: 600px)" srcset="image-small.jpg">
  <source media="(max-width: 1000px)" srcset="image-medium.jpg">
  <img src="image-large.jpg" alt="Description">
</picture>

Modern Image Formats

Consider formats like WebP and AVIF for better compression and quality.

Use picture when you need to provide multiple formats with a fallback.

Responsive Typography

Responsive typography should stay readable at small sizes and avoid becoming oversized on wide screens.

Use rem for stable type scale decisions, readable line-height, and max-width to control line length.

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

h1 {
  font-size: 2rem;
}

p {
  font-size: 1.2em;
}

Controlled Fluid Type with clamp

Avoid using vw by itself for important text. It can become too tiny on small screens or too huge on wide screens.

clamp() gives a minimum, preferred fluid value, and maximum.

h1 {
  font-size: clamp(2rem, 6vw, 4.5rem);
}

Using Media Queries for Typography

@media (min-width: 768px) {
  h1 {
    font-size: 3rem;
  }
  p {
    line-height: 1.5;
  }
}

Other Tips

• Use max-width to prevent long lines of text.
• Keep comfortable line-height, especially for paragraphs.
• Test text zoom. The layout should still work when text is larger.
• Avoid viewport-only type like font-size: 4vw for body text.

Responsive Navigation Examples

Navigation often needs special attention because links can run out of space quickly.

Start with usable HTML, then choose a responsive pattern based on the amount of navigation.

• Wrapping links: Useful for short nav lists that can wrap onto another line.
• Stacked navigation: Useful when a vertical menu is acceptable on small screens.
• Hamburger menu: A collapsible menu revealed by a real button. Useful for conserving space.
• Off-canvas menu: A side-sliding menu. Useful for more complex navigation, but it needs careful focus and keyboard handling.

Accessibility

Make sure navigation menus and other components are usable by everyone.

• Use a real button for menu toggles.
• Update aria-expanded when a collapsible menu opens or closes.
• Use aria-controls when a button controls a specific menu region.
• Keep keyboard focus visible.
• Do not hide interactive content from keyboard users.
• Make tap targets large enough to activate comfortably.
• Respect prefers-reduced-motion for large movement or animation.

Testing and Debugging

• Test narrow widths such as 320px and 360px.
• Use browser DevTools responsive mode to resize slowly.
• Check for horizontal scrolling.
• Check that images and videos do not overflow.
• Test text zoom and browser zoom.
• Check touch targets and spacing on small screens.
• Test keyboard navigation after nav changes.
• Test on a real phone when possible.

Common Mistakes

Responsive Debugging Checklist

• Open DevTools and drag from narrow to wide slowly.
• Find the first width where the layout feels cramped or broken.
• Check whether width, min-width, fixed positioning, or large images are causing overflow.
• Add a breakpoint only when the content needs a different layout.
• Prefer min-width media queries for mobile-first CSS.
• Use grid, flexbox, gap, and flexible units before hard-coding widths.
• Retest after each breakpoint instead of waiting until the end.

Additional Resources

Responsive Web Design Basics | Media Queries | Responsive Images