A homepage is usually asked to do too many things. It has to introduce the company, list the services, prove credibility, carry the brand and persuade someone to make contact. Trying to do all of that at once is how homepages end up saying very little.
This article is about the first screen of a homepage specifically — what it has to contain, what belongs underneath it, and how to test whether yours works.
The key idea
The first screen of a homepage has to answer three questions: what you do, who it is for, and what happens next. Everything else on the page is waiting for those three to be answered.
A homepage is asked to do too many things
The pressure is real and it usually comes from inside. Every part of the business has something it wants on the homepage, and each request is reasonable on its own. The result is a first screen that is a negotiated settlement rather than a message.
It helps to be explicit that the homepage is not the place where anything gets explained in full. It is the place where a visitor decides whether to keep going. The explaining happens on the pages they choose afterwards.
Three things, in order
Before anything else, a visitor needs to know what you do, whether it is for someone like them, and what happens if they are interested. If those three are not answerable from the first screen, the rest of the page is working uphill.
Notice that none of the three is “who we are”. That matters, and it is a second-screen question — it is what the about page is for. A homepage that opens with the founding story is answering a question nobody has asked yet.
Write for the person, not the category
“Digital solutions for ambitious businesses” is a category. It could belong to thousands of companies, which is why nobody reading it recognises themselves in it. The specific version — what you actually do, for whom, in plain words — is almost always shorter and always clearer.
Specificity feels risky because it excludes people. That is the point. A homepage that excludes the wrong visitors is doing its job, and the enquiries that survive it are better ones.
A test that costs nothing: read your headline and ask whether a direct competitor could put it on their own site unchanged. If they could, it is a category, not a claim.
One primary action
Give the first screen a single primary action and make every other option visibly secondary. Two equally weighted buttons is a decision handed to somebody who has been on the page for four seconds and does not yet have enough information to make it.
The general case — why competing actions cost you enquiries, how big a tappable target needs to be, and what to do on long pages — is covered in why visitors leave, and how a clearer path changes that. On a homepage the only addition is that the primary action is usually the smaller commitment, not the bigger one. “See how we work” can work better than “Book a call” at the top of a page, with the call offered once the visitor has a reason to want one.
What belongs below the first screen, and in what order
Once the first screen has done its job, the rest of the page can slow down. The order below is not arbitrary — each section answers the question the previous one raises.
- What you do, in a little more detail. Three or four services, named the way a customer would name them rather than the way you organise them internally. This answers “is my problem on this list?”
- Proof. Work you have done, clients you have done it for, or something specific enough to be checkable. This answers “has anyone like me trusted them?” and it is the section most often filled with adjectives instead of evidence.
- Process. What actually happens if they get in touch — the first conversation, what you need from them, roughly how long things take. This answers “what am I committing to?” and it removes more hesitation than any amount of persuasion.
- Contact. The same action from the first screen, repeated, at the point where someone who has read the whole page is ready to take it.
If a section does not answer one of those questions, it is probably a page rather than a homepage section.
The five-second test, and how to run it properly
Show the top of your homepage to someone outside your business for five seconds, then take it away and ask two questions: what does this company do, and who is it for. If they cannot answer, the problem is the copy or the hierarchy, not the design.
Most people run this test badly, in three specific ways.
- They ask someone who already knows the business. A colleague, a partner, an existing client. All of them will pass the test and none of the results mean anything.
- They let the person look for longer. The five seconds is the whole method. Given fifteen, a person will reconstruct the answer from context and you will learn nothing about the first impression.
- They ask “do you like it?” afterwards. That is a different test, and the answer is always yes, because people are polite.
Run it on a phone as well as a laptop, and run it on the phone first. The first screen on a phone is far smaller than the one the page was designed on, and it is where most people will meet you.
Practical example
A commercial cleaning company’s homepage opens with “Excellence in facilities support since 2009”, a stock photograph of a lobby, and two buttons of equal weight: “Our services” and “Request a quote”.
Shown for five seconds, three people outside the business could say it was something to do with buildings. None could say what the company actually does, and none could say who it was for.
The rewrite does not change the design. The headline becomes what they do and who for, in plain words; the date moves to the about page; “Request a quote” becomes the single primary action and “Our services” becomes a text link beneath it. Whether that produces more enquiries is a question for the following quarter, and it would be dishonest to put a figure on it here.
Two things worth checking while you are there
Both are accessibility requirements rather than opinions, and both bite hardest on exactly the part of the page this article is about.
- Does the first screen survive being narrow? WCAG 2.2 Success Criterion 1.4.10 Reflow, at Level AA, asks that content be usable without scrolling in two dimensions at a width equivalent to 320 CSS pixels. Hero sections with wide fixed elements are a common place this fails.
- Can the headline be read against the image behind it? Success Criterion 1.4.3 Contrast (Minimum), also Level AA, asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, where large means at least 18pt, or 14pt bold. White text over a photograph frequently fails this in the bright parts of the image even when it looks fine in the dark parts.
If the first screen is the part you are least sure about, it is almost always the part worth fixing first.
Where to start
- Write, in one sentence, what you do and who for. Use the words a customer would use.
- Check a competitor could not use that sentence unchanged.
- Reduce the first screen to one primary action and make everything else look secondary.
- Open it on a phone and confirm all three questions are still answered.
- Run the five-second test on someone outside the business, on the phone version.
If the first screen is where you are unsure, that is usually where a web design conversation starts. And if you already know what you want to say but not how to structure it, that is a shorter conversation than a rebuild.
Send us your homepage and the one sentence you wish it said. That is enough to have a useful conversation.
