Advertisement
Mobile Web Apps

Mobile Web Quick Tip: Phone Number Links

by

This quick tip demonstrates how to create phone number links with HTML. The techniques in this tip work on both Android and iPhone devices and can greatly improve the experience of mobile web site visitors.

Default Phone Links

By default on iOS and Android, the device browser will "magically" create links out of text interpreted as a phone number. When the user taps one of these links, the device phone application will launch. The exact phone number patterns that will be automatically turned into links vary between platforms, but I've listed several of the patterns I've successfully tested below:

  • 555-5555 (iPhone Only)
  • (555) 555-5555 (Android + iPhone)
  • +1 (555) 555-5555 (iPhone Only)
  • 555 5555 (iPhone Only)
  • 555 555 5555 (Android + iPhone)
  • +1 555 555 5555 (iPhone Only)
  • 555.5555 (iPhone Only)
  • 555.555.5555 (Android + iPhone)
  • +1 555.555.5555 (iPhone Only)

If your site or app uses one of the cross-device formats above, your users should already be able to quickly make calls just by tapping the text.

Creating Phone Number Links

The recipe for creating your own phone number links is simple. Instead of using a normal link based on the HTTP/S protocol or the file system, you can use the "tel:" protocol. This works just like a normal link would, only instead of the href attribute pointing to a URL or file, you prepend either "tel:" or "tel://" to a phone number.

Check out the following examples to see this in action:


<!-- Embedded within normal page text -->
<p>If you'd like to talk, <a href="tel:5555555">Call Me!</a></p>

<!-- Linking a custom image -->
<a href="tel://555-5555"><img src="phone.png" alt="Call Now!" /></a>

<!-- Cross-platform compatible (Android + iPhone) -->
<a href="tel://1-555-555-5555">+1 (555) 555-5555</a>

NOTE: The above code should be tested on a physical device. It will not work on the iOS SDK emulator.

The last example snippet is especially worth noting. Many web developers don't have the luxury of performing extensive mobile device testing on both iPhone and Android, so it would be easy to miss the fact that some of the phone formats listed at the beginning of this tip will not be auto-recognized on all devices.

Because the phone formats recognized may vary between devices, I suggest always wrapping your phone numbers in a link with the "tel://" prefix. Not only will doing so ensure that the greatest number of devices will link to the phone application, but this also seems to be a more explicit, accessible, and semantic approach to handling phone links.

Of course, if the content you are creating might be viewed on a device without a phone, you should either use a server-side language to only add the "tel:" links when necessary, or you should check the device type with JavaScript and add the links to the page progressively when applicable.

Disabling Link Detection

For both Android and iPhone, you can easily disable automatic phone number linking with the following meta tag:

<meta name="format-detection" content="telephone=no" />

This meta tag will disable phone number auto-linking while still allowing you to manually create phone number links using the "tel://" method described above.

Related Posts
  • Computer Skills
     
    An Introduction to Bluetooth, Mac and iPhoneBluetoothpreview
    Bluetooth is a wireless protocol that allows the wireless connection of devices. In this tutorial I’ll explain what Bluetooth is, I'll show you how to use an iPhone to unlock a Mac, how to enter text on an iPhone with the Mac's keyboard and how to use a Mac to make and receive phone calls. All with the help of Bluetooth.Read More…
  • Code
    HTML5
    HTML5: Battery Status APIPdl54 preview image@2x
    The number of people browsing the web using mobile devices grows every day. It's therefore important to optimize websites and web applications to accommodate mobile visitors. The W3C (World Wide Web Consortium) is well aware of this trend and has introduced a number of APIs that help with this challenge. In this article, I will introduce you to one of these APIs, the Battery Status API.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Web Design
    Email
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
  • Code
    PhoneGap
    PhoneGap: Build a Feed Reader - ConfigurationAudero reader preview2@2x
    This is the third and final part of the series about Audero Feed Reader. In this article, you'll learn how to create the configuration file and complete the project we started in a prior lesson.Read More…
  • Web Design
    HTML/CSS
    Quick Tip: Make Telephone Numbers Do SomethingPreview
    I'm not going to begin this quick tip with the old "these days people view your websites on a multitude of devices" spiel, but it is true. Many mobile devices will do a good job of recognizing phone numbers in your HTML, making them clickable so you can directly call that number - but not always.Read More…