4 min read
Responsive Design
Designs need to work across screen sizes. This guide covers how to describe responsive behavior to Claude and implement flexible layouts.
Describing Breakpoints
Common breakpoint vocabulary
- Mobile: 320-480px
- Tablet: 768px
- Desktop: 1024px+
- Large desktop: 1440px+
How to communicate
- “Below 768px, stack the columns vertically”
- “On mobile, hide the sidebar”
- “Desktop shows 3 columns, tablet shows 2, mobile shows 1”
Mobile-first prompting
- Start with mobile layout
- Add complexity for larger screens
- “Start with mobile, then expand for desktop”
Layout Patterns
Stacking
- Side-by-side on desktop
- Stacked on mobile
- “Put these side by side on desktop, stacked on mobile”
Grid adjustments
- Column count changes with width
- “3 columns on desktop, 2 on tablet, 1 on mobile”
- Consider minimum item widths
Show/hide elements
- Hide navigation on mobile, show hamburger
- Hide sidebar, show bottom navigation
- “Hide the filter sidebar on mobile, show a filter button instead”
Content priority
- Reorder content for mobile
- Lead with essential information
- “On mobile, show the price above the description”
Fluid Typography & Spacing
Fluid type sizes
- Larger headings on desktop
- Scale down proportionally on mobile
- “H1 should be 48px on desktop, 32px on mobile”
Responsive spacing
- More whitespace on larger screens
- Tighter spacing on mobile
- “Double the section padding on desktop”
Relative units
- Use rem/em for scalability
- Percentages for widths
- Viewport units for hero sections
Platform-Specific Patterns
Web
- CSS Grid and Flexbox for layout
- Media queries for breakpoints
- Container queries for component-level responsiveness
- CSS custom properties for spacing scales
iOS
- Size classes (compact/regular)
- Different layouts for iPhone vs iPad
- Safe areas for notch and home indicator
- NavigationSplitView for adaptive navigation
macOS
- Window resizing behavior
- Minimum and maximum window sizes
- Sidebar collapse behavior
- Responsive toolbar items
Example Prompts
Basic responsive layout
Make this layout responsive. On desktop, show the
sidebar and content side by side. On mobile (below 768px),
hide the sidebar and add a hamburger menu.Responsive grid
The product grid should show:
- 4 columns on large desktop
- 3 columns on desktop
- 2 columns on tablet
- 1 column on mobileFluid typography
Set up responsive typography:
- H1: 48px on desktop, 32px on mobile
- H2: 32px on desktop, 24px on mobile
- Body: 18px on desktop, 16px on mobile
Transition smoothly between breakpoints.Adaptive navigation
Implement adaptive navigation:
- Desktop: Horizontal nav bar with all items visible
- Tablet: Horizontal with overflow menu
- Mobile: Bottom tab bar with 4 main itemsResponsive images
Images should fill their container width but
never exceed their natural size. On mobile,
images should be full-width with 16:9 aspect ratio.Testing Responsive Designs
Browser tools
- Chrome DevTools device mode
- Firefox Responsive Design Mode
- Resize the window manually
What to check
- All breakpoints render correctly
- Text remains readable
- Touch targets are large enough on mobile (44px minimum)
- Nothing overflows or gets cut off
Common issues
- Text too small on mobile
- Buttons too close together
- Horizontal scroll where it shouldn’t be
- Images stretching or cropping badly
Debugging Prompts
Layout broken at size
The layout breaks at around 600px width.
The sidebar and content overlap.
Can you check the breakpoint logic?Touch targets too small
On mobile, the buttons are too small to tap easily.
Make sure all interactive elements are at least 44px.Content overflow
On narrow screens, the text overflows its container.
Add proper wrapping and truncation.What You’ll Learn
- How to describe responsive behavior
- Common layout patterns for different screens
- Fluid typography and spacing approaches
- Platform-specific considerations
- Testing and debugging responsive layouts