Mobile Optimisation

Mobile Layout

Optimised vs. Unoptimised Mobile Layout

The difference between a mobile-optimised and unoptimised product page can be the difference between 2% and 6% conversion rate. These mockups show the critical differences.

9:41●●●● WiFi

Premium Ergonomic Chair

★★★★★ 4.9 (2.8k reviews)

$329

✓ Free shipping · Ships in 2 days

🔒 Secure↩ 30-day returns

$329

Optimised Mobile Full-width CTA, sticky bar, large touch targets, minimal scrolling

✓ 5.8% conversion rate

9:41●●●● WiFi

ERGONOMIC OFFICE CHAIR - PREMIUM QUALITY - MODEL X2024 - ADJUSTABLE HEIGHT

★★★★★ (2,847)

$329.00

Shipping calculated at checkout

* See full description below for more details about this product and its features and specifications

Unoptimised Mobile Small CTA, truncated title, no sticky bar, buried shipping info

✗ 1.4% conversion rate

Mobile Design Rules

12 Mobile Optimisation Rules for Product Pages

Each of these rules has been validated through A/B testing on mobile traffic. Missing even two or three can halve your mobile conversion rate.

👆

Touch Target Minimums

Every interactive element — buttons, selectors, accordion toggles — must be at least 48×48px. Google's Material Design standard. Smaller targets cause mis-taps and abandonment.

min: 48×48px

📌

Sticky CTA Bar

A fixed-bottom bar containing price and "Add to Cart" must be visible at all times on mobile. Eliminates the need to scroll back to purchase. Typically adds +15–25% mobile CVR.

position: fixed; bottom: 0

🖼️

Full-Width Hero Image

On mobile, the product image should be full-width, at least 300px tall, and swipeable (carousel). Never clip or constrain the image in a small box.

width: 100%; min-height: 300px

⚡

Sub-3s Load Time

53% of mobile visitors abandon pages that take longer than 3 seconds to load. Use WebP images, lazy loading, and minimise third-party scripts. Test on 3G, not just WiFi.

target: < 2.5s LCP

📝

Short Above-Fold Copy

Mobile screens are narrow. Keep the product title under 6 words, and show only the most essential 2–3 bullet points above the CTA. Everything else goes below.

max: 6 words in title

🔽

Accordion for Details

Collapse description, specs, shipping, and FAQ into accordions on mobile. This keeps the page scannable and reduces the cognitive load of an overwhelming scroll experience.

collapsed by default

Page Speed

Speed Is a Conversion Rate Factor

Every additional second of load time costs you conversion rate. Here's the industry data on speed vs. conversion across mobile product pages.

1s load time5.8% CVR

2s load time4.9% CVR

3s load time3.1% CVR

5s load time1.2% CVR

10s load time0.4% CVR

Quick Speed Wins

→ Convert all images to WebP format (30–50% smaller than JPG)
→ Lazy load all images below the fold
→ Defer non-critical JavaScript
→ Use a CDN for image delivery

Launch Checklist

Mobile Product Page Audit

✓

Sticky "Add to Cart" bar on mobileFixed bottom bar with price and CTA visible at all scroll depths

✓

All touch targets ≥ 48×48pxButtons, selectors, and interactive elements are thumb-friendly

✓

Full-width swipeable image galleryProduct images fill the screen width with touch swipe support

✓

Sub-3 second LCP on mobile 4GTested using Google PageSpeed Insights on simulated 4G

✓

Collapsible accordion sectionsDescription, specs, FAQs collapsed by default on mobile

✓

Price and CTA visible without scrollingBoth elements appear in the first mobile viewport

✓

No horizontal scroll or overflowContent constrained to viewport width — tested on 375px and 390px screens

✓

Minimum 16px font size for body textPrevents iOS auto-zoom on input focus. Ensures readability on small screens.

See Mobile Optimisation in Action

Explore our case studies to see how mobile product page redesigns delivered measurable conversion lifts.

View Case Studies →

Mobile Optimisation:Convert the 70% on Phones