What is Responsive Design? | Module 07 | Frontend Learning Roadmap

1. Introduction

In 2025, more than 60% of web traffic comes from mobile devices. If your website only looks good on a desktop computer, you are failing the majority of your users.

Responsive Web Design (RWD) is the practice of building websites that look and work well on every screen size — from a tiny phone (320px) to a massive 4K monitor (3840px), and everything in between.

The term was coined by Ethan Marcotte in 2010. His approach was based on three pillars:

Fluid grids — layouts that use proportional widths (%, fr) instead of fixed pixels
Flexible images — images that scale within their containers
Media queries — CSS rules that apply at specific screen sizes

In this lesson we focus on understanding responsive design and the critical viewport meta tag. Media queries are covered in depth in Lesson 2.

2. Theory

The Viewport Meta Tag — CRITICAL

Without this one HTML line, your responsive CSS will not work on mobile:

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

Without this tag, mobile browsers pretend the screen is 980px wide (to render desktop sites) then scale them down — making everything tiny. The tag tells the browser: "use the actual device width, at 100% zoom".

width=device-width — set viewport width to device's screen width
initial-scale=1.0 — start at 100% zoom (no scaling)

Always include this in your <head>. Every HTML lesson in this course has included it — now you know exactly why.

Fluid Grids — Use Relative Widths

/* Non-responsive — fixed widths */
.container { width: 960px; }
.sidebar   { width: 300px; }
.main      { width: 640px; }

/* Responsive — relative widths */
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.sidebar   { width: 25%; }
.main      { width: 75%; }

Flexible Images

/* Critical — prevents images from overflowing containers */
img {
  max-width: 100%; /* image never wider than its container */
  height: auto;    /* maintains aspect ratio */
  display: block;  /* removes baseline gap */
}

Breakpoints

A breakpoint is a viewport width at which the layout changes. Common breakpoints:

Name	Width	Devices
xs / mobile	0–767px	Phones
sm / tablet	768px–1023px	Tablets, small laptops
md / laptop	1024px–1279px	Laptops
lg / desktop	1280px–1535px	Desktops
xl / wide	1536px+	Large monitors

These are guidelines, not rules. The best breakpoints are where your specific design breaks — not at arbitrary pixel values.

Content-Based vs Device-Based Breakpoints

A common mistake is to set breakpoints at specific devices (iPhone: 375px, iPad: 768px). Devices change every year. Instead, set breakpoints where the content starts looking bad.

"Start with the smallest screen and add a breakpoint when the design breaks." — Mobile-First approach (Lesson 3).

The Three Testing Methods

Browser DevTools — F12 → Toggle Device Toolbar (Ctrl+Shift+M in Chrome). Simulate any screen size and device.
Responsive Design Mode — Firefox's dedicated responsive mode.
Real devices — always test on an actual phone before shipping.

3. Real World Example

Open any major website (Amazon, BBC, GitHub) in Chrome DevTools and toggle the device toolbar. Notice:

The navigation collapses to a hamburger menu on mobile
Multi-column layouts stack to single column
Font sizes may increase slightly
Touch targets (buttons, links) are larger on mobile
Images resize proportionally

All of this is done with CSS media queries and relative units — no JavaScript needed for the basic responsive behaviour.

4. Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Responsive Design</h1>
    <div class="layout">
      <main class="main">Main Content</main>
      <aside class="sidebar">Sidebar</aside>
    </div>
  </div>
</body>
</html>

/* ===== RESPONSIVE FOUNDATION ===== */

/* 1. Box model reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* 2. Flexible images — ALWAYS */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 3. Body base */
body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #1e293b;
}

/* 4. Fluid container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 5. Default: single column (mobile) */
.layout {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

/* 6. Two-column on tablet+ */
@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 280px;
  }
}

/* 7. Larger gap on desktop */
@media (min-width: 1024px) {
  .layout { gap: 40px; }
  .container { padding: 0 24px; }
}

5. Code Breakdown

width: 90%; max-width: 1200px; margin: 0 auto;: The fluid container pattern. On a 400px phone: 90% = 360px. On a 1400px monitor: 90% = 1260px but capped at 1200px. margin: 0 auto centres it horizontally. This one rule handles all screen sizes.
Mobile-first approach: The default styles (no media query) are for mobile — a single column layout. Then media queries add complexity for larger screens. This is mobile-first and is the professional approach. Covered in depth in Lesson 3.
@media (min-width: 768px): Applies the enclosed styles only when the viewport is at least 768px wide. Below 768px, the layout stays single-column. This is a min-width media query — the mobile-first approach. Covered in detail in Lesson 2.
max-width: 100% on images: Without this, images render at their natural size (e.g. 1920×1080 on a 400px phone). max-width: 100% prevents images from ever being wider than their container. height: auto maintains the aspect ratio so images don't squash/stretch.

6. Common Mistakes

Missing the viewport meta tag. Your media queries will not work on mobile without it. This is the #1 responsive design mistake beginners make.
Using fixed pixel widths for layout elements. width: 800px on a 400px phone = horizontal scroll. Use %, fr, max-width, or clamp().
Not testing on real devices. DevTools simulates screen sizes but not touch events, scroll behaviour, or real device performance. Always test on actual phones.
Setting breakpoints at specific devices. Design for content, not for "iPhone" or "iPad". The iPhone 16 has different dimensions than the 15. Let your content determine breakpoints.
Not setting max-width: 100% on images. Causes images to overflow their containers on small screens.

7. Best Practices

Always include the viewport meta tag in every HTML file.
Always add max-width: 100%; height: auto; to all images.
Use the fluid container pattern: width: 90%; max-width: 1200px; margin: 0 auto;.
Use relative units (%, fr, rem, vw) for layout sizes, not px.
Test in DevTools at multiple widths (320px, 768px, 1024px, 1440px) regularly during development.
Design and code mobile-first — start with the smallest screen, add breakpoints as needed.

8. Practice Exercise

Create a page with the viewport meta tag and a fluid container. Open DevTools, resize to 320px — confirm no horizontal scroll.
Add an image at full size. Without max-width: 100%, observe overflow at small screens. Add it and confirm it fixes.
Remove the viewport meta tag from a page and view it on a phone (or DevTools phone mode). Notice how it renders like a desktop page zoomed out. Re-add it.
Create a two-column layout that collapses to one column at 768px using a media query.

9. Assignment

Build a responsive blog post page from scratch:

Viewport meta tag and fluid container
Header with site name
Main article (700px max-width, centred, with generous padding)
Sidebar with related posts (appears to the right on desktop, below on mobile)
Hero image that spans full container width at all sizes
Test at: 320px, 375px, 768px, 1024px, 1440px

10. Interview Questions

Q1: What is responsive web design?

Answer: Responsive web design is the practice of building websites that adapt to look and function well across all screen sizes and devices. It is based on three techniques: fluid grids (percentage-based layouts), flexible images (max-width: 100%), and media queries (conditional CSS at breakpoints).

Q2: What does the viewport meta tag do?

Answer: It tells mobile browsers to use the actual device width as the viewport width and render at 1:1 zoom. Without it, mobile browsers assume the viewport is 980px wide (to show desktop sites) and scale them down, making all content tiny and breaking media queries.

Q3: What is a breakpoint?

Answer: A breakpoint is a viewport width at which CSS rules change to adapt the layout to the screen size. They are defined with media queries. Best practice is to set breakpoints where your specific content starts to look bad, not at arbitrary device widths.

Q4: How do you make images responsive?

Answer: Add max-width: 100% to prevent images from being wider than their container, and height: auto to maintain the aspect ratio. Also add display: block to remove the baseline gap. For advanced use cases, use the srcset attribute and <picture> element for different image sizes at different breakpoints (covered in Module 07 Lesson 4).

Q5: How do you test responsive designs?

Answer: Use browser DevTools (F12) device toolbar to simulate different screen sizes and device pixel ratios. Test at common widths: 320px, 375px, 768px, 1024px, 1440px. Also test on real mobile devices for accurate touch, scroll, and performance behaviour.

11. Additional Resources

Ethan Marcotte — Responsive Web Design (the original article — search "ethan marcotte responsive web design 2010")
MDN — Responsive Design (search "MDN responsive design")
Google — Responsive Web Design Basics (search "web.dev responsive design")
Chrome DevTools — Device Mode (search "chrome devtools device mode")
BrowserStack — Real device testing (browserstack.com)