---
description: Mobile-first UX patterns and touch interaction design
alwaysApply: false
globs: **/*.{ts,tsx,js,jsx,vue,css,scss}
---

# Mobile UX Patterns & Touch Interactions

## Mobile-First Philosophy

Start with mobile constraints, then progressively enhance for larger screens.

### Design Process

1. **Mobile (320-480px)**: Core functionality only
2. **Tablet (768-1024px)**: Add supporting features
3. **Desktop (1280px+)**: Enhanced experience

## Touch Target Sizing

### Minimum 44x44px Touch Targets

```css
.touch-target {
  min-width: 44px;
  min-height: 44px;
  /* Apple HIG recommendation */
}

.touch-target-optimal {
  min-width: 48px;
  min-height: 48px;
  /* Material Design recommendation */
}
```

### Spacing Between Targets

```css
.button-group {
  display: flex;
  gap: 16px; /* Comfortable spacing */
}
```

## Thumb-Friendly Zones

```
┌─────────────────┐
│  Hard to reach  │ ← Top 20%
├─────────────────┤
│   Easy reach    │ ← Middle 60%
├─────────────────┤
│  Natural thumb  │ ← Bottom 20%
│      zone       │ (place primary actions here)
└─────────────────┘
```

Primary actions should be placed in the bottom 20% for one-handed use.

## Dynamic Viewport Height

```css
/* Use dvh instead of vh for mobile */
.hero {
  height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
  height: 100vh;
  height: 100dvh;
}
```

## Safe Area Insets (iOS)

```css
.header {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.footer {
  padding-bottom: env(safe-area-inset-bottom);
}
```

## Form Input Optimization

```html
<!-- Use correct input types for mobile keyboards -->
<input type="email" inputmode="email">
<input type="number" inputmode="numeric">
<input type="tel" inputmode="tel">
<input type="url" inputmode="url">
```

```css
/* Prevent iOS zoom on focus */
input, select, textarea {
  font-size: 16px; /* Minimum to prevent zoom */
}
```

## Touch Feedback

```css
.button {
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.button:active {
  transform: scale(0.95);
  opacity: 0.8;
}
```