suplement/.agents/skills/storefront-best-practices/reference/mobile-responsiveness.md

Mobile Responsiveness for Ecommerce Storefronts

Contents

• Overview
• Mobile Ecommerce Patterns
• Touch-Friendly Interactions
• Mobile Performance
• Safe Area Insets (iOS)
• 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)