What makes a website mobile-friendly, and how to check yours

Most business websites built in the last ten years are “responsive” in name. The layout squeezes into a narrow column on a phone, and the job looks done. But a site can fit a phone screen and still be hard to use on one. The menu hides the page someone came for. The form fights the keyboard. A pop-up covers everything. The phone number isn’t a link.

This guide covers what mobile-friendly means now, what to check on your own site in ten minutes, the mistakes that cost business websites their phone visitors, and a checklist for your next project.

Why the phone version is the one that counts

Google crawls and ranks websites using the phone version of each page. Its guide to mobile-first indexing says Google uses the mobile version of a site’s content, and asks site owners to make sure the mobile site contains the same content as the desktop one.

So if your phone layout drops a section, hides a block of text or leaves out the reviews to save space, Google may never count them. A site that looks complete on a laptop can look thin to Google.

Speed is measured the same way. Google’s Core Web Vitals ask for the main content within 2.5 seconds, a response to each tap within 200 milliseconds and a layout that doesn’t jump. They are measured at the 75th percentile of real visits, with phones and desktops counted apart, so a fast desktop score doesn’t cover a slow phone.

What mobile-friendly means now

A responsive layout is where it starts. One site rearranges itself for phones, tablets and large screens, so there’s one address for each page and one set of content to keep up. The page tells the browser to use the phone’s real width with the viewport tag, which MDN describes as setting the viewport to match the device’s width. Without it, a phone draws the desktop page and shrinks it.

Past that, the details decide whether a phone visitor stays:

• Nothing scrolls sideways. The accessibility standard WCAG 2.2 asks that content works at a width of 320 CSS pixels without scrolling in two directions (success criterion 1.4.10, Reflow). Wide tables, long words and fixed-width images are the usual causes.
• Text you can read without zooming. Body text large enough to read at arm’s length, with enough contrast for a phone used outdoors.
• Targets big enough for a thumb. WCAG 2.2 sets a minimum of 24 by 24 CSS pixels for anything you tap (success criterion 2.5.8) and 44 by 44 at its stricter level (2.5.5). Links packed close together in a footer or a menu are where most sites fall short.
• Images sized for the screen. A phone shouldn’t download a photo made for a 27-inch monitor. The srcset and sizes attributes let the browser pick the right file (web.dev on responsive images).
• The same content on every screen. Rearrange it, collapse a long list behind a “show more” button if you must, but don’t delete it on phones.

Designed for phones from the start

The sites that work best on a phone were planned for one. When the phone layout is an afterthought, it ends up as the desktop page stacked into one long column, with the important parts far down the screen.

Planning for phones changes a few decisions early:

• The first screen. On a phone, the first screen holds a headline, a line or two and one button. Decide what those are before anything else.
• The menu. A phone menu has room for five to seven items. If your desktop menu has twenty, the site’s structure needs work, and phones show it first.
• Long runs of cards. A grid of twelve cards becomes a very long scroll on a phone. A swipe rail or a shorter list with a link to the rest often reads better.
• Calls to action. A phone number that dials when tapped, an address that opens in Maps and a short form. Our guide to calls to action covers the wording.

When we design a site, we lay out the phone version at the same time as the desktop one, and we check every page on phones before launch.

Forms that work with a phone keyboard

A contact or quote form is where a phone visit turns into business, and it’s where many sites lose people. The fixes are small:

• Ask for less. Every field is more typing with a thumb. Name, email and a message are often enough for a first contact.
• Use the right field types, so the phone shows a number pad for a phone number and an email keyboard for an email address.
• Labels that stay visible above each field, instead of placeholder text that disappears once someone starts typing.
• Errors next to the field, in plain words, without wiping what the visitor already typed.
• A big send button that isn’t hidden behind the keyboard.

Pop-ups and banners on a small screen

A newsletter pop-up that takes a corner of a laptop screen can cover all of a phone’s. Google’s guidance on intrusive interstitials and dialogs asks sites not to cover the whole page and suggests small banners that take a fraction of the screen instead. Cookie notices and chat buttons count too. Check how much of the first phone screen is left for your actual page once they load.

How to check your site in ten minutes

You don’t need special tools for a first look. Take your own phone and someone else’s, ideally one older or smaller model, and go through your site as a new customer would:

1. Open the home page on a phone connection, away from Wi-Fi. Count how long before you can read the headline.
2. Find your main service from the menu. Then find your contact details.
3. Tap your phone number and your address. Do they dial and open a map?
4. Fill in your contact form with your thumb. Note anything that made you zoom or retype.
5. Turn the phone sideways and back. Does anything break or jump?
6. Scroll through your longest page. Is anything cut off, or does the page slide sideways?

Then look at the data. In Google Search Console, the Core Web Vitals report shows how your pages perform for real visitors on phones. In Google Analytics, compare how phone and desktop visitors behave: if phone visitors leave much faster, the phone version is the first place to look. Our guide to Google Analytics shows where to start.

Common mobile mistakes on business websites

• A separate mobile site. Older sites sometimes run an “m.” version with less content. It doubles the upkeep, and Google ranks the thinner version.
• Content hidden on phones to make the layout fit, including reviews, team photos and service details.
• Text set in images. Banners with text baked in shrink to unreadable sizes and can’t be read by search engines.
• Heavy sliders and videos at the top of the page that delay everything below them.
• Phone numbers and addresses as plain text that can’t be tapped.
• Tested only on the owner’s phone. A site that looks fine on a new large phone can break on an older, smaller one.

Our post on why websites turn customers away covers more of these, and making your website accessible overlaps with most of them, since accessible sites tend to work well on phones.

A checklist for a mobile-friendly website

• One responsive site, with the viewport tag set to the device’s width.
• The same content on phones as on desktops, rearranged rather than removed.
• Nothing scrolls sideways at 320 pixels wide.
• Body text readable without zooming, with enough contrast.
• Buttons and links at least 24 by 24 pixels, ideally 44 by 44, with space between them.
• A first phone screen that says what you do and offers one clear action.
• A short menu, and contact details one tap away.
• Phone numbers that dial and addresses that open a map.
• Forms with the right keyboards, visible labels and a big send button.
• Images sized for each screen, and pages that pass Core Web Vitals on phones.
• No pop-up that covers the page on a phone.
• Checked on more than one phone, including an older, smaller one, before launch.

Take it to any web designer you talk to, and see how to choose a web design company for the questions to ask them. If you run a smaller business, our guide to small business website design covers the pages you need.

Questions we hear

Is responsive design the same as mobile-friendly?

Responsive design is how most sites become mobile-friendly. It means the layout adapts to the screen. A responsive site can still be hard to use on a phone if the text is small, the buttons are cramped or the pages are slow, so treat responsive as the start.

Do we need an app instead?

Rarely, for a business website. People find businesses through search and links, which lead to web pages. An app makes sense when customers come back often to do something, such as ordering or tracking. Our guide to websites and web apps helps you tell which you need.

Can our current site be made mobile-friendly, or do we need a redesign?

It depends on how it was built. A site with a responsive theme and a few problem pages can often be fixed. A site with a separate mobile version, or a layout built only for desktops, usually costs less to redesign than to patch. If you do redesign, keep the addresses that rank; our guide to redesigning without losing SEO walks through it.

Does a mobile-friendly site help with local search in Chicago?

Someone who searches for a local business on a phone often wants to call, get directions or book. A site that makes those one tap away, and matches your Google Business Profile, gives those visitors what they came for.

How much does a mobile-friendly website cost?

It depends on the size of the site and what it needs to do. Every site we design is responsive. Quotes are free: configure your site or email us, and we send your quote by email.

Want a site that works on every phone?

Tell us about your business and your visitors, and we’ll suggest the simplest site that works for them on any screen. See our Chicago web design page, read about web design, or configure your website and get a quote.