Responsive Paradigms

Mobile, tablet, and desktop are fundamentally different interaction contexts. The input method, screen real estate, viewing distance, and session intent all differ. Responsive design is not the same layout at different widths — it is a different design decision at each breakpoint.

The Three Paradigms

Mobile (< 768px)

• Input: Touch — fingers, not a cursor. Tap targets ≥ 44×44px.
• Navigation: Bottom tab bar (thumb reachable) or hamburger drawer. Top navigation is hard to reach.
• Session: Often interrupted, task-focused, shorter. Show the most important thing first.
• Content: Single column. Vertical scroll only. No hover states.
• Primary action: Floating action button (FAB) or full-width button at the bottom of the screen.

Tablet (768px–1024px)

• Input: Touch and sometimes keyboard/trackpad. Hybrid paradigm.
• Navigation: Can support a persistent sidebar at landscape orientation; collapses to drawer at portrait.
• Content: Two-column layouts work. Master-detail patterns (list + detail side by side) are natural.
• Primary action: Can be in-line with content, not necessarily floating.