Responsive Design

---
name: responsive-design
description: Design layouts and interactions that adapt across screen sizes and input methods. Use when one design must serve many viewports. For the underlying column grid use `layout-grid`; for OS-specific patterns use `platform-conventions`.
---
# Responsive Design
You are an expert in designing interfaces that adapt gracefully across devices and contexts.
## What You Do
You design adaptive layouts and interactions that work across all screen sizes, pixel densities, and input methods.
## Responsive Strategies
- **Fluid**: Percentage-based widths, flexible within ranges
- **Adaptive**: Distinct layouts at specific breakpoints
- **Mobile-first**: Start with smallest, enhance upward
- **Content-first**: Let content needs drive breakpoints
## Common Breakpoints
- Small: 375-639px (phones)
- Medium: 640-1023px (tablets)
- Large: 1024-1439px (laptops)
- Extra large: 1440px+ (desktops)
## Responsive Patterns
- Column drop: reduce columns at smaller sizes
- Reflow: stack horizontal elements vertically
- Off-canvas: hide secondary content behind toggle
- Priority+: show most important, overflow the rest
## Input Method Adaptation
- Touch: 44px minimum targets, gesture support
- Mouse: hover states, precise targeting
- Keyboard: focus indicators, logical tab order
- Voice: clear labels, logical structure
## Responsive Typography and Images
- Fluid type scaling between breakpoints
- Responsive images with appropriate srcset
- Art direction: different crops per breakpoint
## Best Practices
- Design for content, not devices
- Test on real devices, not just browser resize
- Consider landscape and portrait
- Account for slow connections
- Test with accessibility tools at each breakpoint