responsive-universal-design

Responsive & Universal Design

Principles and practices for designing products that work beautifully across all devices and screen sizes.

Responsive design isn't just about making things smaller on mobile—it's about rethinking the entire experience for different contexts. Mobile-first design means starting with the most constrained device (mobile) and progressively enhancing for larger screens.

---

Core Principle: Mobile-First Design

Why Mobile-First?

Mobile users face real constraints:

• Small screen (360-480px) — less visual real estate
• Touch interaction — larger touch targets needed (48px minimum)
• Limited bandwidth — fewer/smaller images
• One-handed use — thumb-reachable zones matter
• On-the-go context — simpler, more focused tasks

Designing for mobile first forces you to prioritize ruthlessly. You can't fit everything on a 375px screen, so you cut the noise. Then, for larger screens, you add back layers of complexity.

Principle: Start with mobile, progressively enhance for larger screens (not the reverse).

Mobile-First Workflow

Traditional approach (desktop-first):

1. Design at 1440px (desktop)
2. Squish into 375px (mobile)
3. Things break, cut features
4. Result: Poor mobile experience

Mobile-first approach:

1. Design at 375px (mobile)
2. Expand to 768px (tablet)
3. Expand to 1440px (desktop)
4. Result: Intentional, layered experience

---

Responsive Breakpoints

Standard Device Breakpoints

Define breakpoints based on design needs, not device sizes. But here's a practical starting point:

Mobile (small):   320px - 479px   (phones in portrait)
Mobile (large):   480px - 639px   (larger phones, landscape)
Tablet:           640px - 1023px  (tablets in portrait)
Desktop:          1024px - 1439px (laptops, small desktops)
Desktop (large):  1440px +        (large desktops, 4K)

Implementation in CSS

/* Mobile-first: Base styles for mobile */
.container {
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column; /* Stack vertically on mobile */
}

/* Tablet: 640px and up */
@media (min-width: 640px) {
  .container {
    width: 90%;
    margin: 0 auto;
    flex-direction: row; /* Side-by-side on tablet */
  }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
  .container {
    width: 1200px;
    max-width: 100%;
  }
}