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 is not a feature. It is 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. The result is always cramped and unusable. 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 reach
└─────────────────────────┘

Thumb Zone Application

Bottom Navigation Best Practices

┌─────────────────────────────────────────┐
│                                         │
│              Content Area               │
│                                         │
├─────────────────────────────────────────┤
│                                         │
│  Home   Search   New    Saved  Profile  │
│  [home] [search] [plus] [heart] [user]  │
│                                         │
└─────────────────────────────────────────┘

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 should not 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 you place them.

/* 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 or 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: 44x44px 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.