Why is my website not mobile friendly?

Why does my website look different on mobile?

Owners describe both faults the same way: my website looks bad on mobile. They have different causes and very different repair bills, so it is worth knowing which one you have before anyone quotes you.

Everything is tiny and you have to pinch to read it

The page is missing one line of code, called the viewport tag, that tells a phone how wide to draw it. Without that line the phone assumes it has been handed a desktop page, lays it out at desktop width and shrinks the result to fit the screen. So your customer sees the whole desktop site at a size nobody can read, and has to pinch and drag to find your phone number.

5% of the sites we checked do this, one in twenty. Adding the missing line on its own rarely fixes it. A page designed only for a wide screen, told to draw itself at phone width, tends to come apart, so the layout has to be rebuilt to rearrange itself. On an older site that is most of the work.

The page slides sideways, or the right edge is cut off

Here the phone is drawing the page at its own width, but something on the page has been given a fixed width in pixels: a banner, a table of prices, a photo or a whole section sized for a desktop monitor. That piece hangs off the side of the screen, and the whole page moves left and right under the customer’s thumb when they meant to scroll down.

A fixed pixel-width layout turned up on 18% of the sites we checked (82 sites), the second most common problem in the whole study. It is often one element at fault, and once someone has named it the repair can be small.

How many business websites are not mobile friendly

Some kinds of business are much worse off than others. The full figures are in what we found in 467 business websites; the phone ones are these:

• Home improvement: a fixed pixel-width layout on 32% (8 of 25 sites), the highest of any group. Close to one site in three.
• Trades and home services: a fixed pixel-width layout on 24% (27 of 111 sites), about one in four.
• Seniors and mobility: 12% do not adapt to a phone at all, the highest of any group. Pinching tiny text is a hard ask of anyone, and these businesses serve older customers.
• Urgent services: 10% do not adapt to a phone at all. People ring these businesses in a hurry, and a number they have to zoom in to find is the last thing they want at that moment.

The same study found a third phone problem, which is weight. The heaviest tenth of homepages start at 667 KB. On a phone with one bar of signal, that is a page the customer watches arrive in pieces before they can do anything with it.

How a website ends up looking bad on mobile

A fixed width usually dates from the day the site was made. Someone laid it out for a desktop monitor and picked a width that suited one, and nobody went back once phones took over.

The other common route is a later edit. A wide price table or a large photo gets pasted into a page without being told it may shrink, and a page that used to fit a phone stops fitting.

Either way, you are unlikely to be the one who notices. You check your site on one phone, and you already know where everything is. The article on the screen widths every Droom build is tested at explains why your own phone is the worst place to test your own site.

If you made the site with a website builder

The same faults turn up on sites made with website builders. The template you started from was probably made to rearrange for a phone; the trouble tends to come from what went into it afterwards, such as an image dropped in at a set size, a table pasted from a spreadsheet or a text box stretched to fill a desktop screen.

Some builders also keep a separate phone layout that you arrange by hand. If yours does, a change made on the desktop view may never have been made on the phone one, which is why the two can drift apart. Open the builder’s phone preview and go through it page by page, the way a customer would.

What it costs you

A customer on a page they have to pinch, or one that slides away under their thumb, has an easy way out: the back button, then the next business on the list. You never see it happen, because nobody rings to say your website was hard to read.

If you pay for ads, you have paid for that visit whether they stay or not.

Google reads the phone version as well. Its own documentation on mobile-first indexing says: “Google uses the mobile version of a site’s content, crawled with the smartphone agent, for indexing and ranking.” The version of your site Google judges is the same one your customers are struggling with.

How to make a website mobile friendly: what to ask for

If someone looks after your site, send them a screenshot from your phone and ask these questions in this order:

1. Does every page have a viewport tag? If the answer is no, ask what it takes to make the layout rearrange for a phone. A straight answer may be that it is most of a rebuild.
2. What on the page is set to a fixed width? Ask them to name it: the banner, the price table, the photo. A named element usually means a small job.
3. Which screen widths will you check before you call it done? One phone is not enough. At the least, a narrow phone, a wide phone and a tablet turned sideways.
4. Is the price fixed? A repair to one element should come with a figure in writing before the work starts.

If nobody looks after the site any more, the rescue checklist gets you the domain and the files back first, which anyone fixing it will need.

If you would rather I looked, the free Field Test uses your site the way a customer does, on a real phone, and sends what fails on video with a fixed price to fix it. If the answer turns out to be a rebuild, a Droom website is $999 one time for up to five pages, and every build is tested at fourteen screen widths before it goes live.