Lesson 1 / 25

What is responsive design?

Design that flows and adapts to any screen size using flexible components and intelligent constraints.

Responsive vs Fixed

Fixed layouts lock content to a single width (e.g., 960px). Responsive layouts adapt: content reflows, images scale, and components rearrange based on screen size. Responsive is modern — it serves 50%+ of web traffic on mobile.

Three pillars of responsive design

  1. Flexible grid — proportional widths (%, em, rem) instead of fixed pixels. 2. Media queries — apply different CSS rules per breakpoint. 3. Flexible media — images, video, and embeds that scale with their container.

Mobile-first is the default

Write CSS for mobile first (the smallest screen), then use media queries to enhance for larger screens. This approach is simpler, faster to load, and forces prioritization of essential content.

A responsive blueprint

This HTML structure works on any screen with just CSS — no layout framework required yet.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font-family: sans-serif; }
      .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px; }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Mobile-first responsive layout</h1>
    </div>
  </body>
</html>

Quick check: Which is a pillar of responsive design?

  • Flexible grid
  • Fixed widths only
  • Desktop-first approach
Answer

Flexible grid — Flexible grid using %, em, rem is a core pillar.

Responsive design is not optional

Mobile is the primary device for most users now. Responsive design isn't a 'nice to have'—it's essential.