responsive-patterns

Responsive Patterns

Responsive design is not "make it fit on a phone." It is designing for every context — one-handed on a bus, zoomed to 200% on a desktop, on a tablet in sunlight.

When to Use

• When ui-composition defines a layout that spans breakpoints
• When the design-critic flags responsive issues
• When building anything more complex than single-column

Breakpoint Strategy

Content drives breakpoints, not devices. Do not use 768px because "that's tablet." Use the width where your content breaks.

1. Start at 320px
2. Widen slowly
3. When the layout looks wrong — that's a breakpoint
4. Name by behaviour, not device

--bp-stack: 0;
--bp-sidebar: 640px;
--bp-columns: 900px;
--bp-wide: 1200px;

Content Priority Shifting

At narrow widths, decide what gets:

• Kept — essential for the task
• Collapsed — behind a toggle
• Deferred — lower in scroll order
• Hidden — removed (last resort)

Document these decisions.

Responsive Typography

--font-size-body: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--font-size-h1: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);

Body text minimum 16px. Line length 45-75 characters. At 200% zoom, no horizontal scroll (WCAG 1.4.10).

Container Queries vs Media Queries

Use case	Use
Page-level layout	@media
Component adaptation	@container

Touch Targets

44x44px minimum at mobile. 8px minimum gap between adjacent targets.

Testing

Test at: 320px, one pixel below each breakpoint, 200% zoom at 1280px, landscape phone, and real devices.

What You Deliver

• Breakpoint definitions with rationale
• Layout behaviour at each breakpoint
• Content priority decisions
• Typography scale with clamp() values
• Touch target verification

Integration

• Informed by: ui-composition, design-discovery
• Feeds into: design-builder, accessibility-reviewer