184 lines
7.0 KiB
Markdown
184 lines
7.0 KiB
Markdown
# Mobile Responsiveness for Ecommerce Storefronts
|
|
|
|
## Contents
|
|
|
|
- [Overview](#overview)
|
|
- [Mobile Ecommerce Patterns](#mobile-ecommerce-patterns)
|
|
- [Touch-Friendly Interactions](#touch-friendly-interactions)
|
|
- [Mobile Performance](#mobile-performance)
|
|
- [Safe Area Insets (iOS)](#safe-area-insets-ios)
|
|
- [Common Mobile Mistakes](#common-mobile-mistakes)
|
|
|
|
## Overview
|
|
|
|
Over 60% of ecommerce traffic is mobile. Mobile-first design is essential for conversion.
|
|
|
|
### Key Requirements
|
|
|
|
- Mobile-first CSS (min-width media queries)
|
|
- 44x44px minimum touch targets
|
|
- Sticky header with cart access
|
|
- Large form inputs (48px height minimum)
|
|
- Optimized images for mobile
|
|
- Fast loading (LCP < 2.5s)
|
|
|
|
**Assumed knowledge**: AI agents already know mobile-first design principles, breakpoints, and responsive CSS. This guide focuses on ecommerce-specific mobile patterns.
|
|
|
|
## Mobile Ecommerce Patterns
|
|
|
|
### Sticky Elements (Critical for Conversion)
|
|
|
|
**Cart access always visible:**
|
|
- Sticky header with cart icon (top-right)
|
|
- Or: Sticky bottom navigation with cart
|
|
- Never hide cart in hamburger drawer
|
|
- Shows count badge, updates in real-time
|
|
|
|
**Sticky "Add to Cart" bar (product pages):**
|
|
- Fixed at bottom of screen
|
|
- Shows: Price + "Add to Cart" button
|
|
- Appears after scrolling past fold
|
|
- Always accessible without scrolling
|
|
- **CRITICAL: Must use `env(safe-area-inset-bottom)` for iOS devices** (see Safe Area Insets section)
|
|
- Significantly higher conversion rates
|
|
|
|
### Mobile Navigation Patterns
|
|
|
|
**Bottom navigation (optional pattern):**
|
|
- Consider for mobile-heavy stores (>70% mobile traffic)
|
|
- 4-5 primary actions: Home, Categories, Cart, Account, Search
|
|
- Fixed at bottom (easier thumb access)
|
|
- Icons + labels for clarity
|
|
|
|
**When to use:**
|
|
- Mobile-first brands (fashion, beauty)
|
|
- Younger demographic (18-34)
|
|
- App-like experience desired
|
|
|
|
**When NOT to use:**
|
|
- Desktop-heavy traffic
|
|
- Complex navigation needs (>5 items)
|
|
- B2B stores (desktop-focused)
|
|
|
|
### Mobile Product Browsing
|
|
|
|
**Image galleries:**
|
|
- Full-width swipeable carousel
|
|
- Pinch to zoom
|
|
- Tap to open full-screen view
|
|
- Dot indicators (1/5, 2/5)
|
|
|
|
**Filter drawer:**
|
|
- "Filters" button with badge count (e.g., "Filters (3)")
|
|
- Slide-out drawer (full-screen or 80% width)
|
|
- Accordion sections for filter categories
|
|
- "Apply" button at bottom (batch filtering)
|
|
- "Clear All" option at top
|
|
|
|
**Why batch filtering on mobile:**
|
|
- Prevents multiple re-renders on slow connections
|
|
- User adjusts multiple filters before applying
|
|
- Less disruptive mobile UX
|
|
|
|
### Mobile Checkout Optimization
|
|
|
|
**Digital wallets priority (CRITICAL for mobile conversion):**
|
|
- Apple Pay / Google Pay buttons prominent at top (if supported in ecommerce backend)
|
|
- Can improve mobile checkout conversion by 20-40%
|
|
- One-click payment with pre-filled shipping addresses (if supported in ecommerce backend)
|
|
- Consider making digital wallet the default on mobile
|
|
|
|
**Decision: Order summary placement**
|
|
- Collapsible at top (recommended): Saves screen space for form, expandable for review
|
|
- Fixed at bottom: Always visible but takes space from form
|
|
- Use collapsible on mobile to prioritize form completion
|
|
|
|
**Form optimizations:**
|
|
- Single-column layout (never multi-column on mobile)
|
|
- 44-48px input height minimum
|
|
- Proper keyboard types (`inputMode="email"`, `"numeric"`, `"tel"`)
|
|
- Autocomplete attributes for autofill (`autocomplete="email"`, `"name"`, `"address-line1"`)
|
|
- Consider single-page layout over multi-step (less friction on mobile)
|
|
|
|
## Touch-Friendly Interactions
|
|
|
|
**Standard touch targets:** 44x44px minimum for all interactive elements. Pay special attention to:
|
|
- Filter checkboxes on product listings
|
|
- Quantity +/- buttons on product pages
|
|
- Small action buttons on product cards
|
|
- Modal close buttons
|
|
|
|
**Swipe gestures for ecommerce:**
|
|
- Product image galleries (critical - users expect swipeable images)
|
|
- Related product sliders
|
|
- Category carousels
|
|
|
|
**Mobile input optimization:**
|
|
- 16px minimum font size for inputs (prevents iOS auto-zoom)
|
|
- Proper `inputMode` attributes: `"email"`, `"numeric"`, `"tel"`
|
|
- Autocomplete attributes: `autocomplete="email"`, `"name"`, `"address-line1"`
|
|
|
|
## Mobile Performance
|
|
|
|
**Ecommerce performance priorities:**
|
|
|
|
1. **Product images** (highest impact): Optimize for mobile (<500KB), lazy load below-fold, responsive images with appropriate sizes
|
|
2. **Optimistic UI**: Cart count updates immediately, instant feedback on add to cart
|
|
3. **Skeleton screens**: Show loading placeholders for product grids, not blank pages
|
|
|
|
**Critical mobile performance issues:**
|
|
- Unoptimized product images (>1MB) - most common issue
|
|
- Loading entire product catalog at once - use pagination or infinite scroll
|
|
- Heavy analytics scripts on checkout - defer to post-purchase
|
|
|
|
**Target**: LCP < 2.5s, mobile-optimized images, server-side rendering for product pages
|
|
|
|
## Safe Area Insets (iOS)
|
|
|
|
Use `env(safe-area-inset-*)` to handle iOS notches and rounded corners on:
|
|
- Sticky headers (top inset)
|
|
- Sticky bottom navigation or add-to-cart bars (bottom inset)
|
|
- Full-screen modals
|
|
|
|
**Critical for ecommerce**: Bottom "Add to Cart" bars will be cut off by iOS home indicator without bottom inset (~34px). Test on real iOS devices with notches.
|
|
|
|
## Common Mobile Mistakes
|
|
|
|
**Ecommerce-specific mobile issues:**
|
|
|
|
1. **Hiding cart in drawer** - Cart icon hidden in hamburger menu. Keep cart always visible in header (top-right).
|
|
|
|
2. **No sticky cart access** - Cart scrolls off screen on product pages. Use sticky header or sticky bottom "Add to Cart" bar.
|
|
|
|
3. **Desktop-sized images** - Serving 2MB+ product images to mobile. Use responsive images optimized for mobile (<500KB).
|
|
|
|
4. **Poor form experience** - Small inputs, wrong keyboards, no autocomplete. Use 48px inputs, proper `inputMode`, autocomplete attributes.
|
|
|
|
5. **Hover-only interactions** - Quick view, wishlist only work on hover. Add tap handlers, show on tap instead.
|
|
|
|
6. **Ignoring safe area insets** - Bottom "Add to Cart" bars cut off by iOS home indicator. Use `env(safe-area-inset-bottom)` for sticky bottom elements.
|
|
|
|
7. **No digital wallet options** - Missing Apple Pay/Google Pay on mobile checkout. Mobile users expect one-tap checkout options.
|
|
|
|
## Mobile Checklist
|
|
|
|
**Essential mobile optimizations:**
|
|
|
|
- [ ] Mobile-first CSS (min-width media queries)
|
|
- [ ] 44x44px minimum touch targets throughout
|
|
- [ ] Adequate spacing between interactive elements (8-16px)
|
|
- [ ] Sticky header with cart icon (always visible)
|
|
- [ ] Or: Sticky bottom "Add to Cart" bar on product pages
|
|
- [ ] Large form inputs (48px height minimum)
|
|
- [ ] Appropriate input types (`inputMode="email"`, `"numeric"`, `"tel"`)
|
|
- [ ] Swipeable image galleries on product pages
|
|
- [ ] Filter drawer with batch apply on product listings
|
|
- [ ] Digital wallets prominent in checkout (Apple Pay, Google Pay)
|
|
- [ ] Collapsible order summary in checkout
|
|
- [ ] Optimized images for mobile (<500KB)
|
|
- [ ] Lazy loading for below-fold content
|
|
- [ ] Safe area insets for iOS notches (sticky elements)
|
|
- [ ] 16px minimum font size (prevents iOS auto-zoom)
|
|
- [ ] Test on real mobile devices (not just Chrome DevTools)
|
|
- [ ] Core Web Vitals within targets (LCP < 2.5s, CLS < 0.1, INP < 200ms)
|