Numbers an iPhone Turns Into Phone Links

Part numbers that offer to dial

A manufacturer of replacement parts lists its products with long part numbers and the years of the machines each part fits. On an iPhone, many of those numbers show up blue.

Tap one and the phone offers to call it. A range of model years, written with a hyphen between them, does the same.

Meanwhile the company's real phone number, set in pale type in a dark header, has turned bright blue and clashes with everything around it.

Safari guesses

Safari on the iPhone scans the text of each page for anything that looks like a phone number and turns it into a link that offers to dial.

It cannot know what the digits mean. A part number, or two years joined by a hyphen, can have the same shape as a local number.

It does this on every page, whether or not anyone who built the site has looked at it on an iPhone.

The links it makes take a link colour rather than the colour the designer chose for that spot, which is why the header number changes too.

What the guessing catches

On a typical business site, the guessing picks up:

• Part and model numbers long enough to look like a local number.
• Ranges of years joined by a hyphen.
• Order and invoice numbers on confirmation pages.
• Serial and registration numbers in listings.
• The real phone number, restyled in the browser's colours.

Each wrong link is a small trap. A visitor scrolling with a thumb taps one by accident, and the phone asks whether to call a part number.

Mark up the real number

Every real phone number on the site should be a proper link written into the page, beginning with tel: and the full number, including the 1 that Canada and the United States share.

A link you write yourself can be styled like anything else on the site: the header number in the header's colours, underlined or not, as the design calls for.

It also works where guessing fails. A number broken across two lines, or spelled partly in letters, still dials correctly when the link holds the digits.

Write the number the same way everywhere it appears, with the same spacing, so customers recognise it at a glance.

Switch the guessing off

Once the real numbers are proper links, add one line to the head of every page: the format-detection setting, with telephone detection turned off.

Safari then leaves all other digits alone. Part numbers stay part numbers, years stay years, and only the links you wrote offer to call.

Do it in that order. Turning detection off before the real numbers are marked up leaves visitors with a phone number they cannot tap.

Numbers inside images

A phone number that is part of a header image or a banner is neither guessed nor tappable. It is a picture of a number.

The same goes for a number shown in a logo or in a photograph of the shop's sign.

Put the number in text, styled to look the way the image did, and make it a link. It then scales with the screen and can be read by search engines and screen readers.

A worked example

A sheep farm on Vancouver Island sells registered breeding stock, fleeces and yarn, with a page for each ram and ewe for sale.

Each listing gives the animal's registration number and ear tag number, and the farm's history page lists, as ranges, the years it has shown at fairs.

On an iPhone, registration numbers and year ranges turned blue, and a buyer tapping through the listings kept getting offers to call a registration number.

The farm's own number, in cream type on a dark green header, became blue and underlined, and was hard to read.

The developer made the header number and the one on the contact page into phone links styled in the header's cream, then added the setting that turns detection off.

Registration numbers and fair years now read as plain text, and the one number meant for calling is the only one that offers to.

On computers and other phones

On a computer, a phone link may open a calling program or do nothing. The number is still readable, so nothing is lost.

Keep phone links looking like numbers rather than buttons, so that on a computer they read as information, not as something broken.

Other phones and tablets treat numbers in their own ways. Test the finished pages on an iPhone, an Android phone and an iPad, and tap every number you meant as a link.

Check order and confirmation emails too. Mail programs on phones look for numbers in their own way, and the website's setting does not reach them.

Keeping the design in charge

Write link styles for each place a number appears: header, footer, contact page and body text. A number Safari detected follows none of those plans.

Make the header number large enough to tap with a thumb, with space around it. On a phone, that one link may be the reason for the visit.

Give phone links the same look on every page, so visitors learn what a tappable number looks like on your site.

The counter-case

Some sites give Safari nothing to misread: a single phone number and no other long strings of digits. There, the guessing turns that one number into a link at no cost.

Yet the borrowed colour may clash with the design, and a number Safari misses, split across lines or written oddly, is not tappable at all.

Writing the link deliberately takes a few minutes in the template and puts the design, not the browser, in charge of how the number looks and works.

Fixing the numbers on a phone

1. Open the site on an iPhone.
2. Note every number that turns blue.
3. Mark up real numbers as phone links.
4. Style each link to suit its place.
5. Add the setting that turns detection off.
6. Replace numbers in images with text.
7. Tap every link on two kinds of phone.

Step three has to come before step five. Turning detection off first leaves the real number as plain text, and visitors who expected to tap it simply cannot.

What else changes for a site seen on the larger iPhones that went on sale last month is covered in bigger iPhones arrive today.

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.