CSS styling for phone numbers on iPhone and iPad

By Geoff Muskett

iPhones, iPads, and other mobile devices automatically detect phone numbers and add the tap-to-call functionality. It’s a great feature for user experience, but the systems add their own styling to the numbers, i.e. usually they are blue and underlined. This makes sense as a default, it’s the traditional link styling, and what Google still uses in it’s SERP pages.

However, a blue underline may not match the design of the rest of the page. Or worse, may be illegible on similarly coloured backgrounds.

Styling the phone number

We want the numbers to look like a link so mobile users are more inclined to tap it and make that call. So it’s a good idea to keep the underline, or maybe make it even more obvious as a call-to-action button.

Add an anchor tag

The best way to do this is to wrap the number in an anchor tag with the href as tel:thenumber. A bit like a mailto email link, like this:

<a class="tel" tabIndex="-1" href="tel:01872 272894">01872 272894</a>

Note the tabIndex, more on this later in the article. Adding a class gives us a hook, if needed, to add CSS:

.tel,.tel:visited { /*for small screens */
display:block;
color:#fff;
background-color:#000;
padding:1em;
text-decoration:none;
}
.tel:hover,.tel:focus {
color:#000;
background-color:#fff;
}
@media screen and (min-width: 28.5em) { /* for larger screens */
.tel,.tel:visited {
background:none;
cursor:default;
}
.tel,.tel:focus {
color:#000;
}
}

The above will make a simple looking button on small screens, and just text on larger screens. The curser state is defined as default, which is the regular arrow. This is so not to confuse desktopers when they rollover a link that goes no-where.

An unwanted link

The anchor tag is a great solution for small screens, but the tradeoff is that it’s unnecessary and potentially an accessibility issue for larger screens. Although we’ve styled it so it doesn’t look or behave like a link, it’s there in the DOM. Which means it will mess with the tab index a little, i.e. it will take the focus when keyboard users are tabbing through links on the site. Luckily, there’s a solution.

TabIndex-1

This has good browser support, and is a simple way to stop a link receiving the focus. Adding it to the anchor tag for the phone number means keyboard users will be none-the-wiser, and their experience is not effected. Here it is again:

<a tabIndex="-1" href="tel:01872 272894">01872 272894</a>

Embrace the Phone number link on mobiles

It is possible to stop devices recognising numbers altogether with this piece of metadata:

<meta name="format-detection" content="telephone=no">

However, I don’t recommend using it. Most businesses want to be contacted by their customers, using the code above makes it hard for customers to call from their phone. They would have to leave the browser to make the call, remembering the number, or having to write it down. Copy and paste isn’t an option either as pasting into the dial screen doesn’t work on all devices.

Although the iPhone’s does a good job of recognising phone numbers, adding the <a> with href of the number eliminates any possibility of the device not recognising it. After-all the device is looking for patterns in the numbers, i.e. a certain amount of numbers followed by a space, followed by some more numbers. If the phone number, or the way it’s entered on the site, doesn’t match a pattern it could be missed.

Manually telling iPhones, iPads and other devices to engage phone number recognition, and styling it on page, add up to a mini win for user experience and removing barriers between websites and their customers.

Comments

Jake
January 29, 2014

Worked great for me, but isn't this technically a broken link and potentially damage seo?

Geoff Muskett
January 29, 2014

Good question Jake, I'd suggest putting a re="nofollow" attribute in the link. Google should ignore it, hopefully...

Johnny
April 22, 2014

This works visually, but if I'm on a real computer I can click the tel and get a dead link. Any way around this?

Geoff Muskett
September 27, 2014

You could use Modernizr to check for touch, and if there's not then remove the href attr

Oliver
March 30, 2015

Thanks for the information, Geoff. This is great. I had hired a graphic designer to fix some glitches on my website and this is something he couldn't figure out. Anyway, I tried to implement your solution. It worked well on iPhone view, but messed up in normal page view (on the desktop). Please email me if this is something you can do for me and how much you charge. Thank you.

Jon
August 4, 2015

could you not just put .tel{pointer-events: none;} on the media query so there is not interaction on a large screen.

great tutorial :)

Geoff Muskett
August 4, 2015

Hey Jon, yeah, good idea!

Gabriele
August 13, 2015

Interesting article. I'd use "cursor: text" instead of "default" for computers screens, so the phone number can be copy-pasted as with normal text.

Pauline
January 14, 2016

Thanks for this!

baby hazel
December 26, 2016

hm. styling phone number :)

Leave a Reply

Your email address will not be published.

Join my newsletter

If you’re looking for insights into web design and development, and crafting a successful presence online, then you should join the smart folk on on my newsletter. I discuss my thoughts on an issue relating to the web, then provide and teach effective solutions.