Responsive Design Patterns

Design fluid layouts that adapt gracefully across all screen sizes and devices.

Category: Design | Type: Skills

Skills: Responsive Design, Mobile First, Fluid Layouts

Prompt

Responsive design is not about shrinking — it is about adapting. Patterns: 1. Mobile First — start [your project] with the smallest screen. Add complexity as space allows. This forces prioritization. 2. Fluid Grids — use percentages and fr units, not fixed pixels. CSS Grid and Flexbox are your tools. 3. Breakpoint Strategy — design for content breakpoints, not device breakpoints. When the content looks broken, add a breakpoint. 4. Responsive Typography — use clamp() for fluid type: clamp(1rem, 2.5vw, 2rem). 5. Image Strategy — use srcset and sizes for art direction. Serve appropriate resolutions. 6. Touch Adaptation — increase touch targets, add spacing between interactive elements, remove hover-dependent interactions. The test: resize your browser slowly from wide to narrow. At no point should the design look broken or incomplete. Every pixel width should look intentional.

Browse all prompts at Ask Wisely