Academy ›
Module 11 — Conversion Rate Optimization & UX Testing
Mobile-First UX Testing — The 4 Devices You Must Check
10 min · video · Intermediate
You test a "fix" on your iPhone 14 and love it. You push it live. Two days later, a customer using a Samsung A12 complains the button is invisible. Your test broke on half your users and you did not know. The four AU devices you must check every time.
The AU mobile device distribution
Australian traffic by device (2024-2025):
| Device Type | % of Traffic | Key trait |
|---|
| iPhone 13/14/15 | 28% | Modern, large screen, notch, high price |
| Samsung Galaxy A series | 22% | Budget Android, small screen, older OS |
| iPhone 12 or older | 18% | Older iOS, smaller screen, lower specs |
| Pixel 6/7/8 | 12% | Mid-range Android, modern OS |
| iPad/tablets | 8% | Large screen, low bounce but high cart abandonment |
| Other Android | 12% | Wildly varied performance, older OS |
Total Android: 46% of traffic. Total iOS: 46% of traffic. Tablets: 8%.
The problem: iPhone 14 (high-end, modern) renders your store differently than Samsung Galaxy A12 (budget, older). If you test only on iPhone 14 and ship, you break for 22% of your AU traffic.
The four devices you must test
Device 1: iPhone 14 (baseline iOS)
- Screen: 6.1", OLED
- Browser: Safari (latest WebKit)
- Performance: Excellent (5G capable)
- Represents: 20% of AU traffic (iPhone 13/14/15)
Test: Does the page load in under 1.0 second? Do buttons feel pressable (spacing, contrast)? Does checkout complete without freezing?
Device 2: Samsung Galaxy A52 or A72 (mid-range Android)
- Screen: 6.4", AMOLED, 90Hz
- Browser: Chrome (Chromium)
- Performance: Good (good CPU, 4GB RAM typical)
- Represents: 20% of AU traffic
Test: Same as iPhone 14. Does Chrome render correctly (sometimes form inputs render differently)? Do buttons feel pressable?
Device 3: iPhone SE 3rd gen (budget iOS)
- Screen: 4.7", LCD (small)
- Browser: Safari (same WebKit as iPhone 14, but older OS)
- Performance: Good (A15 chip is fast)
- Represents: 10% of AU traffic
Test: Tiny screen. Does CTA button fit without scrolling? Can users tap it without fat-fingering adjacent elements? Are form fields readable at this size?
Device 4: Samsung Galaxy A13 or A12 (budget Android)
- Screen: 6.5", LCD
- Browser: Chrome (Chromium, often outdated version)
- Performance: Slow (4GB RAM, Exynos chip)
- Represents: 12% of AU traffic
Test: Slowest device in your test pool. Does the page load in under 3 seconds? Does JavaScript load correctly (sometimes budget devices break on modern CSS/JS)? Are images properly compressed?
The device testing checklist
Every time you ship a change to your store, test on these four:
Before shipping a change:
Step 1: Test on iPhone 14 (your baseline)
- Open the store on Safari
- Time page load (target: <1.0s on WiFi, <1.5s on 4G)
- Tap the CTA button (does it respond immediately?)
- Go through checkout (does everything render correctly?)
- Scroll to bottom (do images load, no layout shift?)
Step 2: Test on Samsung Galaxy A52 (Chrome)
- Same tests as iPhone 14
- Check form inputs (sometimes render with different spacing)
- Check select dropdowns (sometimes appear as native selectors vs styled)
Step 3: Test on iPhone SE (small screen)
- Scroll the product page (does hero image fit without scrolling past fold?)
- Tap buttons (are they 48x48px minimum, not 32x32?)
- Read text (is font size readable at 4.7"?)
- Checkout (do form fields stack correctly without horizontal scrolling?)
Step 4: Test on Samsung Galaxy A13 (slow device)
- Throttle Chrome to "Slow 4G" (DevTools → throttle)
- Time page load (should be under 3 seconds)
- Watch for layout shift (especially images loading late)
- Check if JavaScript errors appear in console
If any test fails, revert or redesign before shipping.
Common mobile-test gotchas
Gotcha 1: Form input rendering differs by browser
iPhone Safari: Form inputs render with Apple's default styling (blue border, specific font size) Chrome Android: Form inputs render with Chrome's default styling (different padding, different font)
Fix: Test on both Safari and Chrome. If styling differs, adjust your CSS with vendor prefixes (webkit).
Gotcha 2: Buttons look different on budget devices
iPhone 14: Button looks like you designed it. Samsung Galaxy A13: Button might have extra padding, or might not respond to tap immediately (slow device lag).
Fix: Ensure buttons are 48x48px minimum. Test tap responsiveness on the slowest device. Consider increasing padding on touch targets.
Gotcha 3: Images load slowly on budget devices
iPhone 14 on 5G: Image loads in 0.3 seconds. Galaxy A13 on 4G: Image loads in 2+ seconds. Meanwhile, user has already scrolled past.
Fix: Compress images aggressively (Tinypng.com, Squoosh). Use WebP format (smaller than JPG). Load hero image first, others async.
Gotcha 4: Popups and modals are unusable on small screens
iPhone SE (4.7" screen): Popup modal takes 80% of screen. Close button is hard to tap.
Fix: On screens < 5", stack modals full-screen (100% width, 100% height). Add large close button (48x48px top-right).
Gotcha 5: Checkout form fields are too close on mobile
Desktop: Name field, Email field, Postcode field appear in a neat 3-column layout. Mobile: Fields stack vertically but are too close together. User fat-fingers the wrong field.
Fix: Increase vertical spacing between fields (min 16px margin-bottom). Test tap accuracy on 4.7" screen.
AU-specific mobile considerations
- Afterpay badge on mobile: Afterpay badge takes 120px width. On iPhone SE (375px viewport), that is 32% of screen. Make sure it does not wrap or get cut off.
- Aussie dollar formatting: A