29

In code, you have the ability to make a phone number on a website into a link by prepending the phone number in the href with a "tel:"

So, for example, you can create a link to 800-867-5309 with the following:

<a href="tel:+18008675309">800-867-5309</a>

Some phones will automatically turn any properly formatted phone number into a link that, when clicked, will prompt you to see if you'd like to dial said number (iPhones for example).

Does it make sense to do add these links manually so the phone numbers show up linked on desktops?

On a desktop computer, when you click on one of these links, the computer will try to open some sort of default communication program.

If you have not set a default communication program, this might be a little jarring as it might open a completely unfamiliar program, which I would think falls under the "unexpected results" realm.

Is there any best practice for this sort of thing?

Should phone number links, perhaps, be formatted differently than other links?

2
  • 3
    Sans testing, I suspect the answer is: No. Not yet. Too few users have VOIP enabled software to make this a change that will help more users than it confuses. However, if there is a markup that tags a number as a phone number (but does not change the behavior) that's good... a telephony plugin can change that number into a link. Commented May 8, 2012 at 21:30
  • How do I make the phone number untraceable by bots? Thanks
    – user89429
    Commented Aug 8, 2016 at 16:54

4 Answers 4

12

I suggest using microformats instead of "tel:" in your markup, and let the browser handle it.

Power users can install a plugin or user script if their browser does not natively turn phone numbers to links to re-format the microdata or show new items in the context menu to handle that data (E.g.: "import into address book," "call directly" and so on).

3
  • 2
    And why do you think this is better?
    – DanMan
    Commented Jan 22, 2014 at 11:30
  • 1
    Because tel: does not work in every browser on every platform. Microformats offer more flexibility in this case.
    – Michael
    Commented Jan 22, 2014 at 15:54
  • hCard 1.0 Microformats wiki
    – thdoan
    Commented Nov 12, 2016 at 10:33
5

As you've identified, if you're on device that can make phone calls this is ideal, but for a web site being browsed on a desktop or laptop I'd say no.

As you say if the user doesn't have a program installed that can handle the link then this is bad UX as it will try and fail.

Skype has click to call which, when installed will change anything it thinks is a phone number (via pattern matching) into this format for you. It's not fool proof however, as this question on Meta Stack Overflow testifies:

Skype plugin converts user reputation and badges to a phone number

If applications like Skype become ubiquitous then this would become a good idea, as you would be in control of the formatting and would get it right all of the time.

2
  • The Google Voice extension for Chrome does the same thing too. It's quite a handy feature at times. Commented May 9, 2012 at 16:05
  • @AndrewShipe - yes it can be useful - but it's not foolproof.
    – ChrisF
    Commented May 9, 2012 at 19:51
4

At this point in time, nearly all the devices that can handle tel: will automatically turn phone numbers into tel: hyperlinks. Devices that can't will generate error messages, which users don't like. So I would only use manual tel: links when their usefulness would outweigh the risk of an error message or unexpected result. Since there are relatively few devices that support tel: and don't make them automatically, you currently shouldn't use them.

2
  • Really good point. There's hardly a need to create separate stylesheets for different devices for the purpose of creating phone number links, since most mobile devices convert numbers to links natively.
    – Tim
    Commented May 9, 2012 at 15:55
  • I tend to think that the auto-conversion happened because authors didn't bother to add the links themselves. So not doing it now kind of defeats the purpose.
    – DanMan
    Commented Jan 22, 2014 at 11:33
1

A possibly would be to use css media attributes to recognize the device that the user is browsing with, and if it's mobile you could display the phone numbers as links. Otherwise, just display them normally.

1
  • 4
    Unfortunately detecting a mobile device doesn't mean the device can actually make phone calls! Commented May 11, 2012 at 4:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.