← Back to Course

Module 08

Responsive Design

Mobile-first thinking, breakpoints, and fluid layouts. Learn to design interfaces that work beautifully across every screen size.

From fixed-width tables to fluid CSS Grid. Responsive tools have evolved from media queries alone to container queries, clamp(), and intrinsic sizing.

Mobile traffic now exceeds desktop. Responsive design went from 'nice to have' to absolute necessity. Mobile-first became the default approach.

Content should adapt, not hide. Design for the smallest screen first. Use fluid systems that scale naturally. Breakpoints are suggestions, not rules.

Part A

Core Concepts

01

Mobile-First Design

Design for constraints first. Mobile forces you to prioritize what matters.

Start small, expand outward

Why Mobile-First

Mobile-first forces prioritization. With limited space, you must decide what's truly essential. Features that survive mobile constraints are the ones that matter.

/* Base styles = mobile */

.container { padding: 1rem; }

/* Expand for larger screens */

@media (min-width: 768px)

.container { padding: 2rem; }

Mobile-First CSS

Write base CSS for mobile. Use min-width media queries to add complexity. This ensures mobile devices get lean styles without downloading desktop overrides.

Primary ActionAlways visible
Core ContentAlways visible
NavigationCollapsible
Secondary InfoHidden on mobile
Prioritization Matrix

Not everything deserves screen space on mobile. Primary actions and core content always stay. Secondary information can hide behind interactions.

Desktop-First Problems:

Hiding content with display:none

Horizontal scrolling

Tiny tap targets

Hover-dependent interactions

What to Avoid

Desktop-first leads to subtractive design - hiding things on mobile. This wastes bandwidth and creates inferior mobile experiences.

Key Insight

Mobile users aren't second-class. They often have urgent, focused needs. Design for them first.

02

Breakpoints

Where your design needs to change. Let content guide breakpoint decisions.

Mobile< 640px
Tablet640px - 1024px
Desktop1024px - 1280px
Large Desktop> 1280px
Standard Breakpoints

These are starting points, not rules. Your actual breakpoints should be where YOUR design breaks, not where devices allegedly start.

||

Drag browser edge. Where does content break? That's your breakpoint.

The Resize Test

Resize your browser slowly from wide to narrow. Where text becomes unreadable, images overflow, or layout breaks - those are your natural breakpoints.

/* Width-based */

@media (min-width: 768px) { }

/* Combined */

@media (min-width: 640px) and (max-width: 1024px) { }

/* Modern: Container queries */

@container (min-width: 400px) { }

Media Query Syntax

Media queries are the mechanism. Container queries (newer) let components respond to their container size, not viewport.

/* CSS Custom Properties */

:root {

--bp-sm: 640px;

--bp-md: 768px;

--bp-lg: 1024px;

}

Breakpoint Management

Define breakpoints in one place. Unfortunately, CSS custom properties don't work in media queries directly - use a preprocessor or document them clearly.

Rule of Thumb

Most sites need 3-4 breakpoints maximum. If you have more, your base styles might not be fluid enough.

03

Fluid Systems

Design that scales continuously, not in jumps.

font-size: clamp(

1rem, /* minimum */

2.5vw, /* preferred */

2rem /* maximum */

);

Clamp() for Type

clamp() sets a minimum, a fluid middle value, and a maximum. Text scales smoothly without media queries.

padding: clamp(1rem, 5vw, 4rem);

gap: clamp(1rem, 3vw, 2rem);

margin-block: clamp(2rem, 8vh, 6rem);

Responsive Spacing

Apply the same fluid approach to spacing. Margins, padding, and gaps that scale with viewport create natural responsiveness.

/* Auto-responsive grid */

display: grid;

grid-template-columns:

repeat(auto-fit, minmax(250px, 1fr));

gap: clamp(1rem, 3vw, 2rem);

Intrinsic Grid Sizing

CSS Grid with auto-fit and minmax creates responsive layouts without any media queries. Columns adjust automatically based on available space.

remRelative to root font-size
emRelative to parent font-size
vw/vhViewport width/height
%Relative to parent
chWidth of '0' character
Responsive Units

Each unit has its place. rem for typography, % or fr for layouts, vw/vh for viewport-relative sizing. Combine them thoughtfully.

Modern CSS

clamp(), min(), max(), and minmax() reduce breakpoint dependency dramatically. Learn these functions well.

04

Responsive Navigation

Navigation patterns that work across all screen sizes.

Best Practice

Test navigation with actual users on real devices. What seems obvious to designers often confuses real people.

05

Responsive Images

Serving the right image for every screen and connection.

img {

max-width: 100%;

height: auto;

}

Basic Responsive Images

This basic rule prevents images from overflowing containers. The image scales down but never exceeds its natural size.

<img src="photo-800.jpg"

srcset="photo-400.jpg 400w,

photo-800.jpg 800w,

photo-1200.jpg 1200w"

sizes="(max-width: 600px) 100vw,

50vw"

alt="Description">

Resolution Switching

srcset provides multiple image sizes. The browser picks the best one based on screen size, pixel density, and network conditions.

<picture>

<source media="(min-width: 800px)"

srcset="hero-wide.jpg">

<source media="(min-width: 400px)"

srcset="hero-medium.jpg">

<img src="hero-square.jpg" alt="">

</picture>

Picture Element

The picture element allows different crops for different screens. Show a wide landscape on desktop, a tighter crop on mobile.

/* Modern approach */

img {

aspect-ratio: 16 / 9;

width: 100%;

object-fit: cover;

}

Maintaining Ratios

aspect-ratio reserves space before images load, preventing layout shift. object-fit controls how images fill that space.

Performance

Images are typically 50%+ of page weight. Responsive images can cut that significantly. Always optimize.

Part C

Science & Psychology

10

The Science of Screen Adaptation

How humans interact with different screen sizes - and why responsive design matters.

Sofa

Relaxed browsing

Walking

One thumb, distracted

Desk

Focused work

Context Changes Everything

Screen size often correlates with context. Mobile users might be standing in line, distracted, using one hand. Design for their reality.

Green = easy reach | Yellow = stretch | Red = hard

Mobile Ergonomics

Most users hold phones in one hand, using their thumb. The bottom of the screen is easiest to reach. Place key actions there.

Mobile

Focused, single-task

Shorter sessions

Desktop

Peripheral awareness

Longer, complex tasks

Screen Size & Focus

Mobile screens command focused attention - one thing at a time. Larger screens allow peripheral awareness and multitasking.

On mobile, the narrow viewport naturally creates comfortable line lengths. On desktop, you must constrain text width intentionally - 45-75 characters remains the goal regardless of screen size.

Optimal Line Length

Narrow mobile screens often have ideal line lengths by default. Wide desktop screens need max-width constraints to maintain readability.

Key Insight

Responsive design isn't just about fitting content - it's about optimizing for how people actually use different devices.

Part D

Real-World Examples

11

Responsive Design in Practice

How leading sites handle responsive challenges.

Payments infrastructure
Principles Identified:
Fluid typography Headlines scale smoothly using viewport units with clamp()
Reordering content Complex desktop layouts simplify to single columns on mobile
Progressive enhancement Animations and interactions added for capable devices
Where good ideas find you.
Principles Identified:
Reading-first Typography optimized for long-form reading at every size
Minimal navigation Header collapses to essential actions only on mobile
Consistent experience Reading experience feels native on any device
Belong anywhere
Principles Identified:
Bottom navigation Mobile uses bottom nav bar for thumb accessibility
Card-based layout Cards reflow naturally from grid to stack
Search optimization Search experience completely redesigned for mobile

Exercise

Visit these sites on your phone, tablet, and desktop. Note what changes and what stays the same.

Part G

CSS Implementation

14

CSS Implementation

Responsive patterns you can copy and adapt.

:root {
  --font-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --font-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-lg: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --font-xl: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --font-2xl: clamp(2rem, 1rem + 4vw, 4rem);
}
Fluid Type Scale via CSS
  • clamp() - Sets min, preferred, and max values
  • rem + vw - Combines relative and viewport units
  • CSS variables - Reusable throughout your stylesheet
.card-grid {
  display: grid;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

/* Cards fill available space automatically */
Auto-Responsive Grid via CSS
  • auto-fit - Creates as many columns as fit
  • minmax() - Sets minimum and maximum column width
  • min() - Prevents overflow on very small screens
.card-container {
  container-type: inline-size;
}

.card {
  display: grid;
  gap: 1rem;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 150px 1fr;
  }
}
Container Queries via CSS
  • container-type - Declares element as container
  • @container - Query based on container size
  • Component logic - Cards adapt to their context, not viewport
/* Base styles - Mobile */
.hero {
  padding: 2rem 1rem;
  text-align: center;
}

/* Tablet and up */
@media (min-width: 768px) {
  .hero {
    padding: 4rem 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .hero {
    padding: 6rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}
Mobile-First Breakpoints via CSS
  • Base = mobile - No media query needed for mobile
  • min-width - Add complexity as space increases
  • Progressive - Each breakpoint builds on the last

Modern CSS

clamp(), min(), max(), container queries, and auto-fit/auto-fill have made responsive design much simpler.

Part H

Self-Assessment

15

Self-Assessment

Test your responsive design knowledge.

Q1

What does 'mobile-first' mean in CSS?

Click to reveal
Q2

How should you determine breakpoints?

Click to reveal
Q3

What does clamp(1rem, 5vw, 3rem) do?

Click to reveal
Q4

Why use srcset for images?

Click to reveal
Q5

What's the minimum touch target size?

Click to reveal

Score Yourself

5/5: Responsive design expert

3-4/5: Review the fluid systems section

1-2/5: Re-read the fundamentals

Key Takeaways

Start with constraints
Mobile
base styles
+
Desktop
min-width queries

Design for mobile first, then add complexity for larger screens. This forces prioritization and ensures mobile users get efficient styles.

clamp() everything

clamp(min, preferred, max)

Use clamp() for typography, spacing, and sizing. Reduce your dependency on breakpoints by letting values scale smoothly.

Grid does the work

CSS Grid with auto-fit and minmax() creates responsive layouts without media queries. Let the browser do the math.

Use actual devices
Browser devtools lie.
Test on real phones.

Browser device simulators don't capture touch interactions, real network conditions, or actual rendering differences. Test on real devices.