mobile-first-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mobile-First Design

移动优先设计

Overview

概述

Mobile-first design prioritizes small screens as the starting point, ensuring core functionality works on all devices while leveraging larger screens for enhanced experience.

移动优先设计将小屏幕作为设计起点，确保核心功能可在所有设备上运行，同时利用更大的屏幕来提升体验。

When to Use

适用场景

Web application design
Responsive website creation
Feature prioritization
Performance optimization
Progressive enhancement
Cross-device experience design

Web应用设计
响应式网站创建
功能优先级排序
性能优化
渐进式增强
跨设备体验设计

Instructions

操作指南

1. Mobile-First Principles

1. 移动优先原则

yaml

Mobile-First Approach:

Step 1: Design for Mobile (320px - 480px)
  - Constrained space forces priorities
  - Focus on essential content and actions
  - Single column layout
  - Touch-friendly interactive elements

Step 2: Enhance for Tablet (768px - 1024px)
  - Add secondary content
  - Multi-column layouts possible
  - Optimize spacing and readability
  - Take advantage of hover states

Step 3: Optimize for Desktop (1200px+)
  - Full-featured experience
  - Advanced layouts
  - Rich interactions
  - Multiple columns and sidebars

---

yaml

Mobile-First Approach:

Step 1: Design for Mobile (320px - 480px)
  - Constrained space forces priorities
  - Focus on essential content and actions
  - Single column layout
  - Touch-friendly interactive elements

Step 2: Enhance for Tablet (768px - 1024px)
  - Add secondary content
  - Multi-column layouts possible
  - Optimize spacing and readability
  - Take advantage of hover states

Step 3: Optimize for Desktop (1200px+)
  - Full-featured experience
  - Advanced layouts
  - Rich interactions
  - Multiple columns and sidebars

---

Responsive Breakpoints:

Mobile: 320px - 480px

iPhone SE, older phones
Strict space constraints
Touch-only interaction

Tablet: 481px - 768px

iPad mini, tablets
More space available
Touch + keyboard/mouse

Large Tablet/Small Desktop: 769px - 1024px

iPad Pro, small laptops
Transitional breakpoint
Both touch and pointer

Desktop: 1025px - 1440px

Standard laptops
Full feature set
Hover states enabled

Large Desktop: 1441px+

Ultrawide monitors
Consider max-width container
Avoid stretching too wide

Mobile: 320px - 480px

iPhone SE, older phones
Strict space constraints
Touch-only interaction

Tablet: 481px - 768px

iPad mini, tablets
More space available
Touch + keyboard/mouse

Large Tablet/Small Desktop: 769px - 1024px

iPad Pro, small laptops
Transitional breakpoint
Both touch and pointer

Desktop: 1025px - 1440px

Standard laptops
Full feature set
Hover states enabled

Large Desktop: 1441px+

Ultrawide monitors
Consider max-width container
Avoid stretching too wide

Mobile Design Patterns:

Navigation: Mobile: Hamburger menu, bottom tabs Tablet: Side drawer Desktop: Horizontal menu bar

Forms: Mobile: Single column, large touch targets (48px) Tablet: 2 columns if space allows Desktop: Multi-column, side-by-side labels

Content Layout: Mobile: Full width, single column Tablet: 1-2 columns Desktop: Multi-column, sidebar

Images: Mobile: Full width Tablet: Full or constrained width Desktop: Constrained width, may use columns

undefined

Navigation: Mobile: Hamburger menu, bottom tabs Tablet: Side drawer Desktop: Horizontal menu bar

Forms: Mobile: Single column, large touch targets (48px) Tablet: 2 columns if space allows Desktop: Multi-column, side-by-side labels

Content Layout: Mobile: Full width, single column Tablet: 1-2 columns Desktop: Multi-column, sidebar

Images: Mobile: Full width Tablet: Full or constrained width Desktop: Constrained width, may use columns

undefined

2. Responsive Design Implementation

2. 响应式设计实现

python

undefined

python

undefined

Implement responsive CSS and layouts

class ResponsiveDesign: def create_responsive_grid(self, mobile_cols=1): """CSS Grid responsive structure""" return { 'mobile': { 'columns': 1, 'gap': '16px', 'breakpoint': 'max-width: 480px' }, 'tablet': { 'columns': 2, 'gap': '24px', 'breakpoint': '481px - 768px' }, 'desktop': { 'columns': 3, 'gap': '32px', 'breakpoint': 'min-width: 769px' } }

def responsive_typography(self):
    """Fluid font sizes"""
    return {
        'h1': {
            'mobile': '24px',
            'tablet': '32px',
            'desktop': '48px',
            'line_height': {
                'mobile': '1.2',
                'desktop': '1.3'
            }
        },
        'body': {
            'mobile': '14px',
            'tablet': '16px',
            'desktop': '16px',
            'line_height': '1.6'
        }
    }

def responsive_spacing(self):
    """Adaptive padding and margins"""
    return {
        'container_padding': {
            'mobile': '16px',
            'tablet': '24px',
            'desktop': '32px'
        },
        'section_margin': {
            'mobile': '24px',
            'desktop': '48px'
        },
        'touch_target_size': '44px minimum (Apple)'
    }

def touch_friendly_design(self):
    """Mobile interaction optimization"""
    return {
        'button_size': '44px x 44px minimum',
        'touch_target_spacing': '8px minimum between',
        'form_input_height': '44px + 16px padding',
        'scrolling_area': 'Full width swipe friendly',
        'modal_height': 'Max 85vh, scrollable',
        'keyboard_awareness': 'Account for software keyboard'
    }

undefined

def responsive_typography(self):
    """Fluid font sizes"""
    return {
        'h1': {
            'mobile': '24px',
            'tablet': '32px',
            'desktop': '48px',
            'line_height': {
                'mobile': '1.2',
                'desktop': '1.3'
            }
        },
        'body': {
            'mobile': '14px',
            'tablet': '16px',
            'desktop': '16px',
            'line_height': '1.6'
        }
    }

def responsive_spacing(self):
    """Adaptive padding and margins"""
    return {
        'container_padding': {
            'mobile': '16px',
            'tablet': '24px',
            'desktop': '32px'
        },
        'section_margin': {
            'mobile': '24px',
            'desktop': '48px'
        },
        'touch_target_size': '44px minimum (Apple)'
    }

def touch_friendly_design(self):
    """Mobile interaction optimization"""
    return {
        'button_size': '44px x 44px minimum',
        'touch_target_spacing': '8px minimum between',
        'form_input_height': '44px + 16px padding',
        'scrolling_area': 'Full width swipe friendly',
        'modal_height': 'Max 85vh, scrollable',
        'keyboard_awareness': 'Account for software keyboard'
    }

undefined

3. Mobile Performance

3. 移动端性能

yaml

Mobile Performance Optimization:

Image Optimization:
  - Responsive images (srcset, picture element)
  - WebP format with fallback
  - Lazy loading for below-fold
  - Compress ruthlessly
  - Serve appropriately sized images

Metric Goals:
  - Mobile: <3 second First Contentful Paint
  - Mobile: <4 second Largest Contentful Paint
  - Mobile: < 100 Cumulative Layout Shift

Bundle Size:
  - Mobile: <100KB JavaScript (gzipped)
  - Mobile: <50KB CSS (gzipped)
  - Critical CSS inline

Network:
  - Minimize requests (combine files)
  - Enable gzip compression
  - Use CDN for assets
  - Cache aggressively

---

Testing Devices:

Physical Devices:
  - iPhone SE (320px baseline)
  - iPhone 13 Pro (390px)
  - Samsung S21 (360px)
  - iPad (768px)

Emulation:
  - Chrome DevTools device mode
  - Responsive design mode
  - Test orientation changes

Real Device Testing:
  - Test on actual devices
  - Check touch interactions
  - Verify performance
  - Test with slow network

yaml

Mobile Performance Optimization:

Image Optimization:
  - Responsive images (srcset, picture element)
  - WebP format with fallback
  - Lazy loading for below-fold
  - Compress ruthlessly
  - Serve appropriately sized images

Metric Goals:
  - Mobile: <3 second First Contentful Paint
  - Mobile: <4 second Largest Contentful Paint
  - Mobile: < 100 Cumulative Layout Shift

Bundle Size:
  - Mobile: <100KB JavaScript (gzipped)
  - Mobile: <50KB CSS (gzipped)
  - Critical CSS inline

Network:
  - Minimize requests (combine files)
  - Enable gzip compression
  - Use CDN for assets
  - Cache aggressively

---

Testing Devices:

Physical Devices:
  - iPhone SE (320px baseline)
  - iPhone 13 Pro (390px)
  - Samsung S21 (360px)
  - iPad (768px)

Emulation:
  - Chrome DevTools device mode
  - Responsive design mode
  - Test orientation changes

Real Device Testing:
  - Test on actual devices
  - Check touch interactions
  - Verify performance
  - Test with slow network

4. Progressive Enhancement

4. 渐进式增强

yaml

Progressive Enhancement Strategy:

Layer 1: Core Content (HTML)
  - Semantic HTML
  - Works without CSS or JavaScript
  - Text content readable
  - Forms functional

Layer 2: Enhanced (CSS)
  - Visual design
  - Layout and spacing
  - Colors and typography
  - Responsive design

Layer 3: Interactive (JavaScript)
  - Progressive loading
  - Form enhancements
  - Smooth interactions
  - Offline functionality
  - Push notifications

Fallback Approach:
  - Input: range slider → Text input fallback
  - Video: HTML5 video → Link to download
  - Map: Interactive map → Static image link
  - Single-page app → Server-side rendering

---

Testing Strategy:

1. Disable JavaScript
   - Core content still accessible
   - Forms still submit
   - Links work

2. Slow 3G Network
   - Page loads
   - Critical content visible
   - Non-critical lazy loads

3. No Styles (CSS disabled)
   - Content readable
   - Text size appropriate
   - Contrast sufficient

yaml

Progressive Enhancement Strategy:

Layer 1: Core Content (HTML)
  - Semantic HTML
  - Works without CSS or JavaScript
  - Text content readable
  - Forms functional

Layer 2: Enhanced (CSS)
  - Visual design
  - Layout and spacing
  - Colors and typography
  - Responsive design

Layer 3: Interactive (JavaScript)
  - Progressive loading
  - Form enhancements
  - Smooth interactions
  - Offline functionality
  - Push notifications

Fallback Approach:
  - Input: range slider → Text input fallback
  - Video: HTML5 video → Link to download
  - Map: Interactive map → Static image link
  - Single-page app → Server-side rendering

---

Testing Strategy:

1. Disable JavaScript
   - Core content still accessible
   - Forms still submit
   - Links work

2. Slow 3G Network
   - Page loads
   - Critical content visible
   - Non-critical lazy loads

3. No Styles (CSS disabled)
   - Content readable
   - Text size appropriate
   - Contrast sufficient

Best Practices

最佳实践

✅ DO

✅ 建议

Design for smallest screen first
Test on real mobile devices
Use responsive images
Optimize for mobile performance
Make touch targets 44x44px minimum
Stack content vertically on mobile
Use hamburger menu on mobile
Hide non-essential content on mobile
Test with slow networks
Progressive enhancement approach

先针对最小屏幕进行设计
在真实移动设备上测试
使用响应式图片
针对移动端优化性能
确保触摸目标最小为44x44px
在移动端垂直堆叠内容
在移动端使用汉堡菜单
在移动端隐藏非必要内容
在慢速网络环境下测试
采用渐进式增强方法

❌ DON'T

❌ 避免

Assume all mobile users have fast networks
Use desktop-only patterns on mobile
Ignore touch interaction needs
Make buttons too small
Forget about landscape orientation
Over-complicate mobile layout
Ignore mobile performance
Assume no keyboard (iPad users)
Skip mobile user testing
Forget about notches and safe areas

假设所有移动用户都拥有高速网络
在移动端使用仅适用于桌面端的设计模式
忽略触摸交互需求
按钮尺寸过小
忽略横屏方向
过度复杂化移动端布局
忽略移动端性能
假设用户不使用键盘（iPad用户）
跳过移动端用户测试
忽略刘海屏和安全区域

Mobile-First Design Tips

移动优先设计技巧

Use max-width containers (max 1200px typical)
Test on oldest iPhone SE (320px) for baseline
Implement touch-friendly spacing (48px minimum)
Use flexible layouts over fixed widths
Test with slow 3G network simulation

使用最大宽度容器（通常最大为1200px）
以旧款iPhone SE（320px）为基准进行测试
实现适合触摸的间距（最小48px）
使用弹性布局而非固定宽度
在慢速3G网络模拟环境下测试