# Frontend Design Responsive

> Mobile-first responsive design: breakpoints, fluid layouts, touch optimization. Use when: user mentions responsive, mobile, tablet, multiple devices, or touch. Keywords: responsive, mobile, tablet, desktop, breakpoints, multi-device, viewport, screen size, touch Do NOT use for: desktop-only, general styling (→ frontend-design-fundamentals).

- Skill: `phananhtuan09/frontend-design-responsive` (Agent Skill)
- Install (CLI): `npx skillmds@latest add phananhtuan09/frontend-design-responsive`
- Raw SKILL.md: https://api.skillmd.com/api/skills/phananhtuan09/frontend-design-responsive/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: phananhtuan09 (https://skillmd.com/u/phananhtuan09)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/phananhtuan09/frontend-design-responsive

---


# Responsive Design

## Purpose
Create beautiful, functional UIs that adapt gracefully across all device sizes through mobile-first approach.

---

## Core Principle

**Mobile-First Approach**

Design for mobile first, enhance for larger screens.

**Why:**
- Most users on mobile devices
- Easier to enhance than to strip down
- Forces focus on essential content
- Better performance on mobile
- Encourages progressive enhancement

---

## Creative Responsive Patterns

### Beyond Stack→Row: Creative Layouts

**Standard pattern** (functional but predictable):
- Mobile: Stack vertically
- Desktop: Side-by-side columns

**Creative patterns:**

**Asymmetric Responsive:**
- Mobile: Single column with visual hierarchy through size
- Desktop: Asymmetric grid with unexpected placement

**Diagonal Flow:**
- Mobile: Vertical flow with diagonal visual elements
- Desktop: Diagonal layouts, overlapping sections

**Responsive Visual Hierarchy:**
- Scale dramatically: Primary CTAs, hero headings (2-3x increase)
- Scale subtly: Body text, labels (minimal change)
- Spacing hierarchy: Tight on mobile, generous on desktop

---

## Breakpoint System

### Defining Breakpoints

**Common approach (adjust to your content):**
- **Mobile**: ~320-640px (default, no media query)
- **Small/Tablet**: ~640-768px+
- **Medium**: ~768-1024px+
- **Large**: ~1024-1280px+
- **XLarge**: ~1280px+

**Guidelines:**
- Use 3-4 major breakpoints
- Choose values based on where YOUR content breaks
- Avoid device-specific breakpoints
- Use `min-width` queries (mobile-first)

### Mobile-First Pattern

**Progression:**
1. Mobile (default): Single column, stacked, touch-optimized
2. Tablet: 2 columns, more spacing
3. Desktop: Multi-column, hover states

---

## Responsive Typography

### Fluid Typography

**Approaches:**
- Viewport units: Scale proportionally
- clamp(): Define min, preferred, max sizes
- Stepped sizes: Different fixed sizes per breakpoint

**Guidelines:**
- Body text: 16px+ on mobile
- Scale up slightly on desktop (18-20px)
- Headings scale more than body
- Maintain hierarchy ratios across breakpoints

### Line Length

**Guidelines:**
- Mobile: 45-75 characters per line acceptable
- Desktop: 50-75 characters optimal
- Use max-width to constrain long-form content

---

## Responsive Layout Patterns

### Stack → Row

**Pattern:** Vertical on mobile, horizontal on larger screens.

**Use cases:** Navigation, form layouts, card grids, content + sidebar

### Fluid Grids

**Patterns:**
- Auto-fit: Columns wrap as needed
- Percentage-based: Columns use % width
- Flexible: Columns grow/shrink with flexbox

**Mobile:** 1 column
**Tablet:** 2 columns
**Desktop:** 3+ columns

### Sidebar Layouts

**Mobile:** Sidebar below main (stacked)
**Desktop:** Fixed sidebar + scrollable main

---

## Component Responsive Patterns

### Navigation

**Mobile:**
- Hamburger menu
- Full-screen overlay or drawer
- Touch-optimized tap targets

**Desktop:**
- Horizontal navigation bar
- Hover dropdowns
- Keyboard accessible

### Data Tables

**Mobile:**
- Transform to card layout
- Horizontal scroll (when cards inappropriate)
- Show only essential columns

**Desktop:**
- Full table with all columns
- Hover states on rows

### Forms

**Mobile:**
- Full-width inputs
- Single column layout
- Large touch targets (44x44px minimum)
- Vertical button groups

**Desktop:**
- Multi-column forms (when logical)
- Side-by-side labels and inputs

### Images and Media

**Responsive Images:**
- Multiple sizes for different screens
- Lazy loading for below-fold content
- Maintain consistent aspect ratios

---

## Touch Optimization

### Tap Target Sizes

**Standards (verify with your platform):**
- 44x44px (Apple/Google baseline)
- 48x48px (WCAG 2.1 AAA)
- Spacing between targets: 8px minimum

**Why:** Finger taps less precise than mouse (~9mm average finger pad)

**Applies to:** Buttons, links, form inputs, checkboxes/radios, icons

### Touch Gestures

**Standard gestures:**
- Tap: Activate/select
- Scroll: Navigate content
- Swipe: Navigate between items, dismiss
- Pinch: Zoom (when appropriate)

**Don't require:** Hover for critical functionality

### Touch Feedback

**Patterns:**
- Slight scale or opacity change on tap
- Ripple effect
- Brief highlight or color shift

**Timing:** 100-200ms, feels immediate

### Mobile Considerations

**Input focus:**
- iOS auto-zooms on inputs with font size < 16px
- Solution: Use 16px+ for input fields

**Viewport meta tag:**
- Always include: `<meta name="viewport" content="width=device-width, initial-scale=1">`

---

## Container Queries (Modern)

**Principle:** Components respond to their container size, not viewport.

**Why better:**
- Component-based (matches modern architecture)
- Reusable components adapt to any container

**Use cases:** Card components, nested layouts, design system components

---

## Responsive Spacing

### Fluid Spacing

**Approaches:**
- clamp(): Define min, preferred, max spacing
- Viewport units: Scale proportionally
- Stepped values: Different spacing per breakpoint

**Guidelines:**
- Mobile: Tighter spacing (conserve space)
- Desktop: Generous spacing (utilize available space)
- Maintain spacing scale ratios from design-fundamentals

---

## Testing Checklist

### Device Testing
- [ ] Real mobile devices (iOS, Android)
- [ ] Real tablets
- [ ] Desktop at various sizes
- [ ] Landscape and portrait orientations

### Browser DevTools
- [ ] Responsive design mode
- [ ] Test all major breakpoints
- [ ] Zoom to 200% (accessibility)
- [ ] Network throttling (performance)

### Touch Interaction
- [ ] All tap targets meet minimum size
- [ ] Adequate spacing between targets (8px+)
- [ ] Touch feedback visible
- [ ] No hover-only interactions for critical features

### Content & Aesthetic
- [ ] Text readable on all screen sizes
- [ ] Images scale properly
- [ ] No unintended horizontal scroll
- [ ] No content cut off
- [ ] Chosen aesthetic maintained across devices
- [ ] Visual hierarchy clear at all sizes

---

## Common Mistakes

1. **Desktop-first** - Start mobile, enhance up
2. **Fixed widths** - Use max-width instead
3. **Too many breakpoints** - 3-4 is enough
4. **Hover-only interactions** - Not accessible on touch
5. **Small touch targets** - Verify minimum size
6. **Horizontal scroll** - Only use intentionally
7. **Ignoring landscape** - Test both orientations
8. **No real device testing** - Emulators aren't enough
9. **Losing aesthetic on mobile** - Maintain distinctiveness
10. **Copying breakpoints blindly** - Base on YOUR content

---

## Key Takeaway

**Principles over prescriptive values. Fluidity over rigidity.**

Common standards (44px, 640px, 16px) are starting points, not absolute rules. Adjust to your design system, platform, and content needs.

Start with mobile constraints, enhance progressively. Maintain your aesthetic identity across all devices—adapted to each device's strengths.