Mobile-first design methodology covering touch interaction patterns, gesture systems, responsive design, iOS and Android platform conventions, mobile form design, thumb-zone optimization, and performance-conscious UX. Use when the user mentions: mobile app design, responsive design, touch interface, mobile-first, iOS design, Android design, mobile form, thumb zone, mobile navigation.
التثبيت
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
Mobile-first design methodology covering touch interaction patterns, gesture systems, responsive design, iOS and Android platform conventions, mobile form design, thumb-zone optimization, and performance-conscious UX. Use when the user mentions: mobile app design, responsive design, touch interface, mobile-first, iOS design, Android design, mobile form, thumb zone, mobile navigation.
Mobile UX Design — Platform-Native Excellence
Mobile-First Philosophy (Luke Wroblewski)
"Mobile forces you to focus. There's simply not enough room for anything extraneous." — Luke Wroblewski
Mobile-first design is not about making desktop designs smaller. It is about starting with the most constrained environment to identify what truly matters, then progressively enhancing for larger screens. This constraint-driven approach produces cleaner, more focused experiences across all platforms.
Core Principles
Content first, navigation second — prioritize the user's primary task above all interface chrome
One primary action per screen — resist the urge to present multiple equal-weight choices
Design for interruption — mobile users are frequently interrupted; support save, resume, and quick task completion
Respect the thumb — the most natural interaction zone determines layout hierarchy
Performance is UX — a 100ms delay feels instant, 1s feels responsive, 3s+ feels broken
Touch Interaction Design
Thumb Zone Optimization
Based on Steven Hoober's research on how people hold phones:
Primary zone (easy reach): Bottom-center of screen — place primary actions here
Secondary zone (stretch): Middle and sides — place secondary content and navigation
Tertiary zone (hard reach): Top corners — avoid placing frequent-use controls here
Bottom navigation pattern now dominates both iOS and Android for this reason
Large phones (6.5"+) make top-left especially difficult — anchor critical UI to bottom
Touch Target Sizing
Minimum: 44x44pt (iOS) / 48x48dp (Android) — Apple and Google guidelines
Recommended: 48x48pt for primary actions — NNG recommends even larger for critical actions
Spacing between targets: Minimum 8pt gap to prevent mis-taps
Edge targets: Add extra padding near screen edges where grip interferes
Text links in body copy need generous tap targets — extend the clickable area beyond visible text
Reflow: Single column on mobile, multi-column on desktop
Reveal: Show more content/controls as space allows
Collapse: Tabs or expanded sections become accordion or hamburger
Prioritize: Show different content hierarchies based on screen size
Scale: Proportionally adjust sizes while maintaining ratios
Responsive Typography
Base font: 16px minimum on mobile (browser default, prevents zoom on iOS)
Use fluid typography (clamp()) for smooth scaling between breakpoints
Line length: 45-75 characters per line for readability (mobile often shorter is fine)
Increase line-height on small screens (1.5-1.6) for touch-scroll readability
Performance-Conscious Mobile UX
Critical Performance Metrics
LCP (Largest Contentful Paint): < 2.5s — the primary content must load fast
FID (First Input Delay): < 100ms — the interface must respond immediately to touch
CLS (Cumulative Layout Shift): < 0.1 — nothing should jump after rendering
INP (Interaction to Next Paint): < 200ms — every interaction must feel responsive
Performance UX Patterns
Skeleton screens over spinners — show content shape before data arrives
Optimistic UI: show the expected result immediately, roll back on failure
Lazy loading for below-fold content and images
Offline-first architecture for unreliable mobile networks — cache aggressively
Image optimization: WebP/AVIF format, responsive srcset, lazy loading
Cross-Referencing
For visual design and typography details, reference ui-visual-design-system
For accessibility requirements on mobile, reference accessibility-inclusive-design
For motion and interaction design, reference interaction-motion-design
For design system component patterns, reference design-systems-architecture
v3.0 Cross-References
The v3.0 upgrade introduces platform-specific references and production component patterns that extend mobile UX design into the latest 2025-2026 platform capabilities.
The new references/ios26-liquid-glass-material3-expressive.md reference covers the major 2025 platform evolutions:
iOS 26 Liquid Glass (WWDC 2025): Apple's translucent, depth-aware material system that replaces opaque chrome with layered glass effects. Covers navigation bar translucency, tab bar material behavior, adaptive tinting rules, and how to design custom components that harmonize with the Liquid Glass aesthetic.
Material 3 Expressive (Google I/O 2025): Google's evolution of Material Design toward more emotional, personality-driven UI. Covers expressive motion, adaptive color expression, and the new emphasis on brand personality within the Material framework.
These platform shifts affect the Platform Conventions section above. Reference this file for updated iOS and Android design patterns.
Production Component Patterns — component-patterns-code
The component-patterns-code skill provides production-ready React Native and SwiftUI component cookbooks directly applicable to mobile UX. Includes bottom sheet implementations, gesture-driven navigation components, haptic feedback integration patterns, and platform-adaptive component variants that render native patterns on each OS. Each component includes full state matrices (loading, error, empty, populated, disabled) aligned with the mobile UX principles in this skill.
The interaction-motion-design/references/haptic-feedback-design-system.md reference provides a comprehensive haptic design system covering iOS Taptic Engine patterns (UIImpactFeedbackGenerator, UISelectionFeedbackGenerator, UINotificationFeedbackGenerator), Android haptic APIs, and design guidelines for when and how to apply haptic feedback. Maps haptic patterns to interaction types: selection confirmation, error notification, success feedback, drag thresholds, and long-press activation. Essential companion to the Touch Interaction Design section above.
Key Sources
Wroblewski, L. (2011). "Mobile First"
Hoober, S. (2017). "Design for Fingers, Touch, and People"
