How to make a website mobile friendly, step by step

A mobile-friendly website fits the screen without zooming, has text you can read without pinching, buttons big enough for a thumb (Apple's guideline is 44 by 44 points, Google's is 48 by 48), loads its main content within 2.5 seconds, doesn't cover the page with pop-ups, and has short forms that bring up the right keyboard. Most modern builders handle the layout for you; the rest is checking your own site on a real phone and fixing what's awkward. Google now ranks every site on its mobile version, so this matters for being found as well as for enquiries.

Watch someone use a website on their phone and you learn more in two minutes than in an hour of looking at it on a laptop. They hold the phone in one hand. They scroll with their thumb, fast. They miss small links, give up on pop-ups they can't close, and abandon anything that makes them pinch and zoom. And most of the time, they're not sitting still: they're on a bus, in a queue, or standing next to the thing they need fixed.

I'm a user researcher, and this guide is the checklist I'd use on any small business site: eight steps, in the order I'd fix them, with the published standard behind each one so you know what “good enough” means. One disclosure first. We build websites at KahuLogic, so I've used a sample business in our own tools as the example, but every step works whatever your site runs on.

That middle number comes from the sample account in Kahu Site Analytics I use throughout this guide: over 30 days, 860 of its 1,140 users were on a phone. For a local business, the phone isn't the second screen. It's the main one.

Why it matters for Google too

Google uses the mobile version of your site, crawled with its smartphone crawler, to index and rank it. It started moving sites to this mobile-first approach in 2016 and announced in October 2023 that the move was complete. If something is missing or broken on your phone version, as far as Google is concerned, it's missing or broken.

One thing has changed that older guides still mention. Google retired its Mobile-Friendly Test tool and the Mobile Usability report in Search Console on 1 December 2023. It was clear that mobile usability still matters; it just points people to other tools now, like Lighthouse and PageSpeed Insights. If a guide tells you to run the Mobile-Friendly Test, it's out of date.

Step 1: tell the phone how wide the page is

Without one line of code, many phone browsers pretend the screen is about 980 pixels wide and shrink the whole page to fit, which is why some sites look like a tiny desktop page you have to pinch. That line is the viewport tag, and web.dev, Google's site for web developers, says every page built for different devices must include one. It tells the browser to use the real width of the screen.

Every modern website builder adds it for you. If your site was hand-built or is very old, ask whoever looks after it to check. And make sure it doesn't stop people zooming: some sites switch zoom off, which makes life much harder for anyone with low vision. The accessibility standard (WCAG) requires that text can be enlarged to at least twice its size.

Step 2: one column, nothing sideways

A responsive layout rearranges itself for the screen: three columns on a laptop become one on a phone, and nothing ever needs scrolling sideways. Builders do this automatically, but they can't stop you adding something that breaks it, like a wide table, a fixed-width image or an embedded map.

The test is simple. Open every page on your phone and try to scroll left and right. If anything moves sideways, that's the thing to fix. Images should shrink to fit the screen, never spill off the edge.

Step 3: text people can read without pinching

If people have to zoom to read, most won't bother. For years, Google's Lighthouse tool flagged a page when more than 40% of its text was smaller than 12 pixels. It dropped that check in October 2025, saying there was no sign it was still a search concern, but it's still a useful rule of thumb: tiny text is hard to read on a phone, whoever is checking.

Better than any fixed number is not going below the size your visitor's phone is set to, which is what web.dev's typography guidance recommends. Keep lines short, use real text rather than words baked into images, and check the contrast outdoors. A pale grey that looks elegant on your monitor can disappear on a phone in sunlight.

Step 4: buttons big enough for a thumb

Fingers are much less precise than a mouse. There are three standards for how big a tap target should be, and they agree more than they differ:

For a website, aim for the bigger numbers. Make your main buttons at least as tall as a fingertip, put space between links so a thumb can't hit two at once, and make your phone number a link so one tap calls you. Google's own Lighthouse check passes any tap target of 48 by 48 pixels.

Step 5: images that don't weigh the page down

The most common reason a small business site is slow on a phone is one huge photo, often straight off a camera, at ten times the size the screen can show. Three fixes cover most of it.

1. 1Use a modern formatWebP and AVIF files are smaller than JPEGs at the same quality, according to web.dev. Most builders convert images for you; if yours doesn't, export at the size you need before uploading.
2. 2Serve the right sizeA phone doesn't need a 4,000-pixel-wide photo. Builders and hosts that create several sizes of each image and let the phone pick the right one save the most.
3. 3Load images lower down laterImages below the first screen can wait until someone scrolls to them. Don't do this for the main image at the top, which should load straight away.

Step 6: fast enough on mobile data

Google publishes what fast enough means, as Core Web Vitals: the largest piece of content appears within 2.5 seconds, the page responds to a tap within 200 milliseconds, and the layout doesn't jump around while it loads. It measures them separately for phones and desktops, so a site can pass on a laptop and fail on a phone.

Run your home page and your busiest page through Google's free PageSpeed Insights and read the mobile result, not the desktop one. In Kahu's Search Visibility, the sample business site scores 100 for being found by Google and for mobile experience, but speed on phones is its weakest score, at 63 out of 100. That's normal for a site with lots of photos, and it's exactly where step 5 helps most.

Step 7: pop-ups that don't block the page

A pop-up that covers the whole screen on a phone is the fastest way to lose a visitor, and Google says intrusive interstitials can hurt how a page performs in search. Its advice is to use banners that take up a small part of the screen instead, like a slim newsletter bar or a cookie notice at the bottom.

Check that every pop-up on your site can be closed with one tap, with a close button big enough to hit. Pop-ups required by law, like an age check, are fine, but they should sit over the content rather than send people to a different page.

Step 8: forms that are quick with one thumb

Typing on a phone is slow, so every field costs you. Ask for as little as possible: a name, a way to reply and what they need. Then make each field easy, using the advice in web.dev's guide to forms.

• Use the right field type, so an email field brings up the @ keyboard and a phone field brings up a number pad.
• Turn on autofill, so the phone can fill in a name, email and number for the visitor.
• Don't make people type their email twice to confirm it.
• Mark which fields are required, and show errors next to the field, not only at the top.

The mobile mistakes we see most

Most small business sites don't fail on one big thing. They fail on a handful of small ones that nobody notices on a laptop. These are the ones worth checking first.

• A menu or price list uploaded as a PDF, which opens tiny on a phone and can't be read without zooming.
• Text baked into images, like opening hours on a poster, which can't be resized, translated or read by search engines.
• A phone number written as plain text instead of a tap-to-call link.
• A large photo or video at the top that pushes your headline and main button below the first screen.
• Two buttons or links so close together that a thumb hits the wrong one.
• A booking or quote form that asks for the same detail twice, or uses a tiny dropdown for dates.

None of these needs a redesign. Most take a few minutes each to fix, and together they're often the difference between a site that works on a phone and one that technically fits on one.

Responsive images, in practice

A phone and a large desktop screen don't need the same image. Responsive images let the browser choose: you provide a few sizes of each photo, and the browser downloads the smallest one that will look sharp on that screen. web.dev's guide explains the markup, the srcset and sizes attributes, and adds two easy wins. Always set an image's width and height so the page doesn't jump while it loads, and keep the main image at the top loading straight away, rather than lazily.

The five-minute test on your own phone

You can check most of this without any tools. Turn wifi off, open your site on your phone, and go through these in order. If you can, hand your phone to someone who's never seen the site and watch them do it; you'll spot things you'd never notice yourself.

1. 1Count the secondsOn mobile data, how long until you can see what the business does?
2. 2Scroll sidewaysOn every page, does anything move left or right?
3. 3Read without zoomingCan you read the prices, opening hours and small print as they are?
4. 4Tap everything with your thumbThe menu, the main button, the phone number and the links. Any misses?
5. 5Send yourself an enquiryWith one thumb, then check it arrived. How many fields did you resent?

For a closer look, Chrome's developer tools can show your site at the size of different phones and slow the connection down to a mid-range phone's speed. Google itself calls that a first approximation, though. Nothing replaces a real phone in a real hand.

Where Kahu fitsKahu SitesPick a design and Kahu writes your site in your own words, hosts it, and changes it whenever you ask: new hours, new prices, a new page.Written in your words, changed by chatHosting, SSL and a free web address includedBring your own domain when you are readySee Kahu Sites →yourbusiness.exampleYour Business · physio, same-week appointmentsBook onlinePricesACC claimsYou approved new Saturday hours in chat · live 2 min ago

If your site runs on Kahu, you can check every change in the preview at phone size before it goes live, because nothing goes live until you say so. The steps above are still worth running yourself, because they're about what your customers do, not what any platform does.

I'm Muskaan Sharma, a user researcher at KahuLogic, a New Zealand company with a team across Australia, New Zealand and India. We build and look after websites for small businesses, and this is the checklist I'd run on any site, whether or not it's one of ours.

Frequently asked questions