Prompts for Responsive Design

Prompts for Responsive Design

Most web traffic is mobile. Here's how to ensure your AI-built app works on all devices.

Responsive Basics

Breakpoints

• Mobile: < 640px
• Tablet: 640px - 1024px
• Desktop: > 1024px

Mobile-First

Design for mobile first, then enhance for larger screens. This produces better results.

Including Responsive in Initial Prompts

Basic Responsive Request

"Create a [page type] that is fully responsive and works well on mobile, tablet, and desktop."

Detailed Responsive Request

"Build a responsive [page type]. On mobile: single column layout, hamburger menu, full-width buttons. On tablet: two-column where appropriate. On desktop: full layout with sidebar navigation."

Common Responsive Patterns

Navigation

Desktop: Full horizontal menu Mobile: Hamburger icon → slide-out drawer

Prompt: "Navigation should be horizontal on desktop, hamburger menu with slide-out drawer on mobile. Include logo that shrinks slightly on mobile."

Grid Layouts

Desktop: Multi-column (3-4 columns) Mobile: Single column

Prompt: "Product grid: 4 columns on desktop, 2 on tablet, 1 on mobile. Maintain aspect ratio of images."

Hero Sections

Desktop: Image and text side by side Mobile: Image above text, stacked

Prompt: "Hero section with text on left, image on right for desktop. On mobile, stack with image above text. Reduce image size on mobile."

Sidebars

Desktop: Visible sidebar Mobile: Hidden, accessible via toggle

Prompt: "Dashboard with sidebar navigation. On mobile, hide sidebar and add hamburger toggle to show/hide it."

Mobile-Specific Prompts

Touch Targets

"Ensure all buttons and links have minimum 44px touch target size for mobile."

Font Sizes

"Use minimum 16px font size for body text to prevent zoom on mobile input."

Spacing

"Add more vertical spacing between sections on mobile for easier scrolling."

Forms

"On mobile, form inputs should be full-width and stacked vertically."

Fixing Responsive Issues

Content Overflow

Problem: Text or images extend beyond screen Fix: "Fix horizontal overflow on [section]. Ensure all content fits within the viewport on mobile."

Text Too Small

Problem: Text is hard to read on mobile Fix: "Increase text size on mobile. Body text minimum 16px, headings should scale appropriately."

Touch Targets Too Small

Problem: Buttons/links hard to tap Fix: "Increase button size and padding on mobile. Add more space between clickable elements."

Images Not Scaling

Problem: Images break layout Fix: "Make images responsive: max-width 100%, height auto. Use object-fit: cover where appropriate."

Horizontal Scroll

Problem: Page scrolls sideways Fix: "Remove horizontal scroll. Check for fixed-width elements and absolute positioning that causes overflow."

Testing Responsive

In Browser

1. Open Chrome DevTools (F12)
2. Click device toggle (Ctrl/Cmd + Shift + M)
3. Test various device sizes
4. Check both portrait and landscape

Key Things to Check

• Navigation works on all sizes
• Text is readable
• Images scale properly
• Forms are usable
• No horizontal scroll
• Buttons are tappable

Responsive Prompt Template

"Create a responsive [page type] that works on mobile, tablet, and desktop.

Mobile (< 640px):

• [Mobile-specific layout]
• [Mobile navigation style]
• [Mobile-specific adjustments]

Desktop (> 1024px):

• [Desktop layout]
• [Desktop navigation]
• [Desktop enhancements]

Ensure:

• Minimum 16px body text
• 44px minimum touch targets
• Images scale responsively
• No horizontal overflow"

Key Takeaways

1. Always request responsive design explicitly
2. Describe mobile behavior specifically
3. Test on actual mobile devices or emulator
4. Fix mobile issues with specific prompts
5. Mobile-first produces better results