Making a Phone Number clickable for iPhone Users

Are you wondering how to markup a phone number on a website so the iPhone (and maybe other mobiles) can parse the number and make it „clickable“ for the user? The good news is, it is pretty simple as the iPhone’s browser does a good job but on the other hand you have to mind some things otherwise the device can’t detect the number.

Why should i mind making a number clickable?

The answer is easy: Usability! Especially if you are working on a online shop or selling page you want to provide the users / customers the best user expierence possible. One important rule in good user expierence (= usability) is to answer questions which might raise by viewing your website and the best way to do this by direct contact.

Auto Detection of Phone Numbers

As mentioned above, the iPhone does a good job in automatically parsing phone numbers. Here are some formats of a german cell phone number, which the iPhone recognizes without any further markup – please note the different seperators which divide the (country-) prefix from the number.

Number Formats which get auto-detected

The Screenshot shows the iPhone display of the tested number formats.

• 0176-40206387
• 0176-402063-87
• 0176.40206387
• 0176.402063 87
• 0176.402063-87
• 0176-402063.87
• 0176 402063.87
• 0176/40206387
• 0176/402063-87
• 0176 402063 87
• 0049176/40206387
• 0049-176/40206387
• +49 176 40206387
• +49-176/40206387
• +4917640206387

What do we learn from this? The iPhone recognizes 1-Char delimiters like „.“, „/“, „-“ or „Space“ without a flaw. It can also handle Country prefixes (+49 or 0049) if at least the number contains a delimiter („0049176/40206387″) or the Country prefix is indicated by a leading „+“ („+4917640206387“). The common format of two leading zeros isn’t correctly parsed, when the number doesn’t contain a delimiter! (See below)

Number formats which fail to auto-detect

• 017640206387
• 004917640206387
• 0176 – 40206387
• 0176 / 40206387
• +49 (0)176 / 40206387
• 0049 (0)176 40206387
• 0049 (0)176/40206387

Did you note? The iPhone fails to detect a number which is written without any seperator (of prefix and number), in this case „017640206387“. So watch out to put a 1-Char delimiter in your phone numbers. The emphasis is on 1-Char, as more chars will break the auto-detection! You can see this with the for example in this number format: „0176 / 40206387“, which is pretty common here in Germany. Its a 3-Char delimiter: A Slash with a leading Space and a following Space. So you better keep in mind to just use one Character as a seperator.

Number formats which are wrongly parsed

• +49 (0)17640206387
• +49 (0)176-40206387
• +49 (0)176-402063-87
• +49 (0)176/40206387
• +49 (0)176.40206387
• +49.(0)176-40206387

Here we see a bunch of number formats which are widely used in Germany and which show the Country Prefix („+49“) followed by the carriers prefix („0176“). If someone outside Germany dials this number, the leading zero of the carriers prefix gets droped, so the caller dials („0049 176 40206387“), of course same applies to other country prefixes like the „+1“ for the USA. But if someone within Germany dials this number, he doesn’t need to dial the country prefix but has to mind the leading zero – so he dials „0176 40206387“.

So what’s going wrong here? The iPhone parses the number, but does not drop the leading zero. So if the user clicks a number of this format, the iPhone dials „+49 0176 40206387″ which will end in an „Unknown Number„-Error Message.

This bug is quite bad, as this format is widely used in the business world, as it indicates all possible prefixes and is also very readable to humans. But have no fear there is a way out!

Manual Markup to the rescue!

If you want to use a number format which isn’t supported by the iPhone or which is not correctly parsed you can fix this by a HTML link:
[sourcecode lang=“html“]
+49 (0)176 – 402 063 87
[/sourcecode]
Most important is the „tel:“ in the HREF attribute. If you use this so called telephone link on your website, the phone number gets clickable for iPhone Users (and probably other mobile devices). With help of the telephone link you can also make number more readable to humans, like in my example where i’ve added a 3-Char delimiter and a couple of spaces. The only disadvantage of the telephone link is that it will display the phone number as link on ordinary desktop browsers, too. And those don’t know what to do with this kind of link and so they point to nowhere.

By the way: You can also use the telephone link in your E-Mail Signature so if a iPhone user gets a mail from you, he can call back with a single click.