A mobile-friendly website is one a visitor can use on a phone without a fight: the text reads without zooming, every button takes a thumb, nothing scrolls sideways, the first screen appears fast on a cellular connection, forms open the right keyboard, the phone number calls with one tap, and no pop-up hides the page. That is all mobile-friendly website design means to the person holding the phone; the rest is how a team gets there.
Phones also bring about half of all web traffic: 49.1% in the United States and 59% worldwide (StatCounter, September 2026). And Google builds its index from the phone version of your pages, so whatever that version leaves out, Google does not see.
I have spent 18 years in software development, and since 2017 my team has delivered 150+ projects. Below: the checklist, how to test it now that Google's Mobile-Friendly Test is gone, the fixes step by step, and when a rebuild costs less.
Mobile-friendly website design: the checklist your visitors feel
Eight checks cover what a visitor notices on a phone, and each takes about a minute to run yourself. Forward the table to whoever builds or looks after your site.
| Check | What the visitor feels | How to check it |
|---|---|---|
| Text reads without zooming | A paragraph reads at arm's length, and pinch-to-zoom still works | Read your first paragraph on your phone; 16 pixels, the browsers' default, is a sensible floor |
| Every tap lands | A thumb hits the button it aims at, not its neighbor | Tap every button on the first screen; aim for about 48 pixels with space between, never under 24 |
| Nothing scrolls sideways | The page moves only up and down | Swipe left on a few pages; wide tables and embeds are the usual cause |
| The first screen is fast on a phone network | Something useful appears within a couple of seconds on cellular data | PageSpeed Insights, mobile tab: Largest Contentful Paint of 2.5 seconds or less |
| Nothing jumps while it loads | The text stays put, so a tap lands where the finger went | The same test: Cumulative Layout Shift of 0.1 or less |
| Forms open the right keyboard | The email field shows the @ key, the phone field a number pad, and saved details fill in | Fill in your own contact form on your phone |
| The phone number calls | One tap starts the call | Tap the number in the header and the footer |
| Nothing covers the page | The content is visible on arrival; a notice takes a strip, not the screen | Open the site in a private tab, as a first-time visitor |
The best mobile website design passes all eight without the visitor noticing any of them. A mobile responsive website can still fail half the list: responsive web design is the technique that fits the page to the screen, and that covers only the first three rows. The order of work that makes the whole list cheaper to reach is mobile-first design.
The check that even the top guides fail
It is the last row. In October 2026 I opened the five guides Google showed first for "mobile friendly website design" in a window the size of a phone screen, 390 by 844 pixels. None scrolled sideways, and all five set their body text at 16 to 18 pixels.
Yet every one opened with something on top of the article: four with a cookie notice over 16% to 35% of the first screen, one of them dimming the rest of the page, and the fifth with a sign-in prompt. Three of the five warn against pop-ups in their own text. Five pages are a small sample, but it shows how easy this row is to fail.
Where the law requires a consent dialog, Google exempts it from its pop-up guidance; whether your site needs one is your lawyer's call. For everything else, Google asks for banners that take a small fraction of the screen. On a phone that is one slim bar, and I would hold chat and sign-in prompts back until the visitor has read something.
How to test a mobile-friendly website today
Use PageSpeed Insights for numbers, Search Console for your real visitors and two real phones for the rest. Google retired its Mobile-Friendly Test and the Mobile Usability report in December 2023, so any guide that still sends you there is out of date.
| Tool | What it tells you | What it misses |
|---|---|---|
| PageSpeed Insights, mobile tab | Real Chrome users' loading, taps and layout over the previous 28 days, for the page or, if it has too few visitors, for the whole site, plus a lab run on an emulated mid-range phone | Forms, the dialer and pop-ups; a site with little traffic gets only the lab run |
| Lighthouse in Chrome DevTools | The same lab checks for pages not yet public; tap target size is under Accessibility | Text size: Lighthouse 13 dropped that audit in October 2025 |
| Search Console, Core Web Vitals report | Which of your pages pass on mobile and on desktop, from real visits over the last 28 days | Pages with little traffic, and anything beyond loading, responsiveness and stability |
| Search Console, URL Inspection | A screenshot of the page as Google rendered it: Test live URL, then View tested page | How the page feels in the hand |
| Two real phones | Everything a visitor feels | Numbers to compare month to month |
Chrome's own documentation calls device mode, the phone view in its desktop browser, only a first approximation and points to real devices. Use one iPhone and one Android phone a few years old, on cellular data: a new phone on office Wi-Fi hides what your visitors meet.
A five-minute test on your own phone
- On cellular data, search for your business, open the site from the results and count the seconds until you could act.
- Read the first paragraph without zooming, then pinch to zoom in; if the page refuses, zoom is switched off.
- Tap the menu, every button on the first screen and the phone number, then swipe a few pages sideways.
- Fill in the contact form and watch the keyboard each field opens, then switch on airplane mode and tap a link.
Write down what failed and on which phone. That list is the brief for the fix.
How to make a website mobile friendly, step by step
Fix the problems in the order a visitor meets them: the page has to fit, then load, then be easy to act on.
- Measure first. Run PageSpeed Insights on the home page and your five most visited pages, and keep the results.
- Make the page fit. Add the viewport tag,
<meta name="viewport" content="width=device-width, initial-scale=1">; without it, a phone lays the page out about 980 pixels wide and shrinks it. Remove anything that blocks zoom, and check every template at 320 pixels wide, the width accessibility guidelines use for this check. - Make it readable and tappable. Body text at 16 pixels or more, buttons about 48 pixels tall with space between them, and nothing that works only on hover: a finger cannot hover.
- Lighten the first screen. The first picture loads at once and the rest as the visitor scrolls, each in a size for each screen and with its width and height set, so the text does not jump. Cut the loader, the slider of big photos and the extra fonts.
- Fix the forms.
type="email"andtype="tel"bring up the right keyboard, andautocompletelets the phone fill in name, email, phone and address. On our own contact form, the email field opens the keyboard with the @ key and the phone field the number pad. - Make contact one tap. Every phone number is a
tel:link. - Shrink the pop-ups. One slim banner, and nothing on arrival that the law does not require.
- Retest, then wait. Lab tools show the change at once; the Core Web Vitals report reflects the last 28 days of visits, so give it about four weeks.
A site that passes today can fail next year as photos and plugins pile up, so rerun the phone test after every redesign. For the sites we build, website maintenance covers updates, backups and any bug in our work.
When a rebuild is cheaper than a fix
When every page needs the same surgery; while the problems sit in a few templates, a fix costs less.
| What you find | Usually cheaper | Why |
|---|---|---|
| The page narrows on a phone, but some pages are slow or crowded | A fix | A few templates and pictures change, and every page improves |
| A fixed desktop width that the phone shrinks | A rebuild | Every template needs a new layout, which is a new site |
| A separate mobile website on an "m." address that has drifted from the main one | One responsive site | Google recommends responsive design as the easiest to maintain |
| An old theme or plugins nobody dares to update | A rebuild | Each fix fights the theme, and the next update can undo it |
My rule: ask for the fixes as an estimate in hours. If it runs past a couple of days of a developer's time, price a rebuild next to it: with us, a new website starts at $499, paid upfront, for up to 20 pages, and our affordable website page lists what that includes.
A rebuild's one real risk is losing the rankings of the old pages, so every address that brings visitors stays or redirects permanently to its new page. When we replaced the theme-based site of the accounting firm BND, the old addresses got permanent redirects, and its rankings carried over.
What a perfect phone score took on a contractor's site
Mostly work on the first screen. Build Wise Investments builds custom homes across South Florida, and its site had to open fast on a phone at a job site while showing full-screen sections and a timelapse of a house going up.
The first version lost points on a phone for two reasons: the loader was the largest thing painted on the first screen, and the hero pulled a picture 3,840 pixels wide. We took the loader off the critical path and inlined the styles, and the phone's first download halved. The timelapse had its own problem: iPhones in Low Power Mode do not autoplay silent clips, so it stayed a black box until posters cut from the footage and a fallback on a timer fixed it.
On October 5, 2026, PageSpeed Insights gave the site 100 in all four categories on mobile, on an emulated Moto G Power over slow 4G. If your site opens with a video, test it once on an iPhone in Low Power Mode.
Mistakes few teams avoid
Four mistakes pass a quick look on the designer's own phone and still cost visitors:
- A "full-screen" first block sized in vh. That unit measures the screen with the browser's toolbars hidden, so when they show, the bottom of the block, often its main button, sits under them. The svh unit measures it with the toolbars showing.
- A lazy-loaded first picture. Lazy loading is for pictures below the first screen; on the first screen it makes the most important picture arrive later.
- Zoom switched off.
user-scalable=noin the viewport tag keeps the layout tidy and locks out readers with low vision; accessibility guidelines expect text that can grow to 200%. - A dropped connection that drops the visitor. In an elevator, a tap on a dead connection shows the browser's error page, and the site seems gone. On our own site the page stays with a note that the next one opens once the phone is back online, and a message typed into the contact form goes out by itself when the connection returns.
What a mobile-friendly site will not do
Mobile-friendly web design removes friction; it does not make a weak page strong. Google's documentation says it shows the most relevant page even when its page experience is worse, so a fast page that answers the wrong question still loses.
- A Lighthouse 100 is a lab run of one page. It no longer checks text size and never fills in your form.
- Mobile-friendly does not mean accessible to a legal standard. Your lawyer decides what applies; the technical work is our ADA website compliance service.
- A website is not an app. For offline work, notifications or daily use, look at a progressive web app or a mobile app.
If your phone test found more than a couple of failures, send us the address and the list. We will tell you whether a fix or a rebuild costs less, and the first call and a rough estimate are free. Every kind of website we build is on our web development page.
Questions
Is my responsive site automatically mobile friendly?
Not automatically. Mobile responsive website design makes the layout fit the screen, but a responsive site can still load slowly, hide its button under a pop-up or open the wrong keyboard.
Does Google still offer a mobile-friendly test?
No. Google retired the Mobile-Friendly Test and the Mobile Usability report in Search Console in December 2023. PageSpeed Insights, Lighthouse and the Core Web Vitals report now cover what can be measured.
How do I make my WordPress website mobile friendly?
The checklist is the same; on WordPress most of the work lives in the theme and the plugins. A current responsive theme usually needs fixes to pictures, forms and pop-ups, while a fixed-width theme is usually cheaper to replace than to patch.
How much does it cost to make a website mobile friendly?
It depends on how the site is built: adjusting a few templates is a small job, while a fixed-width layout means a new site. With us, a fix is estimated before work starts, and a new website starts at $499, paid upfront.
Do I need a separate mobile website?
No. Google recommends responsive design, one site for every screen, as the easiest to build and maintain. A separate mobile site doubles the upkeep and must carry the same content.