Is My Website Mobile Friendly? How to Check

Why the mobile version is the one that counts

For most small businesses in Canada, the phone is not a secondary way people arrive at the website. It is the main one. Someone hears your name, searches while walking, or taps a link in a message from a friend. The page opens on a screen a few inches wide, held in one hand, often on a patchy connection, and the visitor decides in seconds whether to keep going or go back to the results and try the next business.

Search engines work the same way. Google uses mobile-first indexing, which means the mobile version of your page is the version it crawls, indexes and ranks. That has a consequence people miss: if content is hidden, cut or broken on mobile, it is not simply less visible to phone users, it is effectively absent from what search sees of your site.

There is a business reason underneath the technical one. A desktop visitor with a broken layout will often persist, because they have a mouse, a big screen and patience. A phone visitor will not. They are standing somewhere, doing something else, and they have four other businesses one tap away. Mobile friendliness is not a checkbox for search engines. It is whether the person who wanted to buy from you can.

What mobile friendly actually means

The phrase gets used as if it were one setting. It is not. It is a set of separate conditions, and a site can pass most of them and still fail the one that matters for your business.

Note what is not on that list: how the site looks on your laptop, how much you paid for the theme, and whether the designer said it was responsive. Responsive is a technique, not a result. A responsive site can still have a 900 pixel wide price table that nobody can read on a phone.

The ten minute check you can run yourself

You do not need a developer for the first pass. You need your phone, ten minutes, and the discipline to test the thing a customer would actually do rather than admiring the homepage.

1. Turn off wifi. Use mobile data. Your shop wifi is faster than the connection most visitors are on, and it hides the slowness they will feel.
2. Open the homepage and wait. Count the seconds until the page is usable, not until something appears. If you are still waiting past five or six seconds, you have a speed problem regardless of how it looks.
3. Read a paragraph without zooming. If you pinch to read, the text is too small. Check a service page too, not just the homepage, because inner pages are often styled differently.
4. Swipe sideways. If the page moves horizontally at all, something is wider than the screen. Note which section it happens on.
5. Tap the main call to action with your thumb. Not your index finger, and not carefully. If you miss it or hit the wrong link, the target is too small or too crowded.
6. Open the menu and reach every page. Especially the contact page, the pricing page and whatever you would call the money page.
7. Fill in the form and send it. Then check that the message arrived. A form that looks fine and quietly fails is the most expensive mobile problem there is.
8. Do it all again on a second phone. Ideally an older Android, because that is closer to the median visitor than a new iPhone on a strong signal.

Tools that give you a verdict

Your own phone tells you whether the site is usable. Tools tell you why it is not, and give you something concrete to hand to whoever will fix it.

Treat a score as a diagnosis, not a grade. A page can score poorly and still work well for customers, and a page can score respectably while hiding a form that does not submit on iOS. The score is a pointer to the specific items underneath it, which is the part worth reading.

The problems we find most often

Across the small business sites we look at, the same handful of faults come up again and again. None of them are exotic, and most were introduced after launch by someone adding something reasonable.

Text, spacing and tap targets

Most mobile usability failures are not dramatic. They are small frictions that add up until the visitor gives up without ever deciding to. Text size, line length and spacing carry more of that weight than any other design choice.

Body text on a phone needs to be comfortable to read held at normal distance, which in practice means noticeably larger than most desktop designs use. Line length takes care of itself on a narrow screen, but line height does not: text set tight for a wide desktop column becomes a wall on a phone. Headings need room above them so a reader scrolling quickly can see where one idea ends and the next begins.

Tap targets are the other half. A thumb is not a mouse pointer. Anything you expect someone to press needs to be large enough to hit without aiming, and separated from its neighbours so a near miss does not trigger the wrong thing. This applies to the navigation menu, to links inside paragraphs, to form fields, and especially to anything sitting near the bottom of the screen where the thumb naturally lands.

Forms deserve a specific pass. Each field should bring up the right keyboard, so an email field offers the at symbol and a phone field offers digits. Labels should stay visible while typing rather than disappearing into placeholder text. And the submit button should not sit behind the keyboard where nobody can see it.

Images and mobile data

Images are where most small business sites get heavy. A camera photo is enormous compared with what a phone screen needs, and if it is uploaded straight into the page the visitor downloads all of it. On a good connection this is invisible. On mobile data it is the difference between a page that appears and a page that is still assembling itself when the visitor leaves.

Three habits fix nearly all of it. Resize before uploading, so the file is no larger than the space it will occupy. Use a modern format, which gives the same picture at a fraction of the weight. And let the page load images lazily, so photos further down the page do not compete with the content the visitor can actually see. We wrote about the details in our guide to website images and page weight.

One more thing that matters on a phone: give images their dimensions in the markup. When the browser knows how tall a picture will be, it reserves the space. When it does not, everything below shifts down the moment the image arrives, usually just as the visitor is reaching for a button. That shift is one of the most irritating experiences on mobile and it is entirely avoidable.

Navigation, buttons and forms

Desktop navigation can afford to be generous. Mobile navigation has to be a decision. Everything cannot go in the menu, so the useful question is which three things a phone visitor is most likely to want, and whether those are reachable without opening anything.

For most local businesses the answer is some version of call, find, and book. A phone number that dials when tapped, an address that opens in maps, and whatever your booking or enquiry action is. Those three should be visible or one tap away from every page, not buried behind a menu icon at the end of a list.

“If a customer cannot call you, find you, or book you within two taps of landing, the site is working against the business.”

Buttons should look like buttons. On a small screen, a link styled as plain coloured text is easy to miss and hard to hit. Give the main action on each page a solid shape, real padding and a label that says what happens next. Vague labels cost more on mobile than desktop, because there is less surrounding context to explain them.

Keep forms short. Every field is a reason to abandon on a phone keyboard. Ask for what you need to reply, and collect the rest in the conversation that follows. If you need a longer form for a specific reason, say why at the top and show progress, so the visitor knows what they have committed to.

Popups, banners and cookie notices

Interstitials that cover the content are a mobile problem in a way they are not on desktop, simply because the screen is small enough for one banner to take all of it. A newsletter popup, a cookie notice and a sticky promotional bar can between them leave nothing visible except the thing the visitor did not come for.

If you need a consent notice, and in many cases you do, make it dismissible with one thumb and keep it to the height it needs. If you want an email signup, put it inside the page where someone who has read something is likely to want more, rather than in front of someone who has read nothing. And check what the combination looks like on a small screen, because nobody ever does.

Speed on a phone is a different problem

A desktop on a wired connection hides almost every performance mistake. A phone does not. It has less processing power, a slower and less reliable connection, and a visitor with less patience. Three things describe most of what a visitor feels, and they are the ones worth understanding.

Google publishes the current definitions and thresholds for these on web.dev, and PageSpeed Insights reports your pages against them. The value of the framework is not the score. It is that it separates three different complaints that all get reported as the site feels slow, and each has a different fix. Our guide to website speed for small business goes through the fixes in order of payoff.

One practical note for small business sites. The biggest single cause of slow mobile pages we see is not hosting or code. It is a homepage carrying eight full size photographs, a slider, an embedded map, an embedded video and three tracking scripts, none of which the visitor asked for. Removing things is the cheapest performance work available.

Responsive design, mobile sites and apps

There are three ways to serve phone visitors, and for a small business one of them is almost always right.

What to fix first

Once you have a list, the order matters more than the length. Fix what stops money first, then what stops reading, then what looks untidy.

1. Anything broken in the path to contact. A form that does not submit, a number that does not dial, a booking button that does nothing. This is revenue, not usability.
2. Horizontal scrolling. It makes the whole page feel broken and it is usually one element at fault, so it is often a ten minute fix with a large effect.
3. Text you cannot read. Raise the body size, open up the line height, check contrast. Cheap, and it improves every page at once.
4. Tap targets and spacing. Especially in the navigation and anywhere two links sit next to each other.
5. Page weight. Resize and compress images, drop what nobody uses, and load the rest lazily.
6. Popups and sticky elements. Reduce to the one you genuinely need, and make it small and dismissible.
7. Cosmetics. Alignment, spacing and polish. Real work, but not before the list above.

If most of that list is failing at once, the site is not suffering from a set of bugs, it is built on something that was never made for phones. At that point patching gets expensive and a rebuild on a modern responsive foundation is usually cheaper than the third round of repairs. Our piece on the signs a website needs a redesign covers how to tell the difference.

How to confirm the fix worked

Two kinds of evidence exist and they answer different questions. Lab data comes from a tool running your page in a controlled environment, and it updates the moment you re-run it, which makes it useful while you are working. Field data comes from real visits on real devices, and it moves slowly because it is gathered over a period of time rather than in one test.

So the sequence is: fix, re-run the lab test to confirm the specific item is resolved, verify by hand on a real phone, and then wait before judging the field numbers. If you change something and the field data has not moved by the next morning, nothing has gone wrong. It simply has not caught up yet.

Keep a short record of what you changed and when. Three months later, when someone asks whether the work made a difference, the answer depends entirely on being able to line up the dates.

Where this overlaps with accessibility

Almost everything that makes a site work on a phone also makes it work for someone with a visual impairment, a motor impairment, or simply a bad day. Larger text, stronger contrast, generous tap targets, clear labels and a layout that survives being zoomed are the same fixes, arriving from two directions.

That matters commercially as well as ethically. Accessibility requirements apply to many organisations in Canada, and the practical work overlaps so heavily with mobile usability that treating them as one project is cheaper than treating them as two. If you are already rewriting a button because a thumb cannot hit it, adding a proper label and a visible focus state costs almost nothing extra.

The one place they diverge is testing. Mobile friendliness you can check with your own eyes and thumbs. Accessibility needs a keyboard, a screen reader and a contrast check, because the failures are invisible to someone who does not rely on those tools. Our guide to website accessibility standards covers what to check and in what order.

Mistakes that keep a site unfriendly

Frequently asked questions