A Phone Number Nobody Can Tap

Read it, remember it, type it

A visitor on a phone has decided to call. The number is right there on the screen, and tapping it does nothing.

So they read it, hold ten digits in their head, switch to the dialler and type them in, hoping they remembered the middle four correctly.

Some get it right. Some dial a wrong number. Some decide to call later, or call the next business in the search results, where the number worked.

The visitor was holding a phone. The one thing a phone does best is the one thing the page made difficult.

The ways a number stops working

• Set as an image, often part of the logo or a banner.
• Typed as plain text, with no link around it.
• Split by styling, the area code in a different colour.
• Letters in place of digits, a capital O for a zero.
• Only in the footer, below everything else on a long page.
• Right on screen, wrong in the link, still dialling an old number.

The last is the one nobody notices. When a number changes, somebody edits the text people see and leaves the link behind it untouched, so every tap rings the old line.

Why the phone does not fix it for you

Some phone browsers try to spot numbers on a page and turn them into links on their own. Many do not, and none can be relied on.

Themes can also switch the detection off. Some include a line of code telling iPhones not to link numbers automatically, to stop prices and order numbers turning into links.

On those sites, a number typed as plain text is just text. It looks as though it should work, and the visitor's thumb finds out that it does not.

A number inside an image never works anywhere, and a screen reader cannot read it either.

Writing the link properly

A tappable number is an ordinary link whose address starts with tel: instead of https:. Tapping it opens the phone's dialler with the number already filled in.

Write the link in full international form, with a plus sign, the country code and no spaces: tel:+16045550123. It then works from any phone, including one from another country.

The visible text can stay the way customers say it, such as 604-555-0123. Only the link needs the strict form.

An extension can be added to the link after a pause, which some phones dial. Write it beside the number as well, because not all of them do.

A vanity number spelled in letters needs digits in the link. Show the word if customers know it, with the digits beside it for anyone who does not.

On every page, at the top

Visitors from search arrive on whatever page answered their question, not the home page. A number that appears only on the contact page is missing from most first impressions.

On phones, the header is the place: the number as a link, or a call button, visible before any scrolling and outside the menu.

Keep the number in the footer as well, with the address and hours. Somebody who has read to the bottom of a page is often ready to call.

A worked example

An appliance repair business with two vans takes most of its work by phone, often from people standing next to a fridge that has stopped or a washer full of water.

Its site showed the number in the header as part of the logo image, and in the footer as plain text. The theme told iPhones not to detect numbers, so neither could be tapped.

The office regularly heard from callers that the number had been awkward to dial from the website. One customer had phoned another company by mistake, after misremembering two digits.

The number was separated from the logo and set in the header as text, with a tel: link in international form, and a call button appeared on phones.

Every other mention became a link too, and the owner tested each one on an iPhone and on a technician's Android phone before calling the job done.

Say when somebody will answer

A tappable number invites a call at any hour. Put the hours the phone is answered beside it, so a caller at nine at night knows whether to expect a person.

If calls go to voicemail out of hours, say when messages are returned. If there is an emergency line, say what counts as an emergency.

Offer texting only if the number can actually receive texts. Many business landlines cannot, and a text sent to one may never be seen.

On a computer

On a desktop, a tel: link offers to call through whatever calling app the computer has, or does nothing useful at all.

That is no reason to remove the link. Keep the number readable as text, large enough to see and copy, so desktop visitors can dial it from their own phone.

One number everywhere

The number on the site should match the one on your Google listing, your Facebook page and your vans. Customers who see two numbers wonder which one is current.

Call tracking services swap the number shown to different visitors. Check that the link changes along with the visible digits, since some setups update one and not the other.

And once the link works, taps on it can be counted in Analytics as an event, which is a small job to add.

The counter-case

Not every business wants calls from its website.

A store that sells online, or a practice that books every appointment through a system, may reasonably lead with the booking button and keep the number less prominent.

Even then, existing customers look for the number when something has gone wrong, and it should be easy to find and tap on the contact page at least.

For any business that takes work by phone, the rule is simple: the number as a working link, at the top of every page.

The check

Do this on two real phones, not on a desktop browser made narrow.

1. Tap the number on your home page.
2. Try it from three inner pages as well.
3. Replace any image of the number with text.
4. Check every link dials the current number.
5. Use the international form in the link.
6. Put the answering hours beside it.
7. Test on an iPhone and an Android phone.

Step four catches the fault nobody sees. A link still dialling last year's number looks perfect on the screen, and only a tap reveals it.

The same care at the end of a form is covered in the button that says submit.

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.