Responsive & Mobile Design

Over half of web traffic is mobile. If your design doesn't work on a phone, it doesn't work. Responsive design isn't a feature, it's the default way to build.

Mobile-First Approach

Start with the smallest screen, then progressively enhance for larger screens. This forces you to prioritize content and interactions because there's no room for clutter on a 375px-wide screen.

/* Mobile base styles — the default */
.component {
  padding: 16px;
  font-size: 16px;
  flex-direction: column;
}

/* Tablet enhancement — add when space allows */
@media (min-width: 768px) {
  .component {
    padding: 24px;
    font-size: 18px;
    flex-direction: row;
  }
}

/* Desktop enhancement — more space, more features */
@media (min-width: 1024px) {
  .component {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

Why Mobile-First (Not Desktop-First)?

Common mistake: Designing a polished desktop layout, then trying to "shrink it" for mobile. This always results in a cramped, unusable mobile experience. Start mobile, then expand.

Standard Breakpoints

/* Common breakpoint system */
--breakpoint-sm: 576px;    /* Large phones (landscape) */
--breakpoint-md: 768px;    /* Tablets (portrait) */
--breakpoint-lg: 1024px;   /* Small laptops / tablets (landscape) */
--breakpoint-xl: 1280px;   /* Desktops */
--breakpoint-2xl: 1536px;  /* Large monitors */

Breakpoint Decision Guide

Important: Let content dictate breakpoints, not device widths. If your card text wraps awkwardly at 820px, add a breakpoint at 820px. Don't force it to wait until 1024px.

/* Content-driven breakpoint */
@media (min-width: 820px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Touch Target Sizes

Fingers are imprecise. Touch targets must be large enough to tap without error.

Expanding Touch Targets Without Changing Visuals

A 24px icon can have a 48px touch target:

.icon-button {
  /* Visual size */
  width: 24px;
  height: 24px;

  /* Expanded touch area via padding */
  padding: 12px;
  margin: -12px;  /* Compensate so layout isn't affected */

  /* Or use a pseudo-element */
  position: relative;
}

.icon-button::before {
  content: '';
  position: absolute;
  inset: -12px;  /* Expands hit area by 12px in all directions */
}

Common Touch Target Failures

Thumb Zone Design

Most mobile users hold their phone with one hand and operate with their thumb. The bottom of the screen is easiest to reach.

┌─────────────────────────┐
│                         │
│   ⬛ HARD TO REACH      │   Requires stretching or two hands
│                         │
│  ⬜ OK                  │   Reachable but not ideal
│        │        │       │
│  ✅ EASY │ ✅ EASY │     │   Natural thumb range
│        │        │       │
│        │        │       │
│────────┴────────┴───────│
│    ✅ PRIMARY ACTIONS    │   Bottom of screen — easiest
└─────────────────────────┘

Thumb Zone Application

Bottom Navigation Best Practices

┌─────────────────────────────────────────┐
│                                         │
│              Content Area               │
│                                         │
├─────────────────────────────────────────┤
│                                         │
│  🏠      🔍      ➕      ❤️      👤    │
│ Home   Search   New    Saved  Profile   │
│                                         │
└─────────────────────────────────────────┘

Responsive Navigation Patterns

Implementing Priority+ Navigation

/* Show what fits, overflow the rest */
.nav {
  display: flex;
  overflow: hidden;
}

.nav-item { white-space: nowrap; }

.nav-overflow {
  margin-left: auto;
  /* "More" button that opens a dropdown with hidden items */
}

Responsive Content Strategies

What to Do With Content at Each Breakpoint

Data Tables on Mobile

Tables are one of the hardest responsive challenges. Options:

Option 1: Horizontal scroll (simplest)
┌──────────────────────────────┐
│ Name    | Email    | Role  →│  (scrollable)
│ Jane    | jane@... | Admin →│
└──────────────────────────────┘

Option 2: Stacked cards (most mobile-friendly)
┌──────────────────────────────┐
│ Jane Doe                     │
│ Email: jane@example.com      │
│ Role: Admin                  │
│ Status: Active               │
├──────────────────────────────┤
│ John Smith                   │
│ Email: john@example.com      │
│ Role: Editor                 │
│ Status: Active               │
└──────────────────────────────┘

Option 3: Priority columns (show key columns, hide others)
┌──────────────────────────────┐
│ Name        | Role           │  (Email, Status hidden behind tap)
│ Jane Doe    | Admin          │
│ John Smith  | Editor         │
└──────────────────────────────┘

Fluid Typography

Use clamp() for smooth scaling between breakpoints:

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
  /* min: 32px, preferred: 5vw + 16px, max: 64px */
}

h2 {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
}

p {
  font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem);
  /* Body text stays between 16px and 20px */
}

Important: Body text shouldn't scale much. 16-18px on mobile, 16-20px on desktop. Headings can scale significantly.

Container Queries

Style components based on their container size, not the viewport. This makes components truly reusable. They adapt to wherever they're placed.

/* Define the container */
.card-container {
  container-type: inline-size;
}

/* Style based on container width */
@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
    gap: 24px;
  }
}

@container (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

When to Use Container Queries vs. Media Queries

Mobile-Specific Design Considerations

Input and Form Optimization

Mobile Performance

<!-- Responsive images -->
<img
  srcset="photo-400.webp 400w,
          photo-800.webp 800w,
          photo-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  src="photo-800.webp"
  alt="Description"
  loading="lazy"
>

Offline and Connectivity

• Design for slow/intermittent connections. Show cached content when possible
• Provide offline feedback: "You're offline. Changes will sync when reconnected."
• Don't block the entire UI when one request fails
• Queue actions for retry rather than showing an error

Testing Responsive Designs

Minimum test matrix:

Common Mistakes

/* Safe area padding for notched devices */
.bottom-nav {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.header {
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}

Key Takeaways

• Design mobile-first, then enhance for larger screens. Use min-width media queries.
• Touch targets: 44×44px minimum. Use padding to expand hit areas beyond visual boundaries.
• Place primary actions in the thumb zone (bottom of screen on mobile).
• Use clamp() for fluid typography. Body text barely scales; headings scale significantly.
• Container queries make components responsive to their container, not just the viewport.
• Test on real devices. Browser DevTools miss touch interactions, performance, and safe areas.
• Tables on mobile: use horizontal scroll, stacked cards, or priority columns. Don't shrink the table.
• Prevent iOS zoom: set input font-size to at least 16px.