Make Telephone Numbers Do Something

July 24th, 2013 Written by

These days, it isn’t crazy to assume that many people visiting your site are doing so from their mobile device. While many of these devices do a good job at recognizing telephone numbers, they typically have trouble displaying them in a way that matches the look and feel of the website. In most cases, the number is bright blue and underscored. This blog post will cover the best way to remedy that.

Creating the link.

The first thing you will want to do is wrap your telephone number within an anchor tag. Obviously, right? However, instead of using the standard http:// protocol, you will want to use tel:, or tel://.

<a href="tel:4055503050">405-550-3050</a>

Using this type of reference will tell both your mobile device and your tablet exactly what to do. All the while, most desktop browsers will simply ignore it.

Styling it.

So, here is a little bonus feature one could do to better optimize the link. As we know, one of the biggest issues with designing and developing for mobile devices is working within such confined real-estate. The best way to make your most important information pop is to simply style it that way. Just as the above link we created will only be targeted on mobile devices, so to will the below CSS. This is done by using the small carrot which denotes that we’ll be looking for an href whose attributes specify tel. Further, rather than using an image or webfont icon, we can use a small unicode telephone \260E.

a[href^="tel:"]:before {
    content: "\260E";
    display: block;
    margin-right: 0.5em;
}

With that, we are all done. Have fun with this.