How to check your website works on phones

The short version

• Use real phones, one iPhone and one Android if you can, in portrait and landscape.
• Check the pages that earn money first: home, main services, contact, booking or checkout.
• Look for sideways scrolling, tiny text, crowded buttons, a broken menu and pop-ups that cover the page.
• Fill in every form and tap the phone number.
• Then check speed with PageSpeed Insights and the Core Web Vitals report in Search Console.

Where did Google’s mobile test go?

Google retired the Mobile-Friendly Test, the Mobile-Friendly Test API and Search Console’s Mobile Usability report on December 1, 2023. Its page experience post gave the reason: many other tools now exist, including Lighthouse in Chrome. It also said mobile usability is still part of its page experience guidance. Older articles that tell you to “run Google’s mobile-friendly test” are out of date.

How do I check, step by step?

Allow about 15 minutes per key page. Keep a note of the page, the phone and what went wrong.

1. Layout

1. Open the page. Nothing should run off the right edge, and you shouldn’t be able to scroll sideways. web.dev’s responsive design basics calls sideways scrolling or zooming out “a poor user experience.”
2. Turn the phone sideways and back. The page should rearrange, not break.
3. Pinch to zoom. You should be able to. web.dev advises against settings that block zooming.

2. Text

4. Read a paragraph at arm’s length. You shouldn’t need to zoom.
5. Check text over photos. Light text on a busy image is often unreadable outdoors.

3. Buttons and links

6. Tap every button and menu item with your thumb. Can you hit the right one first time?
7. WCAG 2.2’s target size rule sets a minimum of 24 by 24 CSS pixels, or enough space around smaller targets. Treat that as the floor, not the goal. Bigger is kinder.
8. Open the menu, go to a page, and use the back button. The menu should close and reopen cleanly.

4. Forms

9. Fill in each form completely. The email field should bring up a keyboard with an @ sign, and the phone field a number pad. Autofill should work.
10. Submit it and confirm the message arrives. If it doesn’t, see making your website send email properly.
11. Make sure error messages appear next to the field, not off-screen.

5. Calls, maps and pop-ups

12. Tap the phone number. It should offer to dial.
13. Tap the address or map link. It should open directions.
14. Watch for pop-ups. Google’s guidance on interstitials says to avoid ones that cover the page, and to use a small banner instead. Cookie notices should be closable with one tap.

6. Speed and media

15. Load the page on mobile data, not Wi-Fi, and note how long the main content takes to appear.
16. Check that videos don’t autoplay with sound and that sliders don’t jump the page around.
17. Run the page through PageSpeed Insights. Our answer on what a low PageSpeed score means helps you read it, and our article on website speed on phones has the fixes.

7. A quick desk check

18. In Chrome, open DevTools and select Toggle device toolbar to preview phone sizes. Chrome’s device mode page calls this a “first-order approximation” and recommends a real device when in doubt. Use it to check many sizes quickly, not as the final test.

Why does it matter?

Many visitors to a small-business site arrive on a phone, often from a Google search or Maps listing, ready to call or book. If the phone number won’t dial or the form hides its submit button, that customer goes to the next result. Google’s mobile-first indexing guide says it uses the mobile version of a page for indexing and ranking, so problems that only show on phones still affect search.

What are the common mistakes?

“Why does my site look wrong on phones?” comes up about 105 times in E-3’s support records since 2019. These are worth checking on any site:

• Dropdown menus that don’t work in portrait on smaller screens. Simple direct links usually work better.
• Autoplay video headers that behave differently on phones. A still image on mobile is often better.
• Images cropped badly because the desktop crop was reused.
• A fixed-width table or section wider than the screen.
• A “sticky” header or chat button covering form fields or the cookie notice.
• Checking only on the owner’s own phone, which may be the newest model on fast Wi-Fi.

What if I find problems?

Write down the page, the phone model and browser, and what happened. A screenshot helps. Then see our help page on why a site looks wrong on phones, which explains the usual causes and what to send your web team. Accessibility problems you spot along the way are covered in what WCAG 2.2 changed.

How much does it cost, and how long does it take?

Checking is free and takes an hour or two for a small site’s key pages. Fixes range from a setting change to rebuilding a section, so ask for a quote per item.

How does E-3 handle this?

Phone layout problems are a regular request in E-3’s support records. Under our website care service, we can check your site on real phones and fix what we find. Redesigns and larger fixes are tested on a staging copy first, and you decide what goes live.

Related questions

• Why does my site look wrong on phones?
• What are Core Web Vitals?
• How big should images be on my website?
• What did WCAG 2.2 change for small-business sites?
• Back to the complete guide to website basics

Sources

1. The role of page experience in creating helpful content (Google Search Central Blog, April 2023)
2. Responsive web design basics (web.dev)
3. Simulate mobile devices with device mode (Chrome DevTools)
4. Avoid intrusive interstitials and dialogs (Google Search Central)
5. Mobile-first indexing best practices (Google Search Central)
6. Understanding Success Criterion 2.5.8: Target Size (Minimum) (W3C WAI)