![\"iPhone:](\"http:\/\/hjacob.com\/blog\/wp-content\/uploads\/2009\/07\/IMG_0450-200x300.PNG\" "\\"iPhone:")
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.<\/p>\n
<\/p>\n
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.<\/p>\n
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.<\/p>\n
![\"The](\"http:\/\/hjacob.com\/blog\/wp-content\/uploads\/2009\/07\/IMG_0453.PNG\" "\\"iPhone")
The Screenshot shows the iPhone display of the tested number formats.<\/p><\/div>\n
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\/<\/b>40206387″) or the Country prefix is indicated by a leading „+“ („+4917640206387“). The common format of two leading zeros isn’t correctly parsed<\/b>, when the number doesn’t contain a delimiter! (See below)<\/p>\n Did you note? The iPhone fails to detect a number which is written without any seperator<\/b> (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<\/em> with a leading Space<\/em> and a following Space<\/em>. So you better keep in mind to just use one Character as a seperator<\/strong>.<\/p>\n 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“. <\/p>\n So what’s going wrong here? The iPhone parses the number, but does not drop the leading zero<\/b>. So if the user clicks a number of this format, the iPhone dials „+49 0<\/b>176 40206387″ which will end in an „Unknown Number<\/em>„-Error Message.<\/p>\n This bug is quite bad, as this format is widely used in the business world<\/b>, as it indicates all possible prefixes and is also very readable to humans. But have no fear there is a way out!<\/p>\nNumber formats which fail to auto-detect<\/h3>\n
\n
Number formats which are wrongly parsed<\/h3>\n
\n
Manual Markup to the rescue!<\/h2>\n