UXcellence Exploring excellent user experience

Quick Fix: Style Phone Numbers as Links for a Better Smartphone Experience

Have you noticed that phone numbers are automatically converted to links on most smartphones? This is handy for users who want to immediately take action from their phone when they see a phone number. There are several ways to improve the usability of linked phone numbers on mobile devices.

Choose the right phone format

Not every phone number format will trigger as a link properly across every platform. iOS is typically more forgiving of random phone number patterns than Android. For best results though, use one of the following patterns for your phone numbers (and make sure to stick with numbers, not letters).

Cross-platform compatible phone number formats

  • (xxx) xxx-xxxx
  • xxx xxx xxxx
  • xxx.xxx.xxxx

Styling phone numbers

In addition, you can wrap your phone number in a span to make it more visually obvious on mobile devices.

<span class="phone">(555) 867-5309</span>

In your stylesheet, you would simply add your phone link style as:

.phone a { ... link styles for phone }

Turning off automatic phone links

There may be rare cases where you want to disable phone links on a page or site. You can disable this page-wide by adding the following meta tag in the document <head>

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

Of course, this will leave all potential phone numbers as plain text on the page, so use it only if you’re certain users wouldn’t want to use the phone numbers directly on that page.

Adding phone links explicitly

Perhaps you want to use a phone number with words (like 866-COMPANY) or you want to use an image or text for your link content. In that case, you can create the link directly with the following format:

<a href="tel:1-866-266-7269">1-866-COMPANY</a>
<a href="tel:1-800-867-5309"><img src="phone.gif" alt="Call Jenny!" /></a>

Armed with these tools, you can now make phone numbers easier to find and use for your mobile visitors.

Like this? Please share:

Explore more like this