More than half your website traffic comes from mobile devices. Despite this, mobile testing is still the step most often skipped before launch — replaced by a quick resize of the browser window and a nod of approval.
Browser resizing is not mobile testing. Real devices behave differently. This checklist covers what we verify on every mobile-first build before it goes live.
The 12-point mobile checklist
1. Test on real hardware, not just dev tools
Chrome DevTools device simulation is useful, but it does not replicate real rendering, real network conditions, or real touch behaviour. Test on at least one iOS device (iPhone) and one Android device before launch. The differences are real and often show up as font rendering issues, scroll behaviour, or tap target problems.
2. Check all tap targets are at least 44x44px
Apple's Human Interface Guidelines and Google's Material Design both specify a minimum 44x44pt tap target. Buttons, links, and interactive elements smaller than this produce miss-taps and frustrated users. Run the Chrome DevTools accessibility checker to catch these.
3. Verify the navigation works without a hover state
Desktop navigation often relies on hover to reveal submenus. On mobile, hover does not exist. Every navigation element must be accessible through tap alone. Test every dropdown and mega-menu on a real phone.
4. Check text is readable without zooming
A minimum 16px body font is the baseline for mobile readability. Anything smaller causes Safari on iOS to auto-zoom, which breaks layouts. Check that paragraph text, captions, and labels are all comfortably readable at arm's length.
5. Verify images do not overflow their containers
Images set in pixels rather than percentages cause horizontal scroll on narrow screens. Every image should have max-width: 100% as a baseline. Check wide tables, code blocks, and iframes as well.
6. Test all forms on mobile
Forms on mobile have a completely different interaction model. Verify: the correct keyboard type is triggered (email fields show the email keyboard), the form is visible when the keyboard is open (a common iOS bug), fields are large enough to tap accurately, and error messages appear near the relevant field.
7. Check horizontal scroll does not exist
Any element wider than the viewport creates horizontal scroll, which breaks the entire page experience. Open the site on mobile and swipe left — there should be nothing. Common culprits: fixed-width elements, tables, code blocks, and oversized SVGs.
8. Verify sticky elements do not consume too much screen
Sticky headers and navigation bars are useful, but on a 375px screen, a 70px sticky nav removes a significant amount of content viewport. Check that sticky elements are appropriately compact on mobile and do not overlap content like modals or fixed CTAs.
9. Test on slow network conditions
Chrome DevTools allows you to throttle network speed to simulate 3G or slow 4G conditions. Load the site on simulated slow 3G and note what the user sees while waiting. Unoptimized images and blocking scripts become painful here. This test often reveals the most impactful performance fixes.
10. Verify page speed scores on mobile specifically
Google PageSpeed Insights scores desktop and mobile separately, and mobile scores are almost always lower. The mobile score is the one that matters for Google's mobile-first indexing. Aim for 70+ on mobile as a minimum; 90+ for competitive rankings.
11. Check the critical user journeys end to end on mobile
Do not just scroll through pages. Complete the actual user journey: find the service, read the page, complete the contact form. This surface-level flow catches broken submit buttons, form validation errors, and redirect issues that a static review misses.
12. Verify in both orientations
Rotate the device. Layouts that look fine in portrait sometimes break in landscape, particularly on tablets and newer large-screen iPhones. Check that images do not stretch awkwardly and text remains readable in both orientations.
Save this as a launch checklist. Running through all 12 points takes about 45 minutes and prevents the kind of mobile issues that get reported on launch day.
When to start mobile testing
Not after the desktop design is done. The mobile-first approach means designing and building for the smallest screen first, then scaling up. Mobile testing should happen at every stage: wireframes (does the layout work?), design (does it look right?), build (does it behave correctly?).
Leaving mobile testing until after the desktop build is complete means discovering fundamental layout problems at the worst possible time.
We design and build mobile-first on every project
Every Webicode build starts on mobile and is tested on real hardware before launch. Core Web Vitals in the green, end to end.
Start a mobile-first project