Quick Tip: Make Telephone Numbers Do Something

I’m not going to begin this quick tip with the old “these days people view your websites on a multitude of devices” spiel, but it is true. Many mobile devices will do a good job of recognizing phone numbers in your HTML, making them clickable so you can directly call that number – but not always.

What happens if a user’s mobile doesn’t recognize a telephone number as being “callable”? Perhaps, for example, the way you’ve entered the number isn’t recognized by the platform. Missed opportunity!

(Check out Mark Hammond’s list of patterns which are recognized for iOS and Android..)

Make That Number Clickable

This one’s dead easy: wrap your phone numbers in anchors, but instead of using the http* protocol (or whatever else you’d normally stick in an anchor) use tel: or tel://. This way, even if you’ve used an unrecognized pattern, the device will still know what to do:

<a href="tel:+4411122233344">+44 (0)111 - 222 333 44</a>

Non-supporting browsers (your desktop, for example) don’t know what to do with the tel: protocol yet – unless the user has some kind of extension enabled which allows Skype to recognize telephone numbers. Google Chrome will happily ignore the click, but at the moment other major browsers start to cry. Other non-phone devices (such as the iPad) will recognize the number, prompting the user to add a contact to their address book – this would be a sensible approach for desktop browsers too.

Styling Phone Links

As an optional extra, let’s make it even clearer to the user that they’re looking at a phone link by styling each one. We’ll use an attribute value selector for this, targeting only the :before pseudo element of links which contain the string tel: within their href attribute:

a[href^="tel:"]:before {
	content: "\260E";
	display: block;
	margin-right: 0.5em;
}

The little carat there ^ denotes that it’s looking for any elements whose href attributes begin with the string we specify. tel: and tel:// will therefore both be covered here. We’ve slotted in a little unicode telephone \260E;, so we needn’t even use a webfont icon. Nice.

Nice hue eh? color: tomato believe it or not..

We’re all done here, in the name of accessibility give it a try!

Further Reading

• Mobile Web Quick Tip: Phone Number Links on Mobiletuts+
• The 30 CSS Selectors you Must Memorize on Nettuts+