The Amazing Disappearing & Reappearing Website Phone Numbers!

I was contacted this week by one of my clients, Jan Southern, with a strange problem.

She’d just updated her site and added large hero images to some pages. Some white text was overlaid on the images, including her phone number.

The issue was that the phone number didn’t show up properly on iPad and iPhone.

Instead of the text showing as white, it was turning blue, which didn’t contrast well with the background images.

The phone number in the footer was a dark grey colour. Which was unfortunate, as the footer was dark blue!

Blue phone numbers on iOS

I started investigating.

I don’t have an iPhone, so couldn’t test on that.

I tried with Chrome browser my Android phone – the phone number looked a little bunched up, but the proper colour. (The Changing Migraine text was changed later.)

On my iPad, there was no issue with the phone number on Chrome. I was puzzled.

I then tried Safari on iPad, and could see the problem.

It turned out that the trouble was to do specifically with Safari on iOS.

I could also replicate it on Safari on my Mac.

How Safari handles website phone numbers

Unlike other browsers, Safari on mobile devices will recognise phone numbers and turn them into clickable links – even if they are plain text.

If you click on a phone number in Safari on iPhone or iPad, you will get a prompt to make a call, or cancel.

How are phone numbers marked up in HTML?

For other browsers, phone numbers won’t be clickable unless you tell the browser it’s a phone number through the code.

As you can make an email address a clickable link by using mailto: you can do the same with tel: for a telephone number.

On Jan’s site, I chose to format the instance of the phone number in the footer to as a telephone link.

This means that if you’re on a mobile phone, visit the site and click the link, the number will come up ready to call.

The format is

<a href="tel:+447554070770">0755 407 0770</a>

The first number (within the href attribute) is the number that will be dialled. i.e. +447554070770.

The second is the number that’s displayed on the page i.e. 0755 407 0770.

I could have made them both the same, but chose to keep the visible display text of the phone number in UK format.

The number to be dialled starts with the +44 prefix for the UK, so that anyone abroad could dial her. (Remember, all websites are global!)

When you add the tel: part, you need to:

• put a + symbol in at the beginning
• add the country code – 44 in the case of the UK.
• remove any zeroes at the beginning of the number.

(I just realised that I’d marked up my own phone number incorrectly on my contact page, and have just fixed it!)

Read this article from CSS-Tricks if you want to know more about how browsers and devices handle phone links.

One thing to note is that this markup works across all devices.

So if you’re on a desktop and click the link, it might do nothing, or you might get a prompt to call the number. It all depends on what software you have set up to handle phone calls – if any.

Skype Click to Call is one service to dial from desktop. It needs to be enabled for your particular browser.

Just to confuse things further, Skype has its own formatting for phone numbers too, in a light blue with the Skype symbol beforehand!

Here’s a suggestion to turn off Skype’s phone number styling.

The fix for the blue phone numbers on iOS

The fix was pretty simple, and I was pointed towards a relevant thread on Stack Overflow by my client.

The code required was this:

a[href^="tel"]{
color:inherit;
text-decoration:none;
}

This instructs the browser to format any phone number links with the relevant colour from the website’s stylesheet, and not to underline them (which seems to be a problem for some people too)

This worked for the hero image area, even though I didn’t change the markup for the phone numbers there. They’re still (at the time of writing) plain text.

I still had an issue with the footer phone number. It was still grey.

Inspecting the code with Safari showed it was inheriting the widget style, and not the new style.

The solution was to clear the website and browser cache to apply the changes.

Ta-da, it worked!

I was even able to test on iPhone, thanks to a BrowserStack free trial. This lets you test websites on real devices.

Other blue link problems in iOS

iOS doesn’t just style phone numbers as blue – it can also change dates and addresses.

Emails shown on iPhone can be an issue. Often they contain addresses for compliance reasons, and they can be styled in this undesirable way.

If this is a problem for you, read this guide from Litmus: Removing blue links on iOS devices.

Let me know if you’ve ever encountered this iOS styling problem and if you found this article helpful in the comments.

Category: Websites