Signing Off a Design Seen Only as a Flat Image

The picture that gets approved

A designer sends a single image: the new home page as it will look on a wide computer screen. A big photograph, a short headline, three neat boxes for services, a tidy menu.

The owner likes it and says yes. Weeks later the working site arrives, and it looks different.

On a phone the photograph is cropped to a sliver and the headline fills the screen. The real service names wrap onto two lines and push the boxes out of line. The menu needs a second row.

Nobody broke anything. The approval was given for a page that was never going to exist.

What a flat image cannot show

• The phone layout, where many visitors will meet it.
• Real text instead of short placeholder words.
• Long names for services, staff and places.
• Inner pages, where most of the content lives.
• Menus and forms as they behave in use.
• Screen widths between phone and desktop.

The second changes the most. Mockups are filled with tidy dummy text and two-word headings chosen to look good, and real copy is rarely that obliging.

Why designs are shown this way

A flat image is quick to make and easy to discuss. It keeps the conversation on colour, type and mood, which is where most owners want to start.

That is a sensible first step. Trouble starts when it is the only step, and the image is treated as a promise of the finished site.

A responsive site, one that rearranges itself to fit each screen, is really several layouts sharing the same content. Approving one of them leaves the others to chance.

Ask for the phone layout

For many local businesses a large share of visitors arrive on phones. For them the phone layout is not a variation of the design; it is the design.

Ask to see it at the same stage as the desktop version. Look at what fills the first screen, where the phone number is, how the menu opens, and how far someone scrolls to learn what you do.

A photograph that sets the mood on a wide screen can push everything useful out of sight on a phone.

Ask for real content

Give the designer your real headline, your real service names and a real paragraph before the design is approved.

Choose the longest on purpose: the service with the five-word name, the staff member with the double-barrelled surname, the neighbourhood nobody can fit on one line.

If the design holds with those in it, it will hold with anything. If it does not, far better to find out now than after launch.

Ask for the real logo too, at the size it will appear on a phone. A logo that reads well across a wide header can shrink to a smudge.

A worked example

A nanny agency that places full-time, part-time and temporary nannies with families was shown its new home page as a single image, and loved it.

The image had a large photograph of a parent and toddler, the headline Find your nanny, and three boxes labelled Full-time, Part-time and Short-term.

The real services had longer names: live-out full-time placement, after-school and part-time care, newborn care specialists, and emergency and temporary care. In the built site the three boxes became four uneven ones, with names wrapping onto two or three lines.

On a phone the photograph cropped to the toddler's ear. Parents, who mostly looked in the evening on their phones, had to scroll through three screens to reach the phone number.

The designer reworked the phone layout first, with the headline, the number and the four services above the photograph, and shortened the box labels while keeping the full names on the service pages.

Nothing about the colours or the type needed changing. The layout around the real words did.

The agency approved the second version on a phone, with its own words in it.

Ask for an inner page

The home page is one template among several, and often not the one visitors meet first. Searches lead to service pages, articles and the contact page.

Ask to see at least one inner page in the design before approval: a service page with a long block of real text, a list, a photograph and the form.

That is where the type is really tested, where sidebars either help or crowd, and where the design meets the content it will carry for years.

Ask for the contact page as well, with the form, the map and the opening hours, since that is where a visitor decides whether to call.

Use it before you approve it

Where possible, ask for a working draft at a test address rather than a picture, and try it on your own phone.

Open the menu. Tap the phone number. Fill in the form with a long name and a typo. Turn the phone sideways.

If someone in the office has an older phone with a smaller screen, such as an iPhone 5s, try it there too. Not every customer carries a new one.

Ten minutes of that shows more than an afternoon spent studying a picture, and it is the version customers will actually meet.

The counter-case

Early in a project, a flat image is the right tool. Choosing between three directions is easier from pictures than from working pages, and nobody should pay for three working prototypes.

For a very small site, a designer who builds responsively from the start may show working pages almost at once, and the picture stage is short.

Some owners are happy to approve the look and leave the layout to a designer whose judgement they trust, which can work well.

Before the final sign-off, though, ask to see the phone layout, an inner page and your real content in place.

Before you sign off

1. Ask for the phone layout at the same time.
2. Send your real headline and service names.
3. Include the longest names on purpose.
4. Ask to see an inner page with real text.
5. Find the phone number on the phone layout.
6. Try a working draft on your own phone.
7. Approve the version with your content in it.

Step three is the cheapest test there is. A design that survives your longest service name on a phone will survive almost anything else the site has to say.

Finishing every page type before launch is covered in inner pages still in the old design.

Frequently asked questions

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.