Keep the photograph, but not at the message's expense. On every common screen, the first view should say what you do, where, and how to take the next step, with the photograph supporting it.

One photograph, edge to edge

The home page opens on a single photograph that fills the browser window from edge to edge: a finished kitchen, a plated dish, a view across a lake at dusk.

Across it sit a logo, a slogan in thin white letters and a small arrow pointing down. Nothing else.

On the designer's monitor it looked like a magazine cover. On an ordinary laptop, the photograph is all a visitor sees until they scroll.

On a phone it is cropped to a narrow slice. Everything a visitor came to learn, from the service to the area to the next step, sits further down.

What the first screen has to answer

Somebody arriving from a search, an ad or your listing decides quickly whether they have come to the right place. The first screen has to give them enough to decide.

The fourth is the one a full-width photograph pushes out most often. A slogan can be laid across a picture without spoiling it, but a button and a phone number rarely survive the design stage.

How the photograph got so big

Many recent themes offer a hero section, the large area at the top of a home page, set to fill the full height of whatever screen opens it.

In the design presentation the photograph is the star. The words go on last, small and pale, so they do not compete with it.

A full-screen photograph is also easy to approve. There is nothing in it to disagree with.

What a photograph cannot say

A good photograph says a great deal about quality, style and care. It cannot say what you charge, which towns you cover, or whether you have time for a job this month.

Visitors read the picture for clues anyway. A finished kitchen could belong to a designer, a contractor, a cabinet shop or a showroom, and each visitor guesses.

A wrong guess costs the enquiry quietly. Nobody phones to say they assumed you only did large jobs.

Words laid over the picture

When the message does sit on the photograph, it competes with the picture to be read. Thin white type that is clear over a dark corner disappears over a bright window or a sky.

The accessibility guidelines most rules refer to set a minimum contrast between text and its background. Over a photograph, the background changes from one letter to the next.

A dark band behind the words helps. A solid panel beside the photograph helps more, and lets both be seen properly.

The crop on a phone

A photograph wide enough to fill a laptop is the wrong shape for a phone held upright. The usual setting fills the space by trimming the sides and keeping the centre.

If the subject is off centre, it goes. A finished deck becomes a strip of railing, and a team photograph loses the people at each end.

Phones can be given their own crop, or a different photograph chosen for a tall, narrow screen. It is a small job during a build, and rarely done unless somebody asks.

A worked example

A bridal shop in a town on Vancouver Island had a home page led by a photograph filling the screen: a model in a lace gown, the shop's name in script, and the words Your story begins here.

On a laptop, that was the whole first screen. On a phone, the crop kept the middle of the gown and lost both her face and the hem.

The facts sat further down: gowns from a dozen designers, fittings by appointment only, a wide range of sizes, a guide to prices, and the address.

Brides-to-be phoned to ask whether they needed an appointment and whether the shop carried their size. The site answered both, for anybody who scrolled.

The redesign kept the photograph at about half the screen's height. Beside it on wider screens sit a plain headline, naming wedding gowns by appointment and the town, and a button to book a fitting.

Phones got a tall crop that shows the whole gown, beneath the headline and the button. The slogan moved to the about page.

Shorter, beside or below

There are three dependable ways to keep a photograph without losing the message.

Make it shorter: around half the height of the screen, with the headline and the next step beneath it, both visible on an ordinary laptop.

Put it beside the words: the photograph on one side, the message and a button on the other. That suits wide screens and stacks neatly on phones.

Or put the words first on phones: headline, next step, then the photograph, which still arrives within a flick of the thumb.

Checking the first screen

The test takes ten minutes. Open the home page on an ordinary laptop, not the largest monitor in the office, and on a phone held upright.

Take a screenshot of each first screen before scrolling, and show them to somebody who does not know the business. Ask what you do, where, and what they would tap.

If they cannot answer all three, the photograph is doing the message's job, and doing it badly.

The counter-case

For some businesses, the photograph genuinely is most of the message.

A restaurant's dining room, a cabin's view or an artist's work can lead the page, provided one line says what and where and the next step is in view.

A site whose visitors mostly know the business already loses less to a vague first screen, though new visitors still need it.

Keep the photograph, but give the message and the next step the first screen on every device.

The first-screen check

  1. Open the home page on an ordinary laptop.
  2. Screenshot the first screen on a phone too.
  3. Ask a stranger what the business does.
  4. Put the headline and next step on the first screen.
  5. Shorten the photograph or set it beside the words.
  6. Give phones their own crop of the picture.
  7. Move the slogan below the plain statement.

Step four is the change the others serve. A headline and a next step on the first screen are what tell a visitor they have arrived.

What a visitor should find at the other end of the page is covered in pages that end without a next step.

Frequently asked questions

Why is a full-screen photograph a problem?

On an ordinary laptop or a phone it can fill the whole first view, leaving visitors with no idea what the business does, where it works, or how to start.

Should I remove the hero photograph?

No. Keep it, but make it shorter, set it beside the message, or place it below the headline on phones, so the message and next step are visible first.

What should the first screen say?

What you do, in customers' words, where you do it, who it is for if that is unclear, and what to do next, with a way to reach you.

Why is text over photographs hard to read?

The background changes from one letter to the next, so thin type that reads well over a dark area disappears over a bright one. A solid panel fixes it.

Why does the photograph look wrong on phones?

A wide photograph is trimmed at the sides to fill a tall, narrow screen. Phones can be given their own crop, or a photograph chosen for that shape.

How do I test my first screen?

Screenshot the first view on an ordinary laptop and a phone, show them to someone outside the business, and ask what you do, where, and what they would tap.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Home page that opens on a photograph?

Share the link to your home page. We will screenshot its first screen on a laptop and a phone, and say what belongs there.

Start a Conversation