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