mobile-design

What this skill does

# Mobile Design Skill

## When to Use This Skill

Use this skill when working on:

- **Mobile-First Web Applications**: Building responsive websites that prioritize mobile user experience
- **Native Mobile Apps**: Designing iOS or Android applications with platform-specific patterns
- **Progressive Web Apps (PWAs)**: Creating app-like experiences in the browser
- **Hybrid Mobile Applications**: Developing cross-platform apps using React Native, Flutter, or similar frameworks
- **Responsive Design Systems**: Creating components that adapt seamlessly across devices
- **Touch-First Interfaces**: Designing for touchscreen interactions rather than mouse/keyboard
- **Mobile E-commerce**: Building shopping experiences optimized for small screens
- **Mobile Dashboards**: Adapting data-heavy interfaces for mobile consumption
- **Gesture-Based Interfaces**: Implementing swipe, pinch, and other touch gestures
- **Accessibility Audits**: Ensuring mobile interfaces meet accessibility standards

This skill helps you create mobile experiences that feel native, perform well, and delight users on smartphones and tablets.

## Core Concepts

### Mobile-First Design Philosophy

Mobile-first design starts with the smallest screen and progressively enhances for larger devices:

**Why Mobile-First?**
- Forces prioritization of essential content and features
- Improves performance by default (lighter assets, simpler layouts)
- Easier to scale up than scale down
- Reflects actual user behavior (mobile traffic often exceeds desktop)
- Ensures core functionality works on all devices

**Mobile-First vs Desktop-First:**

```css
/* Mobile-First Approach (Recommended) */
/* Base styles for mobile */
.container {
  padding: 16px;
  font-size: 14px;
}

/* Tablet enhancements */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    font-size: 16px;
  }
}

/* Desktop enhancements */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Desktop-First Approach (Not Recommended) */
/* Base styles for desktop */
.container {
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 16px;
}

/* Tablet overrides */
@media (max-width: 1023px) {
  .container {
    padding: 24px;
  }
}

/* Mobile overrides */
@media (max-width: 767px) {
  .container {
    padding: 16px;
    font-size: 14px;
  }
}
```

### Touch Targets and Ergonomics

**Minimum Touch Target Sizes:**
- Apple: 44×44 points (iOS Human Interface Guidelines)
- Google: 48×48 dp (Material Design)
- Microsoft: 40×40 pixels (Windows Phone)
- **Recommended**: 48×48 pixels minimum, 56×56 pixels optimal

**Touch Target Spacing:**
- Minimum 8px spacing between interactive elements
- Optimal 12-16px spacing for frequently used controls
- Edge-to-edge buttons can touch if they're different types (e.g., cancel vs confirm)

**Thumb Zones:**

Mobile screens have three ergonomic zones:

1. **Easy Zone** (Green): Bottom third, center - easiest to reach with thumb
2. **Stretch Zone** (Yellow): Middle area - requires slight reach
3. **Difficult Zone** (Red): Top corners - hardest to reach one-handed

**Design Implications:**
- Place primary actions in the easy zone (bottom center)
- Put destructive actions in difficult zones (top corners)
- Navigation typically at top or bottom, never middle
- Consider both left-handed and right-handed users

```jsx
// React Native: Bottom-aligned primary action (easy zone)
<View style={styles.container}>
  <ScrollView style={styles.content}>
    {/* Main content */}
  </ScrollView>

  <View style={styles.bottomActions}>
    <TouchableOpacity style={styles.primaryButton}>
      <Text>Continue</Text>
    </TouchableOpacity>
  </View>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
  },
  bottomActions: {
    padding: 16,
    paddingBottom: 32, // Extra padding for iPhone home indicator
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
  },
  primaryButton: {
    height: 56, // Optimal touch target
    borderRadius: 28,
    backgroundColor: '#007AFF',
    justifyContent: 'center',
    alignItems: 'center',
  },
});
```

### Viewport and Screen Considerations

**Common Mobile Breakpoints:**

```css
/* Extra small devices (phones, 320px - 479px) */
@media (min-width: 320px) { }

/* Small devices (large phones, 480px - 767px) */
@media (min-width: 480px) { }

/* Medium devices (tablets, 768px - 1023px) */
@media (min-width: 768px) { }

/* Large devices (small laptops, 1024px - 1279px) */
@media (min-width: 1024px) { }

/* Extra large devices (desktops, 1280px and up) */
@media (min-width: 1280px) { }
```

**Viewport Meta Tag:**

```html
<!-- Responsive viewport (required for mobile) -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes">

<!-- PWA with standalone mode -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
```

**Safe Areas (iPhone X and later):**

```css
/* Account for notch and home indicator */
.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);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
```

## Touch Interactions

### Tap (Primary Interaction)

**Single Tap:**
- Primary action on buttons, links, list items
- Should provide immediate visual feedback (0-100ms delay)
- Minimum size: 48×48 pixels

```jsx
// React: Tap with visual feedback
import { useState } from 'react';

function TapButton({ onPress, children }) {
  const [isPressed, setIsPressed] = useState(false);

  return (
    <button
      className={`tap-button ${isPressed ? 'pressed' : ''}`}
      onTouchStart={() => setIsPressed(true)}
      onTouchEnd={() => setIsPressed(false)}
      onTouchCancel={() => setIsPressed(false)}
      onClick={onPress}
    >
      {children}
    </button>
  );
}

// CSS
.tap-button {
  padding: 16px 24px;
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  min-height: 48px;
  transition: transform 0.1s, background 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.tap-button.pressed {
  transform: scale(0.96);
  background: #0051D5;
}

.tap-button:active {
  transform: scale(0.96);
}
```

**Double Tap:**
- Zoom in/out (maps, images)
- Like/favorite (Instagram, Twitter)
- Less common, use sparingly

**iOS Double-Tap Zoom Prevention:**

```css
/* Prevent double-tap zoom while allowing pinch zoom */
touch-action: manipulation;
```

### Swipe Gestures

**Horizontal Swipe:**
- Navigate between screens/pages
- Reveal actions (swipe-to-delete, swipe-to-archive)
- Dismiss cards/modals
- Switch tabs

```jsx
// React: Swipeable list item
import { useState } from 'react';

function SwipeableListItem({ children, onDelete, onArchive }) {
  const [touchStart, setTouchStart] = useState(null);
  const [touchEnd, setTouchEnd] = useState(null);
  const [translateX, setTranslateX] = useState(0);

  const minSwipeDistance = 50;

  const onTouchStart = (e) => {
    setTouchEnd(null);
    setTouchStart(e.targetTouches[0].clientX);
  };

  const onTouchMove = (e) => {
    setTouchEnd(e.targetTouches[0].clientX);
    const distance = touchStart - e.targetTouches[0].clientX;
    setTranslateX(-distance);
  };

  const onTouchEnd = () => {
    if (!touchStart || !touchEnd) return;

    const distance = touchStart - touchEnd;
    const isLeftSwipe = distance > minSwipeDistance;
    const isRightSwipe = distance < -minSwipeDistance;

    if (isLeftSwipe) {
      setTranslateX(-80); // Show actions
    } else if (isRightSwipe) {
      setTranslateX(0); // Reset
    } else {
      setTranslateX(0); // Snap