YAML
---
name: designing-responsive-layouts
description: Analyzes designs for responsive excellence using mobile-first methodology. Use when reviewing desktop designs, planning breakpoint strategies, or ensuring cross-device usability.
---

Responsive Design Analysis

CSS
/* Mobile-first fluid typography */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p { font-size: clamp(0.875rem, 2.5vw, 1rem); }

/* Touch targets */
button { min-height: 44px; min-width: 44px; }

/* Responsive image */
<img src="image-320.jpg" 
     srcset="image-320.jpg 320w, image-768.jpg 768w, image-1024.jpg 1024w"
     sizes="(max-width: 768px) 100vw, 50vw" />

When analyzing a desktop design:

Progress:

• Create content priority matrix for 320px
• Identify touch target violations
• Plan component behavior changes
• Define breakpoint-specific layouts
• Set up fluid typography scale
• Plan image delivery strategy

Content Priority Matrix

1. Critical (always visible): Primary CTA, key message, navigation
2. Important (visible by 768px): Secondary content, features
3. Nice-to-have (desktop only): Decorative elements, tertiary content

Breakpoint Strategy

• 320px: Single column, stacked components
• 768px: Introduce two-column layouts, show secondary content
• 1024px: Multi-column grids, side navigation
• 1440px: Maximum width containers, enhanced spacing

Example 1: Hero Section Analysis Input: Desktop hero with large heading, paragraph, two CTAs side-by-side, background image Output:

• 320px: Stack CTAs vertically, reduce heading size, simplified background
• 768px: CTAs can be horizontal, medium heading
• 1024px+: Full desktop layout
• Risks: CTA spacing <44px, text too small on mobile

Example 2: Card Grid Input: 4-column product grid Output:

• 320px: 1 column
• 768px: 2 columns
• 1024px: 3 columns
• 1440px: 4 columns
• Risks: Cards too narrow, images need srcset

Typography:

CSS
/* Use clamp() for fluid scaling */
font-size: clamp(min-size, preferred-size, max-size);
line-height: 1.4-1.6;

Touch Targets:

• Minimum 44×44px (iOS) or 48×48dp (Android)
• 8px minimum spacing between targets
• Consider thumb reach zones

Images:

HTML
<picture>
  <source media="(max-width: 768px)" srcset="mobile.jpg">
  <source media="(max-width: 1024px)" srcset="tablet.jpg">
  <img src="desktop.jpg" alt="description">
</picture>

Component Behavior:

• Navigation: Hamburger → horizontal tabs → full menu
• Forms: Stacked → side-by-side → multi-column
• Tables: Scroll → cards → full table

• Fixed pixel values instead of relative units
• Hover states without touch alternatives
• Tiny touch targets (<44px)
• Dense layouts without breathing room on mobile
• Missing image optimization for different screen densities
• Assuming portrait orientation (consider landscape tablets)
• Desktop-first thinking leading to mobile compromises

Red Flags to Auto-Identify:

• Text below 16px on mobile
• CTAs closer than 8px apart
• Multi-column layouts without mobile fallback
• Fixed-width containers
• Hover-dependent interactions
• Complex tables without mobile strategy