Responsive Design Strategy
Create responsive design strategies with breakpoints, layout adaptations, and component behavior across devices.
Prompt
Create a responsive design strategy for [feature/page name].
Context:
- Feature/page: [name]
- Content types: [list]
- Key interactions: [list]
- Design constraints: [describe]
Provide:
1. Device Strategy
- Target devices (mobile, tablet, desktop)
- Primary device (if applicable)
- Device priorities
- Testing approach
2. Breakpoint Strategy
- Breakpoint definitions
- Rationale for each breakpoint
- Layout changes at each breakpoint
- Component adaptations
3. Layout Adaptations
For each breakpoint:
- Grid system
- Column structure
- Spacing adjustments
- Content prioritization
4. Component Behavior
- How components adapt
- When to show/hide elements
- Navigation patterns
- Form adaptations
- Image/media handling
5. Typography Scaling
- Font size adjustments
- Line height adjustments
- Heading hierarchy
- Readability considerations
6. Touch & Interaction
- Touch target sizes
- Gesture considerations
- Hover state alternatives
- Input method adaptations
7. Performance Considerations
- Image optimization
- Asset loading strategies
- Animation performance
- Code splitting considerations
8. Content Strategy
- What content to prioritize
- What to hide or simplify
- Progressive disclosure
- Content hierarchy
9. Testing Plan
- Devices to test on
- Browsers to test
- Key scenarios to test
- Edge cases to consider
10. Implementation Notes
- CSS approach (mobile-first vs desktop-first)
- Framework considerations
- Component library considerations
- Maintenance approach
Format as a comprehensive responsive design strategy document.How to use
- 1Replace [feature/page name], [list], and [describe] with your specific details
- 2Add context before the prompt: Describe the feature/page and design approach. Example: "Feature: Dashboard. Content types: Charts, tables, filters. Key interactions: Filtering, sorting. Design constraints: Must work on mobile (320px) to desktop (1920px)."
- 3If you have existing designs: Paste design files or screenshots. Say "Design files: [paste links or describe]"
- 4If you have breakpoint preferences: Mention breakpoints. Say "Breakpoints: 768px (tablet), 1024px (desktop)"
- 5Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude
- 6Review the responsive strategy: Check breakpoint strategy, layout adaptations, component behavior, and typography scaling
- 7Ask for specifics: Request "Focus on mobile-first approach" or "Detail tablet breakpoint behavior" or "Expand component adaptations"
- 8Export to your tool: Copy the responsive strategy to Figma, Notion, or your design documentation
- 9Use for implementation: Apply the responsive strategy to guide your responsive design implementation
Pro Tips
- • Specify design approach: Mention "Mobile-first" or "Desktop-first" so AI suggests appropriate approach
- • Include breakpoint preferences: Mention your breakpoints (e.g., "768px, 1024px, 1440px") so AI uses them
- • For complex layouts: Break down complex layouts into sections: "Create strategy for dashboard sidebar navigation"
- • Request component adaptations: Ask "How should this component adapt at mobile vs desktop?" for component-specific guidance
- • Save as template: Reuse the responsive strategy structure for future responsive designs
