When a potential customer types your company name into Google on their phone, they see exactly the same result they would see on a computer — but displaying content on a screen 375 pixels wide is a completely different experience from a 1920-pixel monitor. Google has been indexing and ranking sites based on the mobile version for years, not the desktop version. If on the phone the text is too small, buttons overlap each other, and the menu hides the most important information, then for the search engine that content practically does not exist. A customer coming from Google Maps or Instagram forms an impression almost instantly and quickly decides whether to stay on the page or return to search. This checklist lets you verify yourself whether your site works where you meet customers — on a phone screen.
Regardless of whether you manage a beauty salon, car workshop, restaurant or real estate agency, the same principle applies to everyone: a site that does not work on a phone does not exist for most of your potential customers. Below you will find a practical guide through six check blocks that you can go through yourself in thirty minutes using your own phone and free Google tools.
Why the mobile version is the only version that counts
Since 2018, Google has used mobile-first indexing, meaning it uses the mobile version of the site for indexing and ranking, retrieved by the smartphone crawler. If the content available on the phone differs from that on the computer — is hidden, reduced, or only available after clicking "View full version" — the search engine sees only what is on the phone. In practice, this means that content hidden on mobile devices practically does not exist for Google. At the same time, a phone user has no patience for zoomed-in text, horizontal scrolling, or elements that only work on a computer. If the page requires rotating the phone to read anything, the customer simply returns to the search results.
How to check honestly: use your own phone, but also borrow a smartphone with a different system — an older Android often shows errors that iPhone does not display. Test the site on mobile data, not Wi-Fi, because Wi-Fi masks loading speed issues. Use incognito mode to eliminate personalized results and cached versions. Check the site in both orientations — horizontal and vertical — because the layout may work in one but break in the other.
| Device and conditions | What exactly to check |
|---|---|
| Your phone + Wi-Fi | General impression, whether text is readable without zooming |
| Your phone + mobile data | Loading speed, whether it stutters on weak signal |
| Older Android (borrowed) | Whether older browser displays no errors |
| Incognito mode | Whether page shows personalized content |
| Horizontal orientation | Whether layout does not break when rotated |
Block 1 — Page layout: viewport, scrolling and screen fit
The first and most important thing every site working on a phone must have is a meta viewport in the head section. Without this, the browser does not know how to fit the page to the screen width and displays it as a scaled-down desktop version — the user has to zoom and swipe with their finger like on a map. You can check for viewport presence most simply like this: open the page on your phone and try to read without zooming. If the text is microscopic and cannot be read without zooming in — viewport is probably missing or misconfigured. You can also look at the page code (in Chrome: three dots → Developer Tools → Elements), but on a phone the user experience is the best verification.
Beyond viewport, check three other layout elements: whether there is horizontal scrolling (even one column protruding from the screen ruins the entire experience), whether images do not exceed the screen width (a common error with graphics without width/height attributes) and whether price tables are not cut off in half. Tables are the bane of mobile versions — if you have a price table in table format, make sure that on the phone it either scrolls horizontally or is transformed into a list. Some templates automatically hide columns on small screens — make sure hidden columns do not contain key information such as prices or phone numbers.
A common cause of "jumping" layout (Cumulative Layout Shift) is images without dimensions, ads and iframes without reserved space, and dynamically injected content — these are the most common causes of CLS according to Google. When a page loads gradually and an image jumps into place, it shifts all content below — the user loses their point of reference and clicks the wrong element.
How to check for viewport without looking at code
The simplest test: take your phone, open the page and try to read the first paragraph without zooming. If the letters are the size of a pinhead — viewport is probably missing or misconfigured. Second method: rotate your phone horizontally. If in horizontal orientation the text still looks like a scaled-down desktop version and the layout doesn't adapt to the wider screen — that's a sure sign of missing viewport. Third indicator: try clicking a link. If you have to precisely tap a small element because the page behaves like a miniature computer — viewport isn't working.
Block 2 — Text readability: size, line length and contrast
If most content is smaller, the user has to constantly zoom with their fingers to read anything — this is frustrating and discourages staying on the page. Lack of viewport configuration makes text unreadable even with a good graphic design because the browser does not know how to scale the font to the device. The simplest test: can you read the first paragraph of the homepage without zooming? If not — readability is insufficient.
In addition to size, pay attention to line length. On a phone, comfortable line width is about 50-70 characters. If text spans the full width of a 375-pixel screen, the eye has to jump from the end of one line to the beginning of the next, which quickly tires. In older templates the text block is often fixed to a desktop-sized width — check this manually and adjust it in CSS if needed.
The third element is contrast on photos and banners. If you have a background image with white text, check whether the text is readable on both light and dark backgrounds of the image. Most common error: white text "Call now" on an image with white ivy in the background — invisible. Also make sure paragraphs are not too long — "walls of text" without breaks discourage reading after the first two sentences.
Block 3 — Touch zones: buttons, links and spacing
The minimum recommended touch target size is around 48 device-independent pixels (DIP), according to Google's official documentation, with a properly set viewport. If the "Call" button is 32 pixels high, a person with larger fingers keeps hitting the adjacent element. This applies to all clickable elements: buttons, links in the menu, phone numbers and forms. This is especially important on pages where the user operates with one hand, holding the phone vertically — the thumb has limited reach.
In addition to size, check the spacing between clickable elements. If two buttons are separated by less than 8 pixels, you risk accidentally clicking the wrong element. Problematic are also sticky elements that overlay content — for example, a bar with a phone number adhering to the bottom of the screen that covers part of the page. Such elements should have reserved space and should not shift content while scrolling.
At this point we do not discuss the call button and inquiry form topic — that is a separate topic, covered by the article on why customers don't leave inquiries. One phrase is enough: make sure contact elements are accessible on the phone without unnecessary clicking. If the customer has to go through three screens to find the phone number, that is a problem, but we are not solving it here.
Most common touch zone design mistakes
Three most common problems with touch zones on business websites: first — buttons too small, especially "Call" or "Write" in the header, which sometimes have less than 30 pixels. Second problem — text links without underline and without spacing, which look like regular text — the user doesn't know they can click. Third error — overlapping elements, especially close buttons in pop-up windows placed too close to the screen edge or other buttons.
Block 4 — Menu and navigation: burger, depth and customer path
The menu on a phone usually takes the form of a burger — three horizontal lines that, when clicked, slide out a list of links. This is standard, but implementation quality varies. Check three things: whether when you open the menu you see the most important links immediately, whether you have to scroll inside the menu, and whether the menu closes when clicking outside it (users do not know they have to click "X").
Navigation depth is the number of clicks needed from entering the page to the most important goal — usually the pricing page, contact form or a specific service. The rule is simple: from entry to any key information there should be no more than two clicks. If a customer has to go through homepage → menu → services → pricing → specific service, that is four clicks and most users give up.
Customer scenario on phone:
- 01entry from Google Maps
- →02click on result
- →03homepage (a few seconds to get oriented)
- →04looking for price or service
- →05menu (click 1)
- →06pricing or offer (click 2)
Each additional click is a drop-off point.
How to fit menu on a small screen
A well-designed mobile menu meets three conditions: the most important links are visible without scrolling, it can be closed with one tap outside the menu, and there are no deep submenus (maximum two levels). If your menu requires three or more clicks to reach an offer — that's a sign the structure is too complicated. Instead, use a flat structure: main categories directly in the menu, without intermediate "about us" or "blog" pages between the customer and the offer.
What to avoid in mobile menu
Some solutions look good on a computer but become a problem on a phone. Dropdown submenus require the user to precisely touch a small element — easy to make a mistake. A menu that doesn't disappear after clicking a link forces the user to look for a close button. A menu that's too large and requires scrolling inside itself creates an additional threshold. Instead of complex menus, consider immediately visible CTA buttons — "Call", "Book appointment", "View pricing" — placed at the top of the page, accessible without clicking.
Also check whether the site search works on the phone. Many company sites have a search field that only works on a computer — on the phone it either does not respond or displays results in a format unreadable on a small screen. If a search is present, it must work everywhere.
Block 5 — Pop-up windows and overlay elements
Intrusive interstitials and dialogs — according to Google's official position — are page elements that obstruct users' view of the content, usually for promotional purposes. Google recommends avoiding them because they damage user experience and can negatively affect search position — with one important exception: legally required notices, such as cookie consent, are not treated as intrusive interstitials. On the phone the problem with promotional windows is even more serious — a window taking up half the computer screen can cover the entire content on a 5-inch screen.
Three most common types of windows on company sites:
- Cookie banner — appears at the bottom or top of the page, often immediately, because the law requires it. On the phone it should take up minimal screen space and have clear "Accept" and "Reject" buttons.
- Newsletter pop-up — appears after scrolling to the middle of the page. On the phone it often blocks access to content. It is better to use a subscription section at the bottom of the page instead of a window.
- Chat widget — a small button in the corner of the screen that expands a chat window. Make sure that when opened it does not cover content and that the close button is visible and clickable.
Key rule for promotional windows: every one of them must have a clear, visible close button (X) that is large enough (minimum 48 pixels). If the user has to hunt for how to close a window, that is bad practice. Also check that such a window does not appear immediately upon entering the page — Google recommends that interstitials appear with a delay or after user interaction, not before seeing the content.
When a pop-up is acceptable
There are situations when a pop-up is justified and does not violate Google's guidelines — for example, an important service notice or a booking confirmation. If you need to display such information, apply three rules: first, show the window only after the user's first interaction (click, scroll, touch). Second, make sure the window takes only a small part of the screen on the phone. Third, the close button must be visible right away, without scrolling or hunting for it in a corner.
Block 6 — Speed on phone: PageSpeed and loading issues
Page speed on a phone is one of the ranking factors, but more importantly — a key element of user experience. On a weak 4G signal or in urban motion, every extra second of loading costs you some visitors, which is why speed on a phone is worth prioritizing regardless of ranking effects. Google offers a free PageSpeed Insights tool that analyzes the page for speed on mobile and desktop devices — just enter the page address and get the result.
On the phone, check three specific things: whether the page loads completely, whether elements "jump" during loading, and whether there are heavy video backgrounds. Video as a homepage background may look impressive on a computer, but on a phone it consumes the entire data allowance and often does not play at all due to data saving. If you must have video, enable lazy loading and offer a static version for mobile devices.
Most common causes of slow loading on the phone are: unoptimized images (files too large), lack of compression, excess CMS plugins, external scripts (Facebook Pixel, chats, analytics tools) loading before content, and lack of caching. PageSpeed Insights will show you specific elements slowing the page — pay attention to "Largest Contentful Paint" (LCP) and "Cumulative Layout Shift" (CLS), which are key indicators.
You do not need to know about Core Web Vitals to check the page — just open PageSpeed Insights and see whether the result is green (90-100), yellow (50-89) or red (below 50). Green means the page works well. Red is a signal that action is needed.
Verification protocol: how to record results
After going through the six blocks, it is worth recording the results in a protocol form that will serve you for monitoring the site status over time. The table below contains twenty check points — mark each as "OK" or "NEEDS FIX", optionally add a screenshot and the person responsible for the fix.
| No. | Checkpoint | Block | Threshold / criterion | Result |
|---|---|---|---|---|
| 1 | Meta viewport present | Layout | width=device-width in head section | |
| 2 | No horizontal scrolling | Layout | No horizontal bar | |
| 3 | Images within screen limits | Layout | Do not exceed 375px | |
| 4 | Tables readable on phone | Layout | Scroll or transform to list | |
| 5 | Text ≥12px on ≥60% area | Readability | Lighthouse SEO font size | |
| 6 | Line length 50-70 characters | Readability | Comfortable without zooming | |
| 7 | Text contrast on photos | Readability | Text readable on every background | |
| 8 | Buttons ≥48px high | Touch zones | Thumb hits without errors | |
| 9 | Spacing between links ≥8px | Touch zones | No accidental clicks | |
| 10 | Sticky elements do not cover content | Touch zones | Content visible while scrolling | |
| 11 | Menu opens in one click | Navigation | No additional screens | |
| 12 | Navigation depth ≤2 clicks | Navigation | To pricing/contact in 2 steps | |
| 13 | Search works on phone | Navigation | Results readable on small screen | |
| 14 | Cookie banner does not block content | Pop-ups | Minimal screen space | |
| 15 | Close button visible and ≥48px | Pop-ups | Easy to close without searching | |
| 16 | Pop-up does not appear immediately | Pop-ups | Delay or after interaction | |
| 17 | PageSpeed Insights ≥90 or green | Speed | Mobile result | |
| 18 | LCP below 2.5 seconds | Speed | Largest element loads quickly | |
| 19 | CLS below 0.1 | Speed | No jumping layout | |
| 20 | Background video does not block page | Speed | Lazy loading or disabled on mobile |
You can put this protocol in a Google Sheet and repeat the check after every template change, plugin installation or content update. Prioritize by customer impact: if viewport does not work, nothing else matters — it is the foundation.
Do it yourself in thirty minutes: step-by-step list
If you want to check the site yourself, without waiting for a specialist, follow the list below. The whole thing will take 20 to 40 minutes depending on how many subpages you test.
Step 1 — Preparation: take your phone, turn off Wi-Fi (use mobile data), open the browser in incognito mode. Enter the site address and wait for full loading.
Step 2 — Layout: without zooming, can you see text clearly? Does the page fit vertically without horizontal scrolling? Take a screenshot and open it on your computer — you will immediately see what exceeds the screen.
Step 3 — Navigation: click the burger menu. Do you see the most important links immediately? Try to reach pricing or offer in maximum two clicks. Record the path you had to take.
Step 4 — Touch zones: click three different elements on the page (button, menu link, phone number). Did each click hit what you wanted? Did your finger not catch neighboring elements?
Step 5 — Windows: wait 10 seconds. Did the cookie banner appear? If so, is it easy to close? Check whether after closing content is accessible without obstruction.
Step 6 — Speed: enter the site address in PageSpeed Insights and wait for the result. Note the mobile result and key metrics (LCP, CLS).
Step 7 — Documentation: record the results in the table above. For each "NEEDS FIX" point, record a screenshot and brief description of the problem.
When to send this to a specialist: if you have more than five "NEEDS FIX" points in blocks 1-3 (layout, readability, touch zones), or if PageSpeed shows a result below 50. Layout problems require changes to template code — this is not something you can fix yourself in CMS settings. When to repeat: after every template update, after installing new plugins and after changing homepage content.
What the process looks like when a system handles mobile version monitoring
A company website on a phone is not a one-time project — it is an element that requires constant control. When you are responsible for multiple salons, shops or service points, manually checking every site after every change is unfeasible. A system that automatically monitors the mobile version works like this: it goes through key pages (homepage, pricing, contact, main services) on mobile profiles, takes screenshots and measures speed and CLS metrics. Results are packaged into a report with a task list sorted by impact on customer and Google position.
What remains for a human: deciding what to fix first. The system will indicate that viewport does not work on the homepage, but you decide whether to fix the homepage first or pricing. The system will indicate that CLS exceeds 0.1, but you assess whether it is worth replacing the hero image or better to add dimensions to all graphics. Humans make business decisions — the system provides data and automates repeatable measurements.
If you run a single business, this checklist is enough for self-monitoring. If you manage multiple points or want to ensure no change breaks the mobile version — consider systematic monitoring that after template changes automatically checks key pages and sends a report.
Also read about where to start automation — it will help you choose what to test first. If you run a restaurant, check restaurant data in Google to understand how the site works with the business profile, and see accessibility of a restaurant website and ordering for the two checks that matter most on a small screen. Also see process automation in a company to understand what a system can handle.
In Aura's offer you will find a comprehensive approach to the website: from design, through implementation, to ongoing conversion optimization. Websites and stores builds your site around one decision the visitor has to make — order, reserve or call — instead of around a photo gallery. If you need an audit of your current site for mobile devices, UI/UX design will allow designing the layout from scratch with phones in mind. For businesses that have traffic but do not convert it to inquiries, UX and conversion will find and remove barriers — including mobile problems that ruin user experience. If you want better visibility in local search, SEO and maps will help you reach local customers. For a single-campaign page, Landing page builds one page with nothing to distract from what the visitor came for, and Analytics and BI lets you measure how many customers arrive from mobile devices.
Frequently asked questions
Do I need a separate mobile version of the site, or is a responsive template enough?
Google has used mobile-first indexing for years, meaning it uses the mobile version for ranking. Modern sites use a responsive template that automatically adjusts the layout to screen width — you do not need a separate domain like m.yourcompany.com. However, it is important that content is identical in both versions: hiding content on the phone causes Google not to see it.
How to check if my site works on a phone if I do not have another device?
Use developer tools in the Chrome browser on your computer: open the page, press F12, click the phone icon in the upper left corner (Toggle Device Toolbar) and select a phone model from the list. This simulates a phone, but it will not replace testing on a real device — particularly loading speed on mobile data can only be checked in the field.
Can a cookie banner on the phone lower my Google position?
Not for that reason. Google explicitly excludes legally required notices, such as cookie consent, from the intrusive interstitials category penalized in rankings — that's a different situation from a promotional pop-up blocking content. Still, it's worth keeping the banner as small as possible and giving it clear "Accept" and "Reject" buttons, so it doesn't hurt the experience on a small screen.
What font size must text be on the phone to be readable?
Lighthouse recommends that at least 60% of the text on the page have a font size of at least 12 pixels. This is a minimum threshold — larger text is always better, especially for older people or those with vision problems. If you use a CMS, check the theme settings what the default font size is for mobile devices.
What to do when PageSpeed shows a red result on the phone?
First of all, check whether images are optimized — that is the most common cause of slow loading. Use WebP format instead of PNG or JPEG, if the system allows it. Disable or limit plugins that load external scripts. If the result is still bad, consider changing to a lighter template or moving to faster hosting.
Does the "Call" button on the page have to be visible immediately?
There is no formal requirement, but from a conversion perspective — yes. A customer on the phone should be able to call you with one click. Ideally, the button with the phone number should be visible without scrolling (so-called sticky or placed in the header). Avoid requiring the user to copy the number and leave the browser to call — that is a high conversion barrier.
How often should I check the mobile version of the site?
After every template change, after updating plugins and after adding new content to the homepage. If you run an active business and regularly update your offer, do a full check at least once a quarter. If the site works stably and you rarely make changes — once every six months is enough.