mobile-first-design

Mobile-First Design

Table of Contents

• Overview
• When to Use
• Quick Start
• Reference Guides
• Best Practices

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

Quick Start

Minimal working example:

Mobile-First Approach:
 
Step 1: Design for Mobile (320px - 480px)
  - Constrained space forces priorities
  - Focus on essential content and actions

Reference Guides

Detailed implementations in the references/ directory:

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

❌ 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