# Responsive Design

> Design adaptive layouts and interactions that work across all screen sizes and input methods.

- Skill: `owl-listener/responsive-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add owl-listener/responsive-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/owl-listener/responsive-design/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media, Coding & Dev Tools, Web & Frontend, UI Design
- Tags: Adaptive Design, Breakpoints, Fluid Layouts, Mobile First, Responsive Design, Responsive Images, Responsive Typography, Touch Targets
- Author: Owl Listener (https://skillmd.com/u/owl-listener)
- Updated: 2026-07-06
- Page: https://skillmd.com/skills/owl-listener/responsive-design

---

# 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