A Salon Site Built Entirely in Images

What the site looks like

Genuinely attractive. A designer laid it out carefully, the typography is considered, and it looks better than most salon sites.

Every element on it is an image file.

The service menu with prices is one large graphic. The opening hours are another. The address and phone number are inside a designed footer image.

To a human eye it works perfectly well. To anything else reading the page, it is close to empty.

What is lost

• Search. Nothing on the page can be indexed, so the site ranks for almost nothing.
• Selection. Nobody can copy the address or the number.
• Tapping. A phone number in an image is not dialable.
• Screen readers. Anybody using one gets nothing.
• Translation. Browser translation cannot touch it.
• Zoom. Enlarging an image blurs it; enlarging text reflows it.

The first is what the owner notices eventually, usually as a mystery about why the site never appears in searches.

The fourth is the one that matters most and gets noticed least, because the people affected simply leave.

The price list specifically

The single most damaging instance.

Somebody searching for a specific treatment with a price, in a town, is doing exactly the search a salon wants to appear in.

A price list rendered as a graphic cannot match that search at all, regardless of what it contains.

It is also the page most likely to be out of date, because updating a graphic requires whoever made it, which means prices change and the image does not.

A text price list is editable in two minutes by anybody in the salon, which is why it stays current.

A worked example

A salon whose site had been built by a designer three years earlier and had never appeared in local search results.

The owner assumed the problem was competition.

Rebuilding the same design with real text, keeping the layout and typography almost identical, took about a day.

Within a few months the site was appearing for treatment-and-town searches it had never ranked for, because for the first time there were words on it.

Bookings from search rose from almost none to a steady trickle.

The visual design was essentially unchanged, which is the part worth emphasising: nothing about the appearance required the text to be images.

Why it happens

Not carelessness, usually. Two ordinary causes.

A designer works in a graphics tool, produces a beautiful layout, and exports it, because that is faster than rebuilding it in a browser.

Or the desired typography is not available as a web font, so the only way to achieve the look is an image.

Both are understandable and both trade something invisible for something visible, which is a bad trade nobody is present to argue against.

Custom typography can now be loaded as a real font in almost every case, which removes the second reason entirely.

The counter-case

Where an image containing text is fine.

A logo, which is a graphic that happens to contain letters and which needs alt text saying the business name.

A photograph that incidentally contains text, such as a shop sign in the background.

Decorative typography used as an illustration, where the words also appear as text nearby.

And a scanned document offered as a download alongside a text version, where the image is a copy rather than the only form.

The rule is simply whether the information exists anywhere else on the page as text. If it does not, then it must.

The cost of fixing it later

Worth noting because it grows.

A site built this way accumulates pages, and each one is another graphic that will eventually need rebuilding.

It also means every price change requires whoever owns the design files, which is a dependency on one person or one supplier.

Businesses in this position frequently discover the designer has moved on, the source files are gone, and the only way to change a price is to rebuild the graphic from scratch.

Which is how a salon ends up displaying 2017 prices in 2020: not through neglect, but because changing them was never a two-minute job.

The booking button

A second problem on the same site, related to the first.

The booking button is an image linked to a third-party system.

Which means it cannot be read aloud, does not respond to keyboard navigation, and gives no indication of where it goes until somebody taps it.

A real button with real text costs nothing, works everywhere, and can say what it does: book online, or check availability.

For a salon, that button is the most important element on the site, which makes it the worst possible thing to render as a picture.

Checking your own site

1. Try to select the text with your cursor. If you cannot, it is an image.
2. Search your own site for a phrase you know is on it.
3. Try to tap the phone number.
4. Zoom in and see whether it blurs or reflows.
5. Look at what a search engine sees using a text-only view.

The first takes about ten seconds and answers the question for most of the page immediately.

What the salon actually needed on the page

Worth stating, since the fix is not only technical.

Treatments named as people search for them, which is frequently different from the salon's internal terminology.

Prices, and how long each treatment takes, since customers are booking around a working day.

Which stylists do what, and how to request one, because a returning customer wants the same person.

And the practical details: parking, whether there is a wait for walk-ins, and what happens if somebody is late.

None of that could exist on the previous version, because there was nowhere to put words. Converting to text created room for content the site had never had.

What to fix first

In order of what it costs you.

The price list, because that is the searchable content and the thing that goes stale.

The address and phone number, so they can be tapped and copied.

The hours, so they can be read and indexed.

Then everything else, gradually, keeping the design intact, because none of this requires the site to look different.

Doing it in that order means the most valuable content is fixed within a day, and the rest can follow as time allows rather than waiting for a full rebuild.

How to handle the images that remain is covered in describing an image for somebody who cannot see it.

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.