Mobile Design

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:

/* 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

// 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:

/* 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:

<!-- 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):

/* 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

// 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:

/* 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

// 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 {