Making a Phone Number clickable for iPhone Users

Share

26. July, 2009 · 13 Kommentare

iPhone: A phone Number on a website is clickedAre 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.

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:

<a href="tel:+4917640206387">+49 (0)176 - 402 063 87</a>

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.

Ihren XING-Kontakten zeigen Artikel bei Xing veröffentlichen
Kategorie:English · Tipps · Tutorial · Webdev
Tags: · ·

Vorheriger Eintrag: Nächster Eintrag:

  • http://www.shift4.com Steve

    I’m having the opposite problem — the iPhone is too aggressive in it’s phone number parsing. Is there a way to disable the parsing?

    I have a copyright notice “Copyright (c) 2000-2009″ where the years are being hyperlinked to a phone number. I also display IP addresses that are also getting parsed as phone numbers. Is there anyway to stop this behavior?

  • Tom

    I've exactly the same problem. Did you came across a solution?

  • http://hjacob.com/blog/ Hendrik

    Regarding the copyright notice, a whitespace before and after the dash (“(c) 2000 – 2009″) should do it.

    And you might add the protocol infront of the IP address (like “http://127.0.0.1″) – though it might be unpracticable in some cases.

    Generally i wouldn't recommend to add code just to deactivate a certain behaviour on some device. It's actually Apple's task to identify those IPs correctly – but if everyone starts “bugfixing” this issue, Apple might think that no action has to be taken. Kind of the IE6 scenario … because all webmasters optimized their pages for the IE bugs, microsoft declined any further improvements to the browser for a long time.

  • Bobbert

    Here it is decribed how you can turn off telephone number detection on content side by means of a meta tag:
    http://developer.apple.com/iphone/library/featu

  • http://hjacob.com/blog/ Hendrik

    Thanks Bobbert, that meta tag seems to be a nice solution!

  • cykane

    Thank you so much, was looking exactly for those information. :)

  • Richard

    hello, I was wondering how to attach the phone number to an image so that the user clicks the image and the phone number gets picked up

  • http://www.tep6.dk/behandlinger/tandlaege-akut-tandbehandling.html Akut Tandlæge

    Brilliant info, just what I was looking for. Thx a bunch!

  • http://expertexcelconsultants.com/ Christopher

    Great help, thank you.

    C-

  • Robbie

    This is not a bug. The format +XX (0) XXX XXXX is incorrect and everyone who uses it is wrong.

  • Anonymous
  • TorillaSoop

    This is probably pretty late but you can use the same link format offered in the article above. number

  • Andreas Ostheimer
meet me in the interwebs
Kaffee-Kasse
Flattr ist ein sehr gut gemachter Micropayment Dienst, der es endlich ermöglicht auf faire Weise Geld zu spenden und einzunehmen.