A good website shows itself on a phone.

Open it on a phone

This first point isn't one item among others. It governs everything that follows, and it explains why this list looks the way it does.

That's where your visitors are

On the sites I follow, mobile traffic generally runs between 80 and 90%. One of my clients sits at 98%.

That isn't surprising once you think about it for two seconds. People communicate on social platforms, they look at those platforms on their phones, they click from their phones. Everyone has a mobile in their pocket, not everyone has a computer switched on.

I devoted an entire article to that, so I won't repeat it here. Just take the practical consequence: your site is judged on the screen where it's actually seen.

And not on your own phone

The classic mistake is testing on the latest model, big screen, perfect connection. Everything's fine.

Test on a device that's four or five years old. Test on a small screen, because that's where layouts break. Test on average mobile data, not on your home network. And go all the way through an enquiry, not just the homepage.

The big screen is easy, the small one is the exam

This is the heart of it, and nobody says it.

Making a site look good on a computer screen isn't hard: there's room. You can line up three columns, let things breathe, drop in a large image, and it all fits.

On a phone, every element has to earn its place against the others. It's an exercise in constraint, and that's exactly why it reveals everything.

I'd take a site that works perfectly on mobile over a beautiful one on desktop. If I have to choose, the choice is already made.

On a big screen, everything passes. A site can only be judged where it's actually looked at.

The top bar

First visible element, first impression, and probably the most neglected strip on the web. Three things happen there.

The logo, unfit nine times out of ten

I regularly see long, detailed horizontal logos dropped as they are into a phone bar. The result is either tiny and illegible, or overflowing and breaking the alignment.

The fix is simple, and it means preparing two versions:

• a horizontal one, with the name legible, for the top bar;
• a square or round one, reduced to essentials, for small spaces and social profiles;
• both in a single colour, so they work on light and dark backgrounds.

The most useful instinct, if you only prepare one: make it for mobile. It'll work everywhere else; the reverse isn't true. And don't over-invest either, a logo is an hour's work.

The menu, and the thumb

Second source of friction, and it's fixed with one rule.

The same button must open and close the menu, in the same place. I see sites where you tap top right to open, and the close control sits somewhere else, or nowhere. That isn't a detail, it's a demand for effort.

Take your cue from the apps your visitors use all day. They settled these questions long ago, with budgets you'll never have. Nothing to guess, nothing to hunt for, no unnecessary thumb travel.

The button that calls without saying who

This one strikes me every time, because it costs calls to businesses that can't spare them.

A "Call us" button that immediately dials a number you've never seen asks for trust nobody feels like giving. The visitor doesn't know who they're calling, whether it's a premium line, or whether they'll reach a switchboard.

People don't like guessing. Two equally simple fixes: display the number in plain sight, or open a panel presenting all your contact options with the number visible. The person then chooses knowingly.

Do you need a sticky bar

A sticky bar is one that stays visible while the page scrolls.

It's useful when the main action needs to stay within reach at all times. It's a nuisance when it eats into an already small screen, or when it overlaps the content someone is trying to read.

So decide case by case, by looking at what your page does, not because it's fashionable.

The top bar is the first thing a visitor sees. It's also the one nobody tests on a small screen.

Floating buttons, and the bottom of the screen

Two separate problems that happen in the same place and end up getting in each other's way.

The bubbles down the side

There was a time when people stuck floating buttons everywhere: one for messaging, one for the phone, one for quotes, one for reviews. Often in different colours, often overlapping.

The experience is poor, for reasons that stack:

• you no longer know where to look, so you click nowhere;
• they cover the content you're trying to read;
• they overlap each other as soon as the screen narrows;
• they look improvised, so they don't reassure;
• and they often end up not working at all.

Multiplying doors doesn't bring more people in, quite the opposite: one door converts better than six.

What I use increasingly instead: an action bar at the bottom of the screen, at thumb height, with two or three entries at most. Exactly like an app. The gesture is already known, nobody has to learn it.

The consent banner

This one is a legal requirement, so its existence isn't up for debate. Its placement is.

The cookie consent banner almost always appears at the bottom. On a computer that's fine, it stays a thin strip in a large space.

On a phone it sometimes occupies a third of the screen and covers whatever sits at the bottom of the page. The case I see most often: it masks the link to the legal notice. In other words one legal obligation hides another, and the visitor can no longer read your information.

The check takes a minute: open your site on a phone, without accepting, and scroll to the bottom. Look at what's covered. Make sure nothing clickable ends up underneath something else.

Anything hidden behind another element doesn't exist. And what doesn't exist can't be clicked.

The writing

Now the most widespread mistake of all, and the one that's fixed fastest. It has a single cause: the copy was written while looking at a big screen.

Four lines that become ten

A paragraph of four or five lines on a computer looks short. It even conveys a certain seriousness.

The same paragraph on a phone runs to eight, ten, sometimes twelve lines. It fills the entire screen. And a block that fills the screen doesn't get read, it gets skipped.

Add badly set type sizes, cramped line spacing and margins hugging the edge, and you've built a page nobody will ever read.

To be clear, because the nuance matters: I'm not talking about a blog article. In an article, reading is expected and long paragraphs are legitimate. I'm talking about pages where someone is looking for information: a homepage, a service page.

Copy is written with the layout

Here's the point of method, and it applies to everyone.

The usual approach is to write the copy on one side and pour it into a layout. That never works. You end up with blocks that don't fit, headings that overflow, unbalanced columns.

Personally I write first, then rework alongside the layout. These are two movements, not two separate stages: copy that breaks the page gets shortened, a page that suffocates the copy gets widened.

That back and forth is precisely the job of whoever handles the user experience. It isn't writing and it isn't graphic design, it's the arbitration between the two.

And sometimes it just has to be said

Don't take the above literally, that would be a misreading.

Sometimes a piece of information is essential to the decision and takes five lines. In that case you write them, and you look for something else: split it, rank it, pull one sentence out, fold the rest away.

It isn't black and white. The work consists precisely in finding a solution when the two requirements collide, not in applying a rule.

Copy that hasn't been reread on a phone hasn't been reread.

Images and video

Same logic, applied to what costs the most to produce. And that's exactly where the oversight hurts, because you don't reshoot.

Plan the crop, don't recrop afterwards

An image composed for a wide horizontal format won't recrop cleanly to vertical. The subject ends up cut off, off-centre, or lost in a background that never mattered.

That's decided when you commission, not afterwards. When you work with a photographer, explicitly ask for vertical framings alongside the horizontal ones. It's nearly free on the day and impossible to recover later.

And remember that your own phone photographs often do the job, provided they're framed with the use in mind.

Video, and the Grand Bleu example

Same problem, more expensive. You commission a film, it arrives in horizontal format like a movie, and it becomes unusable in half the places you need it.

A case I fully stand behind: on the Grand Bleu site, the available videos came from influencers, so they were shot vertically. Rather than force a recrop, we did the opposite and built the display around the vertical format, including on desktop.

The result is coherent, and above all it matches what people already watch. You don't ask a creator to shoot horizontally, it makes no sense. You adapt the page.

Weight, which decides who sees the image

Last point on media, more technical but direct in its effects.

An image sized for a large screen is heavy. Loaded as it is on a phone with an average connection, it takes several seconds to appear, and meanwhile the page jumps around while you're trying to read.

Preparing lighter versions for small screens isn't a developer's refinement. It's what decides whether your best photograph is seen at all.

What wasn't planned at the shoot can't be fixed in the edit.

Hover doesn't exist

Now the mistake that irritates me most, because it's made by people who do this for a living.

There's no mouse on a phone

Hover is the effect triggered when a cursor passes over an element: information appearing, an image revealing itself, a menu unfolding.

On a touchscreen there is no cursor. There's only a finger, and a finger hovers over nothing: it touches or it doesn't.

The direct consequence: anything hidden behind hover is invisible to most of your visitors. Not degraded, not less legible: absent.

I see it on sites built by established agencies, and I'll say it as I think it: it's a professional failing. The issue has been known for fifteen years. I touched on it when writing about what drives visitors away, but it deserves stating in its own right.

False modernism

Behind this mistake there's nearly always the same intention: looking modern. Animations, reveals, elements that move as you pass over them.

On the designer's screen it works and it demos well. On a phone it doesn't trigger, or it triggers at the wrong moment, or it slows everything down.

Look instead at the companies that live off their conversion rate. Amazon, Airbnb, the big platforms your customers use every day. You'll find almost no gratuitous effects. They go straight to the point because they measure everything, and because whatever produces nothing doesn't survive the review.

A spectacular effect costs twice: once in development, once in lost visitors.

An effect most of your visitors can't trigger isn't an effect. It's deleted information.

One screen, one section

Here's a principle I apply consistently. It isn't a universal rule, it's an observation from experience, and it changes a great deal.

The principle

On mobile, one screen should correspond to one idea. You scroll, you land on a block, you understand what it's about, you carry on.

That rhythm creates a sense of progress. You're moving through something, and each stop delivers. Conversely, when one section stretches over six screens, you feel stuck in a page that talks about nothing else.

Except when you know where you are

There's an exception, and it matters if you don't want to misapply the above.

On a classified ads page you can scroll for minutes without it being any problem. Why? Because you know that's all the page contains. Long scrolling is the expected behaviour, it's the service itself.

Same for a shop's category page, or a list of articles. Long scrolling is legitimate when the page does one thing.

The problem appears on pages that do several things, starting with the homepage.

The grid that becomes a corridor

The concrete case, and it's everywhere.

On a desktop you display a grid of three columns by three rows. Nine items visible at once, tidy and readable.

Switch to a phone: the columns stack, and your nine items become a single column of nine blocks. The visitor has to scroll across several screens to get past a section that, on a desktop, took one glance.

The ways out are known and easy:

• show fewer items on mobile, three rather than nine;
• switch to horizontal scrolling, like a carousel, a gesture everyone knows;
• group them, and send the rest to a dedicated page.

What never works is deciding nothing and letting the grid stack by itself. Which is nonetheless the default behaviour of most tools.

A layout doesn't convert from the big screen down to the small one. It's decided for the small one, then spread out.

Common sense, and why it converts

All these points look technical. They aren't really: mostly they require looking at your own site the way a stranger would.

Look elsewhere, it's free

The best exercise costs nothing: open your competitors' sites on a phone and go all the way through a journey. Then do the same in a sector other than yours, and on the apps you use every day.

You'll see immediately what's comfortable and what isn't. You don't need a specialist vocabulary to feel a journey resisting.

A good experience is paid for in trust

It's worth saying why all this matters, otherwise it stays a question of taste.

A smooth site establishes two things. Professionalism: someone thought about it, so the business is probably serious. And trust: if the journey works, the rest probably works too.

Conversely, every friction creates an objection you'll never get to answer. The person won't say no, they'll leave, and they won't make the effort to come back.

A confused mind always says no

That's the sentence I've kept from all these years, and it sums up the whole list.

When someone has to think in order to work out where to click, what you sell, or what it costs, they don't make a bad decision: they make none at all. They put it off, and putting it off looks a great deal like no.

If you make someone think, you've lost them.

Run the test yourself, today, on your phone. If a single point on this list stops you, you already know where to start. And if you'd like an outside view, write to me: I'll go through your site the way one of your customers would, and tell you what's blocking.