In this article
A website can shrink neatly onto a phone and still be frustrating. The menu may cover the contact button, a form may be difficult to complete and the page may jump while images load. Mobile-friendly means a customer can finish the task.
Use these seven checks on important service pages, product pages and checkout flows, not just the homepage.
1. Test a complete customer task
Choose a realistic goal: request a quote, find opening hours or buy an in-stock item. Use a physical phone if available and follow the entire route. Record friction, failed notifications and confusing confirmations. A screenshot cannot verify the journey.
2. Keep the important content available
Google uses the mobile version of content for indexing. Its mobile-first guidance recommends responsive design and equivalent essential information. Do not hide the answer, product details or internal links simply to make the page shorter.
Use clear sections and descriptive headings. Let the layout change while the meaning and functionality remain available.
Want a clearer plan for your website? Get my free website plan.
3. Make reading comfortable
Check text size, line spacing and paragraph width on the actual device. Avoid text embedded in images and small light-grey labels. A visitor should not need to pinch-zoom to read the main information.
Allow content to reflow without forcing the whole page sideways. Wide data tables may need a clearly labelled scrolling region; ordinary paragraphs should fit the screen.
4. Make navigation and forms operable
Check menu controls, visible keyboard focus, labels and error messages. Provide enough spacing for accurate taps. WCAG 2.2 includes requirements for target size and focus, with specific exceptions; use those requirements alongside real task testing.
Open the on-screen keyboard during form testing. Confirm it does not obscure the action or make error recovery impossible. Use suitable input types and explain what happens after submission.
5. Measure loading, response and stability
Core Web Vitals cover loading, interaction and layout stability. Google’s good-experience targets include LCP within 2.5 seconds, INP below 200 milliseconds and CLS below 0.1. Real-user data and controlled lab tests answer different questions, so examine both when available.
A slow score is a starting point for diagnosis. Check hosting response, heavy scripts, fonts and third-party widgets rather than assuming image compression fixes everything.
6. Give images an appropriate delivery strategy
Serve appropriately sized responsive images with explicit dimensions. Compress the actual files and inspect their quality. The main above-the-fold image may need eager loading, while images farther down can usually load later. Avoid downloading a desktop-sized image for a small card.
7. Recheck after real changes
A new banner, chat widget or plugin can alter the layout. Retest the core tasks after releases and on more than one browser where possible. Keep a short record of the issue, the change and the result.
Prioritise failures that prevent contact or purchase before cosmetic refinements. Our landing-page guide helps with conversion flow, and the web-design trends guide separates useful design ideas from expensive distractions. Graby’s website service can help when the underlying build needs work.