How to Make a Website Mobile Friendly (and Why It Isn't)

In short

Every site that looks bad on a phone does so for one of six reasons: fixed widths, small type, oversized images, a desktop menu, pop-ups or tables.
Responsive beats a separate mobile site, and the argument ended a decade ago.
Run the thumb test on cellular with one hand. It takes two minutes and finds most of the problems.
Fix in order: viewport and widths, type, images, menu and phone number, pop-ups, forms, tables, spacing.
If the layout itself is fixed-width, patches fight each other and a rebuild is the cheaper path.

This is the first of 2 guides on mobile website. The rest are listed below.

Hold your site the way a customer holds it

It is 3:10 on a Tuesday and a woman is sitting in the school pickup line with the engine running. Her son chipped a tooth at recess. She types "emergency dentist near me," taps the second result, and your website arrives on her phone as a perfect miniature of the desktop version: six columns shrunk to the width of a credit card. She pinches to zoom. The menu she taps slides over the phone number. A box asks her to subscribe to your newsletter. She presses back and calls the third result instead.

"Our site looks bad on mobile" is how owners describe this. It sounds like a matter of taste. It is not. Every website that looks wrong on a phone does so for one of about six specific reasons, each a technical fact you can point to, each with a known fix. Some fixes take an afternoon. A few require rebuilding the site. None require the "mobile optimization package" sold as a line item, because a site built correctly has no mobile version to optimize. It has one version that fits whatever screen it lands on.

Somewhere around six in ten visits to a small business website now come from a phone, and for anything urgent, a leak, a lockout, a toothache, it is most of them. The phone is also the device where the call is one tap away. A site that fails there fails where the money is.

Your customer is not going to go find a laptop. The site meets her on the phone in her hand or it does not meet her at all.

Why your website looks bad on mobile: the six causes

Open your site on a phone and match what you see to the left column. The middle column is what is happening in the code; the right column is the fix. This is the diagnosis a developer runs in the first five minutes, and you can run it too.

What you see on the phone	What is happening	The fix
The whole desktop page, shrunk. You pinch to read anything.	Fixed pixel widths, or a missing viewport tag, the line that tells a phone to render at its own width.	Add the tag; replace fixed widths with widths that flex. On an old site, this is the rebuild.
Text you have to zoom to read.	Body type set at 12 or 14 pixels for a monitor two feet away, never scaled for a screen eight inches away.	Body text at 16 pixels minimum, headlines that scale down.
Images cut off, cropped wrong, or forcing a sideways scroll.	Fixed pixel dimensions, or a wide hero photo with no portrait crop.	Images fill their container and no more, with a portrait crop where it matters.
A menu that opens on hover only, or covers the phone number.	A desktop navigation bar with no tap version.	A tap menu, with the phone number outside it, visible either way.
A pop-up that fills the screen with no close button in reach.	A desktop modal sized for a large screen, close control off the edge.	Remove it. If it must stay, size it to the screen and delay it.
A table that spills off the right edge.	HTML tables do not shrink. Six columns want six columns of room.	Let the table scroll on its own, or stack each row into a card.

Two more that are not about looks: buttons so crowded a thumb hits the wrong one, and a page so slow on cellular that the visitor never sees any of this. The [speed guide](/guides/website-speed) covers the second.

Notice the pattern. Every cause is a desktop decision that was never revisited for a small screen. The site was designed on a monitor, approved on a monitor, and shipped. The phone version was assumed. That is the whole disease, and it is why the best practices guide argues for designing the phone layout first.

Responsive site or a separate mobile site?

There are two ways to serve a phone. The first is a separate mobile site, usually at an address that starts with "m." It was the standard answer around 2012, and some are still running: franchises on old platforms, businesses whose vendor sold it as an add-on and never looked back. The second is a responsive site: one page, one address, one set of content, with a layout that rearranges itself to fit the screen. The responsive design explainer describes how that works; this section is about which one you should have.

The answer is responsive, and it is not close. A separate mobile site means two sites to update, two sets of pages for Google to reconcile, redirects that break, and a mobile version that is always the neglected one because it was built second. The only reason to still have one is that nobody has retired it yet.

If your site is responsive already and still looks bad on a phone, the problem is not the approach. It is one of the six causes above, sitting inside a responsive framework that was never finished.

The thumb test

Before spending anything, run this on your own phone. Not on the office Wi-Fi: turn Wi-Fi off and use cellular, because that is what the customer in the pickup line has. Hold the phone in one hand and use only your thumb. Ten items, two minutes.

The headline is readable within two seconds, without zooming.
You can say what the business does and where after one look.
The phone number is visible without opening the menu, and it dials when tapped.
The menu opens with one tap, closes with one tap, and lists every main page.
Nothing scrolls sideways. Nothing is cut off at the right edge.
Every button is hit on the first try, with room between it and its neighbors.
The main form can be filled with a thumb, and the number keyboard appears for the phone field.
No pop-up covers the content, and if one appears it can be closed with a thumb.
Images are sharp, not stretched, and the subject is in frame.
The page does not jump around as things load.

Nine or ten and the site is fine on a phone; the best practices guide is about making it good. Six to eight and you have specific, fixable defects. Five or fewer and the mobile layout is not really there, which raises the last section's question: patch it or replace it. A low score here is usually the answer to why people leave a website without calling.

How to make a website mobile friendly: the fix list, in order

The order matters. The first three fixes are the foundation and they are cheap; the later ones assume the earlier ones are done. Each is described so you can do it, ask your developer for it, or check that it was done.

1
Add the viewport tag and remove fixed widths.
One line in the page head tells a phone to render at its own width instead of pretending to be a monitor. Then every pixel width becomes a percentage or a maximum. On a page builder this is usually done; on a hand-coded site from 2014 it is the whole job.
2
Set the type for eight inches, not two feet.
Body text to 16 pixels at least, 17 or 18 if the audience is older. Headlines that scale with the screen. This one fix removes most of the pinching.
3
Make every image fluid and shrink the files.
Images fill their container and never exceed it. Files compressed and served at phone size, not the 4,000-pixel original. The Core Web Vitals guide explains why this also decides your speed score.
4
Rebuild the menu for a tap, and move the phone number out of it.
A menu that opens with one tap and closes with one tap. Hover menus go. The number sits in the header bar itself and dials on tap. For service businesses a call bar fixed to the bottom of the screen usually beats everything else; the calls and estimates guide explains why.
5
Kill the pop-ups, or size and delay them.
A newsletter modal that fills a phone screen costs you the visitor and can cost you ranking. If a message must appear, make it a bar and show it after the visitor has scrolled.
6
Fix the forms.
Fewer fields, one column, each tall enough for a thumb. The phone field brings up the number keyboard. A full-width button that says "Get my quote," not "Submit." If the form is also broken, form repair is a fixed-price job.
7
Handle the tables, the embeds and the tap targets.
Any table with more than three columns scrolls on its own or stacks into cards. Maps and videos get a wrapper that keeps their proportions. Every button at least 44 pixels tall, with a gap between neighbors.
8
Test again on cellular, on both kinds of phone.
iPhone and Android differ in fonts, keyboards and video. Run the thumb test on each after the fixes, then once more a week later, because something always regresses.

What you can fix yourself and what needs a developer

Some of this is a settings change. Some of it is code. Where the line falls depends on how the site was built.

Fix	Page builder (Wix, Squarespace)	WordPress with a theme	Custom-coded site
Type sizes	Settings, an hour	Theme settings or a few lines of CSS	A few lines of CSS
Image sizes and compression	Re-upload smaller files	A plugin plus re-uploads, or a developer	Usually built in already
Menu and phone number placement	Limited by the template	Theme dependent; often a developer	Developer, a short job
Pop-ups	Turn the app off	Turn the plugin off	Remove the code
Forms	Rebuild in the builder's form tool	Form plugin settings, or a developer	Developer, a short job
Fixed-width layout	Switch templates, which is a rebuild	Switch themes, which is close to a rebuild	Developer; if the site is old, a rebuild

"Developer, a short job" means hours, not weeks, and is what [mobile responsive fixes](/services/mobile-responsive-fixes) covers at a fixed price.

The fixed-width row is the one that decides things. If the layout was never built for a phone, the fixes above are patches, and each patch fights the one before it. You are then choosing between a mobile-friendly coat of paint and a site that is actually mobile friendly, and the redesign guide will help you decide. For everything short of that, layout repair handles the menus, images and spilled tables at a quoted price, and the free audit will tell you which rows apply to your site before anyone quotes anything.

The rest of this series

Find out what your site is actually doing.

A free audit scores your site on speed, mobile, SEO and security, and lists the fixes in order of what they are worth. Delivered as a PDF to your inbox.

Run the free audit Or just ask a person

Go deeper

Free · No obligation

Does your site work for a thumb?

Tell us what happens when you open your site on a phone and we will tell you what is causing it and what the fix is. Free, and you keep the answer.

Which of these sounds like you? (pick any)

Questions people ask

Straight answers

Because a phone screen is about a fifth as wide as a monitor and the site has to rearrange itself to fit. If it was built with fixed widths, it cannot, so the phone shows a shrunken copy of the desktop. If it was built responsively, it stacks columns, scales type and swaps the menu for a tap version. Looking different is the goal. Looking broken means one of the fixes in this guide was skipped.

Open it on your own phone with Wi-Fi off and run the thumb test: readable headline in two seconds, phone number visible and tappable, a menu that opens with one tap, nothing scrolling sideways, buttons you hit on the first try, a form you can fill with a thumb. A free site audit adds what a phone cannot show you, such as load time on cellular and tap target spacing.

Google ranks the mobile version of your site as the main one, so a page that is unusable on a phone is ranked as an unusable page. Intrusive pop-ups on mobile and slow mobile load times count against it directly. It is less a penalty than a measurement: Google sees what your customer sees and ranks accordingly.

Usually, if the site sits on a responsive framework and the problems are type, images, menus, pop-ups or forms. Those are hours of work for a developer. If the layout itself is fixed-width, the fixes become patches that fight each other, and a rebuild is cheaper than the third round of patches. A developer can tell which case you are in from the code in a few minutes.

Mobile friendly describes the result: a site a person can use on a phone. Responsive describes the way of getting there: a single site whose layout adapts to the screen. A separate mobile site can be mobile friendly without being responsive, though almost nobody builds one anymore. Today the two words point at the same site, and responsive is how it is built.

It depends on which case you are in. Adjusting type, images, a menu and a form on a site that is already responsive is a small fixed-price job, typically hours of a developer's time. Replacing a fixed-width layout is a new website, and a custom small business site generally runs $6,000 to $20,000, with 0% financing available. We quote both as a fixed price after looking at the code.

Where to go from here

How to Make a Website Mobile Friendly