mobile-design

Mobile Design - Mobile-First Design and Engineering Standards

Skills Overview

Mobile Design is a mobile-first design and engineering standard that helps developers avoid desktop-minded pitfalls when building iOS, Android, or cross-platform applications, ensuring application performance, usability, and security.

Use Cases

Pre-Assessment for Mobile App Development

Before writing code, use MFRI (Mobile Feasibility and Risk Index) to evaluate feature feasibility. Assess key dimensions such as platform clarity, interaction complexity, and performance risk to identify potential issues early.

Cross-Platform App Design and Development

Provide unified design principles and performance standards for React Native, Flutter, or native development. Clearly define what must be consistent (business logic, data models) and what must follow platform differences (navigation, gestures, icons).

Mobile Code Review and Optimization

Identify and fix common mobile anti-patterns, such as using ScrollView for long lists, touch targets that are too small, missing offline handling, and lack of performance optimization.

Core Capabilities

MFRI Feasibility Assessment System

Offers a scoring formula across five dimensions (platform clarity + accessibility readiness − interaction complexity − performance risk − offline dependencies). Outputs a risk score from −10 to +10. Based on the score tier, determine whether to proceed normally, add validation, simplify interactions, or redesign.

Mandatory Thinking-Process Checkpoints

Before starting any work, require developers to explicitly confirm the platform, framework, navigation approach, offline requirements, device range, and target users. This prevents assumption-based mistakes and requires reading relevant reference materials (touch psychology, performance standards, backend integration, testing and debugging, etc.).

Mobile Anti-Pattern Recognition Library

Includes common errors and best practices across three categories: performance, interaction, and security. Covers topics such as list component selection, touch target sizing, adherence to platform guidelines, and secure storage. Provides React Native and Flutter code standard examples.

Common Questions

Why do an MFRI assessment before mobile app development?

An MFRI assessment helps you identify feature feasibility risks before investing in development. Many mobile projects fail because they are designed in a desktop environment and ignore mobile constraints related to performance, networking, and interaction. With scoring across 5 dimensions, you can know in advance which features need to be simplified and which require additional validation, avoiding rework later.

What’s the difference in touch target sizes between iOS and Android?

iOS standards require a minimum touch target of 44pt (about 44 pixels), while Android standards require 48dp (about 48 pixels). Both are based on the accuracy limits of fingertip touch. Violating these standards can cause frequent mis-taps, severely impacting usability. This skill reminds you to follow these baselines when designing any interactive element.

Why can’t React Native use ScrollView for long lists?

ScrollView renders all child components at once, even those not visible on-screen. For long lists, this quickly consumes large amounts of memory, causing the app to stutter or even crash. The correct approach is to use FlatList or FlashList, which render only the rows in the visible area. Combined with keyExtractor, getItemLayout, and React.memo, this enables smooth scrolling. This skill forces you to avoid this kind of anti-pattern.