Design a Responsive Breakpoint Strategy for Modern Web Applications
Develop a complete responsive breakpoint strategy with grid systems, typography scales, and component behavior patterns for any web project.
📝 The Prompt
Act as an expert responsive web design consultant. Develop a comprehensive responsive breakpoint strategy for a [PROJECT TYPE, e.g., 'e-commerce platform'] that must support [TARGET DEVICES, e.g., 'mobile phones, tablets, laptops, desktops, and ultra-wide monitors']. The primary user base accesses the site [USAGE CONTEXT, e.g., '60% mobile, 30% desktop, 10% tablet based on analytics'].
Deliver the following:
1. **Breakpoint Definitions:** Define 4-6 named breakpoints with exact pixel values and the rationale behind each value. Use a [APPROACH: 'mobile-first' or 'desktop-first'] methodology. Present as a table with columns: Token Name, Min-Width, Max-Width, Target Devices, and CSS Media Query.
2. **Grid System:** Specify the grid configuration at each breakpoint including number of columns, gutter width, margin width, and maximum container width. Explain how the grid adapts across breakpoints.
3. **Typography Scale:** Define how font sizes, line heights, and heading hierarchies adjust across breakpoints. Provide recommended values in rem/em units with a modular scale ratio for each range.
4. **Spacing System:** Propose a spacing scale (4px or 8px base) and explain how spacing tokens should adapt at different breakpoints. Include a mapping table.
5. **Component Behavior Patterns:** For these common UI patterns — [COMPONENTS, e.g., 'navigation menu, hero section, product grid, footer, sidebar, data tables'] — describe exactly how each should transform or reflow at each breakpoint. Include layout shift descriptions.
6. **Image & Media Strategy:** Recommend responsive image approaches (srcset, sizes, art direction) and specify optimal image dimensions to serve at each breakpoint for performance.
7. **Testing Checklist:** Provide a QA checklist of 10-15 specific devices and viewport sizes to test against, including both portrait and landscape orientations.
8. **CSS Implementation:** Output the breakpoints as CSS custom properties and as SCSS mixins ready for developer use.
Ensure all recommendations account for touch targets (minimum 44x44px), readability, and Core Web Vitals performance.
💡 Tips for Better Results
Share your actual analytics data on device usage so the AI can weight breakpoints toward your real audience rather than generic assumptions.
Specify whether you prefer mobile-first or desktop-first — this fundamentally changes the media query structure and development workflow.
Ask for the output in your preferred CSS methodology (vanilla CSS, SCSS, Tailwind config, or Styled Components) so it's immediately usable in your project.
🎯 Use Cases
Perfect for frontend developers, web designers, and technical leads planning or refactoring the responsive architecture of a website or web application.