The hero section: what belongs on the first screen

The hero section is what a person sees before scrolling. They go further only if this part told them where they had landed and why they should stay. Everything else on the site can be excellent, but if the hero section does not answer the basic questions, nobody gets to the rest.

Why does the hero section matter more than the rest?

Because it is the only part everyone sees. A smaller share of visitors scrolls below it, and an even smaller share reaches the form at the bottom. The hero section gets the whole audience - paid traffic and search traffic alike.

And because the decision to stay is made here. People do not read a site, they scan it: they look at the headline, hunt for familiar words, and judge whether this looks like what they were after. If a quick glance does not add up to a picture, they go back to the results page.

One important correction: the hero section is not supposed to sell. Its job is to orient the visitor and offer the next step. Everything that follows does the selling.

What has to be on it?

Four things, and together they cover the visitor's basic questions.

Who you are - the name and the line of business. A logo is not enough: it says nothing to somebody seeing you for the first time.

What you offer - a headline that names the service or the product in the client's own words.

Why you - one short thought that sets you apart: how you work, what you specialise in, some condition. Not a list of advantages, one line.

What to do next - a button with a clear action.

For a local business, geography belongs here too: the city or the district. Somebody looking for a service nearby is looking for exactly that.

Price in the hero section is a separate conversation: if you have a clear floor, it works very well. More on that: Prices on your website: show them or hide them.

How do you write a headline people understand at once?

The headline is the main element of the section, and more often than not it is the broken one.

What works is wording that calls things by their names: what you do, for whom, with what result. "Fitted kitchens built to your measurements" is clearer than "A space where comfort is born".

What breaks a headline:

Metaphors and abstractions. "Your reliable partner", "a territory of beauty", "we create the future" - none of this communicates anything.

Talking about yourself. "We work with heart" instead of what the person gets.

Industry jargon the client never uses when searching.

A phrase that is too long. If a headline cannot be read in one glance, it is not a headline.

The test is simple: cover the logo and read the headline. If it does not tell you what the company does, it needs rewriting.

What should the button look like?

One main button, and it has to look like a button - contrasting, large, with space around it.

The text on it names an action, not an abstraction. "Calculate the cost", "Book a measurement", "See the catalog" work better than "Learn more" and "Submit".

A second button is acceptable if it is weaker in styling and leads somewhere else: the main one to an enquiry, the extra one to the catalog or to case studies. Two equally bright buttons side by side are not a choice, they are a hesitation.

What should not be there: a button that leads nowhere. If the action needs explaining, the button should lead to that explanation rather than open a form on the spot.

Do you need an image, and what kind?

You do, but it has to work rather than fill space.

A good image shows the subject at hand: the product itself, the result of the work, the premises, the process. For services that is often a photo of the site or the team, for goods it is the product in a real setting.

A bad image is stock people in an office, handshakes, abstract gradients and anything that could sit on any site in any industry. If the picture can be swapped for somebody else's with nothing lost, it is not needed.

On the overall styling of the hero section and the tone of the site: Dark or Light Website: Which to Choose for Your Business.

What is surplus in the hero section?

The list is short, yet almost everyone breaks it.

A slider with several banners. While the person is reading the first one, the second arrives. Usually nobody reaches the end of the slider.

A menu taking up half the screen. Navigation is needed, but it is not the main element.

Several offers at once - a discount, a new arrival, a service and a newsletter sign-up in one place.

A pop-up over the hero section. The person has not worked out where they landed yet, and is already being asked to subscribe.

A long text. A paragraph in the hero section goes unread.

The general rule: every element you add takes attention away from the main one. If something can be moved further down, it should be moved further down.

How is the hero section different on a phone?

It is smaller, and that changes the priorities.

Less fits on a phone, so the headline and the button are the ones that have to land in the visible part. A large image filling the whole screen pushes the meaning past the edge of what is visible - the person sees a nice photo and not a single word.

You have to check on a real phone, not in a shrunken browser window. And remember that the larger share of visitors arrives from a phone, which makes the mobile hero section the main one.

How do you check your own hero section?

Three ways, all free.

The outsider test. Show the section to somebody unconnected to your business and ask what this company does and what can be done here. If they struggle, the problem is not theirs.

The logo swap test. Mentally put a competitor's logo in your place. If nothing changes, the hero section says nothing specific about you.

The phone test. Open the site on your own phone and see whether the headline and the button are visible without scrolling.

If the site has stopped answering these questions and redoing the hero section no longer helps, you are looking at a bigger job: When Your Website Needs a Redesign.

If you want your hero section looked at - write through the form on the contact page, and I will tell you what is getting in the way.