What is a mobile-friendly website, and how should yours look on a phone?

A mobile-friendly site is one where the same address serves the same content, laid out again to suit the width of the screen. There is no separate address for phones, no separate content and no separate software; the page gathers itself up on a narrow screen and opens out on a wide one.

The sentence we hear most often is this: "It looks fine on the computer, but on the phone everything has slipped." This article is the answer to that.

Why is mobile so much talked about?

Two reasons, and neither of them is romantic.

The first is the visitor. On a corporate site, most of the traffic now comes from phones. You don't have to guess what the split is on your own site: in Google Analytics 4, the device breakdown under Reports > Tech gives you the exact figure. Look there, then think about how many of those people can actually reach your form.

The second is Google. When the search engine crawls your site, it works from the phone version, not the desktop one. So a piece of text you've hidden on mobile is, as far as Google is concerned, text that isn't on that page at all. Sites that strip half the content out of the mobile view while trying to simplify the menu lose rankings for exactly this reason.

What's the difference between responsive, a separate mobile site and an app?

Three separate things, often mixed up:

The question about apps comes up especially often, so let's be plain. Commissioning an app for a corporate site that people visit a few times a year is money lost. Nobody downloads an app to request a quote once. An app earns its place where the customer comes back several times a week: order tracking, a dealer portal, a subscription.

Which faults show up most often on phones?

In audits we keep seeing the same things:

• Sideways scrolling. If the page slides left and right, the cause is usually a single element: a table given a fixed width, an image spilling over, or a long email address.
• Small type. If you have to enlarge the screen to read, the body text is too small.
• Small buttons side by side. A fingertip isn't as precise as a mouse pointer. With no space between tappable elements, people hit the wrong one and leave.
• Menus that open on hover. On a touchscreen there is no such thing as "hovering". Submenus that open on hover on desktop either never open on a phone or take the visitor to the wrong page with one tap.
• Pop-ups that fill the screen. If the close button isn't visible, that page is lost.
• A phone number as plain text. The number should be a tel: link so that tapping it starts the call. A plain-text number waits to be copied and pasted, and nobody does that.
• Heavy images. A 2000-pixel-wide photograph prepared for desktop is the first thing slowing a page down over mobile data.

How can you test your own site?

There are three checks you can run without waiting for an agency.

Walk through it on your actual phone. Not an emulator, your own device. Come in through the home page, look at a service, go to contact, fill in the form, press send. Wherever you got irritated along the way, that's the part that's broken.

Turn on your browser's device mode. In Chrome, right-click the page, choose "Inspect", then click the device icon and you can try different screen widths. A width of 360 pixels represents the narrowest common screen in the field; if nothing breaks there, you're in good shape.

Look at the Core Web Vitals report in Search Console. What's there isn't a lab test but data from people who actually visited your site. If the mobile tab is noticeably worse than desktop, the problem usually isn't the design but the image sizes and the scripts being loaded. We covered that side in detail in our page speed article.

How does mobile-first design work in practice?

Where the team starts drawing changes the outcome. If the desktop design is finished and only then does someone say "let's fit this onto a phone too", fitting always turns into pruning. Start from the narrow screen and the order reverses: you decide first what is essential, then add on top for the wider screen.

These are the questions we ask while deciding:

When a visitor lands on this page from a phone, what should they see on the first screen? On a corporate site that's usually one sentence saying what you do and a way to get in touch, not a rotating slideshow.

How few fields can we finish the form with? Typing on a phone is a chore. Choosing the right keyboard is part of the job too: tapping the phone field should bring up the numeric keypad, and in the email field the @ key should be within reach.

How many items should the menu have? A menu tree three taps deep turns into a maze on a narrow screen. On a corporate site, five to seven main items is usually enough.

Adapt the existing site, or start again?

That decision depends on the age of the site and what it's built on. Roughly, we split it like this:

If the site is theme-based, reasonably recent, and only overflows in a few sections, this is a repair job; it doesn't need rebuilding, and saying so is part of our job. A few days' work sorts it out.

If the site was built at a fixed pixel width — meaning it never flexes, it only shrinks — or if a separate address is being maintained for mobile, the cost of adapting approaches the cost of rebuilding. We set out step by step how to make that call in our site rebuild article; the most critical part is redirecting the old addresses.

The short answer

A site that opens properly on a phone is not a desktop site shrunk down. The content is the same, but the order, the spacing and the tap targets have been thought through again for that screen. Run the check on your own phone: if you never have to enlarge the screen before reaching the form, the design is doing its job.

If you'd like us to look at where your current site gets stuck on a narrow screen, write to us from the contact page, and if you're considering a new site, have a look at our web design service.