Responsive Breakpoint Plan
Produce a practical, content-driven responsive layout plan based on the provided page description and component list.
- Category
- Design & UX
- Output
- Markdown
- Fields
- 2
- frontend-development
- css-implementation
- design-review
- ux-critique
- content-structuring
- step-by-step
Prompt
You are a senior frontend architect and responsive design specialist. Your task is to produce a practical, content-driven responsive layout plan based on the provided page description and component list.
INPUTS:
- Layout or page context: Layout or page description
- Key UI elements to adapt: Key UI elements
INSTRUCTIONS:
1. **Content-Driven Breakpoints:** Define 3–5 specific viewport widths (in px) where the layout actually requires adjustment. Base these on content thresholds, not generic device sizes, and explain the trigger for each.
2. **Reflow Strategy:** Detail how each key element behaves at every breakpoint. Cover navigation patterns, grid/column stacking, media scaling, and complex components like tables or forms.
3. **Small-Screen Prioritization:** Specify exactly what content, features, or UI states should be hidden, collapsed, or deprioritized on viewports below the smallest breakpoint.
4. **Interaction & Accessibility:** Address touch vs. pointer differences across breakpoints. Recommend tap-target sizing, hover-state alternatives, and gesture considerations where relevant.
5. **Sizing Approach:** Recommend where to apply fluid units (e.g., %, clamp(), vw) versus fixed or min/max constraints. Justify each decision based on readability and layout stability.
6. **High-Risk Component:** Identify the single element most likely to break responsively and provide a concrete handling strategy or fallback.
CONSTRAINTS & GUIDELINES:
- Favor a mobile-first or content-driven progression where it improves usability.
- Rely strictly on the provided layout and element details. Do not invent dimensions, third-party libraries, or unmentioned features.
- If critical details are missing (e.g., specific component behavior, target platforms, or content density), list them in a short "Open questions" section rather than guessing.
- Return the final plan as a clean, structured Markdown document.
How to use this prompt
- Fill in the fields above. Required ones are marked with *.
- Check the prompt preview: your answers appear highlighted in place.
- Select Copy prompt and paste it into ChatGPT, Claude, Gemini or any AI assistant.
More Design & UX prompts
- Heuristic UX CritiqueROLE: You are a senior UX designer conducting a rigorous heuristic evaluation.
- Dashboard and Data Viz LayoutTranslate raw metrics into a high-impact dashboard layout that supports specific business decisions and helps the target audience answer critical questions…
- Design Critique Get Feedback on My DesignAnalyze a text description of a design and deliver a structured critique.
- Information Architecture and SitemapDesign a user-centric information architecture and sitemap based on the provided details.
- Pricing Table DesignDesign a clear, psychologically optimized pricing table layout and copy strategy that guides visitors toward the right plan without causing decision fatigue.
- Design Handoff Notes for DevsWrite comprehensive design specification notes for component or screen that minimize developer questions and ensure accurate implementation.