Lesson 25 / 25

Responsive design recap

Review the three pillars of responsive design and how they work together to create adaptable, user-friendly layouts.

The three pillars

1. Flexible grid: Use %, em, rem for widths so content flows. 2. Media queries: Apply different rules at different viewport sizes. 3. Flexible media: Scale images, video, embeds proportionally. Together, these create layouts that adapt from 320px mobile screens to 2560px ultra-wide displays.

A complete responsive example

All three pillars in one practical example.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; }
    
    body { font-size: clamp(1rem, 1.5vw, 1.25rem); }
    
    .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem); }
    
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
    
    img { max-width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
    
    button { padding: 12px 20px; font-size: 1rem; border: none; border-radius: 8px; cursor: pointer; }
    
    @media (max-width: 600px) {
      .grid { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Responsive Design</h1>
    <div class="grid">
      <article>
        <img src="image.webp" alt="Example" loading="lazy">
        <h2>Article 1</h2>
        <button>Read More</button>
      </article>
      <!-- More articles -->
    </div>
  </div>
</body>
</html>

Quick check: Which of these is NOT a pillar of responsive design?

  • Flexible grid with percentage widths
  • Media queries for breakpoints
  • Fixed-width containers
  • Flexible, scalable media
Answer

Fixed-width containers — Fixed-width containers lock layouts to one size — the opposite of responsive design. Use flexible widths instead.

Future trends

Container queries, aspect-ratio, and newer media features are making responsive design even more powerful.

Keep learning

Responsive design is constantly evolving. Follow CSS Working Group specs, test new features, and adapt to user needs.

Common myths about responsive

Myth: Responsive means mobile version. Reality: It's one codebase, multiple presentations. Myth: Mobile-first means mobile only. Reality: It optimizes priorities.

Quick check: Why is mobile-first better than desktop-first?

  • Simpler CSS, forces prioritization, better performance
  • It's just a trend
  • Mobile users don't need features
Answer

Simpler CSS, forces prioritization, better performance — Mobile-first CSS is cleaner, and you add complexity only when needed.

Next: explore advanced patterns

Now that you understand responsive fundamentals, explore component libraries, design systems, and responsive animation patterns.