Traditionally, phone numbers have been placed on web pages as a simple string of digits, indistinguishable from any other content. When mobile users visit sites, they have an expectation that phone numbers should be useful, leading to direct contact.
We achieve that with two approaches: adding a link with a
tel protocol, and inserting microdata. There are also a few considerations we must make for desktop applications, most particularly Skype and Internet Explorer.
Linking Phone Numbers For Mobile Devices and Telephony Applications
Much like adding a
mailto: link around eMail addresses on a page, phone numbers are linked with a
<p>To make a booking, call <a href="tel:+13174562564">317-456-2564</a>
iPhones, Androids and other mobile devices will now recognize the phone number; engaging the link will initiate a phone call.
There are a few things to be aware of:
- Remember that all web pages are international; the digits listed after
telshould include the international dialing prefix, making the number useable from any location.
- If the page is viewed in a desktop browser, clicking on the number will bring up an associated telephony application, such as Google Voice or Microsoft Communicator, much as using a
mailto:protocol in a link will bring up an eMail application.
- Visual separators are optional in the specification, with the exception of the
+symbol before the international calling code.
Do not confuse the
tel value with how the number is dialed on a phone: most phone systems will require a
00 before an international code when dialing, but this is not included in the
tel value. For example, to specify a phone number in New Zealand:
<p>Call <a href="tel:+6494452687">445-2663</a> in Auckland to reserve your flight.
It is possible to insert pauses in the phone number, for the purposes of adding an extension:
<p>Call customer service at <a href="tel:+13235798328p22">323-579-8328 ext. 22</a>
p defines a one-second pause;
w means "wait for dial tone")
You can also specify fax numbers in exactly the same way by using the
You may want to enrich your markup by adding microdata, enabling search engines to better understand the fact that the digits on the page are, in fact, a phone number:
<div itemscope itemtype="http://schema.org/LocalBusiness"> <h1 itemprop="name">Beach Bunny Swimwear</h1> Phone: <span itemprop="telephone"><a href="tel:+18506484200"> 850-648-4200</a></span> </div>
Skype does not currently use the
tel protocol, but
callto. Generally speaking I’d stick with using
tel, but if you wanted to support both, (assuming that desktop visitors were using Skype and mobile users their native app), I’d probably use PHP and a script like Mobile Detect to determine if the visitor was using a mobile device, and change the protocol on that basis:
Call <a href="<? echo ($detect->isMobile()) ? 'tel' : 'callto'; ?> :+1-579-827-0034">579-827-0034</a>
(Note that I am using the PHP ternary shortcut for this code sample).
Controlling Skype’s Interaction With Internet Explorer
There is an issue if your visitor is using Internet Explorer to view your site and has Skype installed: the application will hook into IE in such a way that the browser will uniquely style digits on your page that it believes are a phone number. This appearance may well clash with your CSS. The easiest solution is to include a soft hyphen in the visual representation of the phone number by using an HTML entity, in the form of
<a href="callto:+15798270034">(579) 827ۂ0034</a>
This is enough to fool Skype and stop it from styling the phone number. The functionality of
callto will be unaffected by the entity.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.