Judging your own site · 9 min read
What a stranger sees before they scroll
Nearly all of this is read on a phone. Four things have to be on the first screen. How to check yours today, and what to send when one is missing.
The screen that decides
By the end of this lesson you will be able to hold your own phone at arm's length, look at your home page without touching it, and say whether a stranger has learnt four things. Who you are. What you do. Where you do it. How to reach you. If one of the four is missing you will know what to send to get it back, in a sentence.
Nearly all of this is read on a phone. Not a phone on a desk — a phone in one hand, at a bus stop, in a van with the engine running, on a sofa with the television going. The person holding it has three tabs open, all of them plumbers, and they are working out which one to keep. They are not reading your site. They are checking it.
So the first screen is not an introduction to the website. For most of the people who ever see it, the first screen is the website. Everything below is for the ones who have already decided you might be worth a call.
There is no single fold, and anybody who gives you a figure in pixels is guessing. Screens differ, browsers hide and show their own bars, and plenty of people have the text size turned up. The rule that holds: take the smallest phone in common use, about 375 points across, and treat the first screen as the header plus one screenful under it. If it works there it works everywhere.
Note. A first draft is built so the header and the opening block fill one screen and no more — about 68 pixels of header, and the rest of the height under it. So a first screen that reaches the bottom with nothing much on it is almost always the words rather than the layout.
Four things, and nothing else has to be there
Four facts. The rest of the site exists to support them, and none of the rest has to be up there.
What the first screen has to carry
- Who you are
- The name of the business, as readable text. Not a logo blown up to half the screen, and not a name that exists only inside a picture — a picture cannot be copied, searched, or read out to somebody who cannot see it.
- What you do
- The trade, in the words a customer would use. Boiler repairs and installations. End of tenancy cleans. Tree surgery and stump grinding. A stranger should be able to finish the sentence after two seconds and be right.
- Where you do it
- The town, or the towns. Half the doubt on a trade site is somebody wondering whether you come out this far. A named place answers it before they ask, and it is also the word they typed into the search box.
- How to reach you
- A phone number that dials when it is pressed, or a button that leads straight to one. The whole of the next lesson is this line, because it is where most sites lose work they had already won.
Tip. Read the four back as one sentence, the way you would say it to somebody in a pub. Boiler repairs, across Stockport and Cheadle, ring this number. If the sentence has a hole in it, so does the screen.
Note. A fifth line earns its place when it is true, short, and the thing a customer is actually wondering — when the phone gets answered, that looking at a job costs nothing, that you are on the register they have been told to check. One of those. Not three.
What pushes the four down the page
Nothing on a first screen is free. Every element up there takes room from the four, and most sites lose the four to things nobody chose on purpose. They arrived because that is what websites look like.
One of them is worth naming before the table, because it is the one people defend. A slogan is not a sentence about your business. Quality you can trust is a claim any of the other three tabs could make, and it is sitting in the place where the trade and the town should be.
| What is up there | What it costs | What to do instead |
|---|---|---|
| A logo at half the screen height | The trade and the town | Shrink it into the header and give the space back to a sentence |
| A slogan in place of a sentence | All four, since it says none of them | Trade, area and availability in one flat line |
| A slideshow of three pictures | Whatever was written on slides two and three | One still photograph, with the words on the page rather than the picture |
| A headline of fifteen words | The line under it, and usually the button | Cut to ten or fewer and move the rest into the section below |
| Words set over a dark photograph | Readability rather than room, which is harder to notice | Put the words on plain background above the picture |
| A consent banner across the bottom | Anything you put at the bottom of the first screen | Keep the way to reach you at the top, where no banner covers it |
Note. Two things are allowed to take room even though they take a lot of it. The header, because it carries the way to reach you on every page. And the opening sentence, because it is three of the four at once. Judge everything else against those two.
Run this on your own phone, now
Four minutes, and it is the only part of this lesson that finds anything. A site read on the computer it was built on passes tests it should fail.
- Open the site on your own phone, at its real address. A desktop browser dragged narrow is a different thing, and it lies to you in both directions.
- Use a private window, so you get the site as a stranger does — consent banner up, nothing remembered.
- Hold the phone normally and read only what is on the screen. Do not scroll. Count the four out loud: name, trade, town, way to reach you.
- Put your hand over the photograph and read it again. If the four only survive because of the picture, they do not survive a slow connection, where the picture arrives last.
- Press the way to reach you with a thumb, not a fingernail. If you miss it, so will a man in gloves standing in the rain.
- Show it to somebody who does not know the business. Three seconds, then take the phone away and ask what the company does and where. What they say back is the honest score.
Tip. If you only do one of those, do the last. Everybody marks their own site generously, because you knew all four things before you looked.
Note. If it fails on your phone and passes on somebody else's, check your own text size before spending a turn. A phone set to large text fits noticeably less on a screen — worth knowing about your customers as well as about you.
What to ask for when one is missing
The builder takes plain words, so the fix is naming the missing fact and where it belongs. Say what should be true rather than how to make it true — a request written in measurements gets a worse result than the same request written as a sentence. The wording below is meant to be typed as it stands, with your own trade and town in it.
| What is missing | What to send |
|---|---|
| The trade | Put what we actually do in the opening line, in plain words — boiler repairs and installations — instead of the slogan. |
| The town | Add the towns we cover to the opening block, named in full, rather than only on a separate page. |
| A way to reach you | Put the phone number in the header as a tap-to-call link, and keep it visible on a phone rather than behind the menu button. |
| Room, because the opening block overruns | Shorten the headline to under ten words and move what it loses into the section underneath. |
| One clear picture instead of a slideshow | Replace the slideshow with a single still image, and keep the words from the first slide as the headline. |
| Readable words over the photograph | Move the opening words off the photograph and onto a plain background above it. |
Tip. Copy changes travel well together — trade, town and opening line can go in one message. Layout changes do not. Ask for one and look at the result before asking for the next, or you will not know which of the three produced the bit you dislike.
Note. Two things not to ask for. Do not name a plugin, a widget or a bar you saw on another site — describe what should happen and let the build choose the shape. And do not ask for the header to stick to the top as you scroll, because it already does.
What the first screen cannot do
Worth being clear about the size of this, because people finish a lesson like this one and expect the phone to ring differently by Thursday. The first screen does one job. It buys you the scroll.
- It cannot sell a job. Nobody books a bathroom off four facts. It earns the next ten seconds, and the ten after that are where the work is won.
- It cannot make up for a number nobody answers. A perfect first screen in front of a phone that rings out is a faster way to disappoint somebody.
- It cannot carry your proof. Reviews, photographs of finished work, the registration number a customer has been told to check — all of that sits below, and below is the right place for it.
- It cannot be fixed by making the type smaller. If the four do not fit, cut words. Type shrunk to fit fails again the moment somebody turns their text size up.
- It cannot be the whole home page. A screen and then a footer reads as unfinished, whatever is on the screen.
- It cannot be judged on a desktop, by you, on the machine you built it on. That is the rule in this lesson people break every single time.
Common questions
- How much of the page actually counts as the first screen?
- Roughly the header plus one screenful under it, on a phone about 375 points wide. There is no exact figure, because browsers hide and show their own bars and text sizes differ. Judge it on the smallest phone you can find.
- Does the fold still matter when everybody scrolls?
- People do scroll. What they decide on the first screen is whether to scroll at all, and that takes about three seconds. So the fold matters less as a boundary and more as an audition.
- Should the whole home page fit on one screen?
- No. A page that is a screen and a footer reads as a mockup rather than a business, and somebody comparing three sites notices which had the least to say. Say the four at the top, then go into proper depth underneath.
- Can I just put a Call button bar across the bottom of the screen?
- It can work, at two costs worth knowing. It covers content permanently on the smallest phones, and it sits where the consent banner goes on the one visit that matters most. The header is the reliable place, and the next lesson is about getting it right there.