mobile-first-design

SKILL.md

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
  - 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
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide
Contents

Responsive Design Implementation
Responsive Design Implementation

Mobile Performance
Mobile Performance

Progressive Enhancement
Progressive Enhancement

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

1d:[