Responsive Design

🔴 AI FIRST Quality Principle

Apply the AI FIRST principle: never accept first-pass quality. Minimum 2 iterations. Read all output, improve every section. No shortcuts.

Purpose

Create fluid, adaptable web experiences that work seamlessly across all devices from smartphones (320px) to large desktops (1440px+) using modern CSS techniques and mobile-first methodology.

Core Principles

1. Mobile-First: Design for smallest screen first, progressively enhance for larger
2. Fluid Typography: Use clamp() for scalable text across viewports
3. Flexible Layouts: CSS Grid and Flexbox for adaptable structures
4. Touch-Friendly: 44x44px minimum touch targets, adequate spacing
5. Performance: Optimize for mobile networks (lazy loading, efficient CSS)
6. Content Priority: Most important content visible without scrolling on mobile