Mobile First Design

# Mobile Performance

## Mobile Performance

```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
```


# Progressive Enhancement

## Progressive Enhancement

```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
```


# Responsive Design Implementation

## Responsive Design Implementation

```python
# 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',