Customizing Phone Number Auto-Links with CSS

Taking control of those generated links in mobile emails

It all started as a discussion between two friends of mine, “I wish people wouldn’t use images for your phone number in your email signature, it’s a pain when I have to call them and can’t just click on it.” Which was quickly followed by, “I just don’t like how it automatically styles the links in a way that isn’t consistent with my design.”

As I listened, I immediately knew there had to be a better way and although many email clients do not support modern features, the ones that automatically add links would likely support what I needed.

It’s All About the Attribute Selector

I previously talked about attribute selectors in my post on Practical Sass Loops so I highly recommend checking that article out if CSS attribute selectors are still a little new for you.

Right now all we care about is the “begins with” attribute selector. When mobile clients turn the link on for phone numbers it does so by changing:

1-800-555-1212

to…

<a href="tel:18005551212">1-800-555-1212</a>

With that insertion, it gives us an opportunity to style these specific links only for the browsers that support the feature but using the selector…

a[href^=tel] {
  ...
}

As a quick reminder the ^= attribute selector allows you to select an item with an attribute that begins with the given value. Another option would be to use a media query to further limit the target to only mobile phones.

@media (max-width: 786px) {
  a[href^=tel] {
    ...
  }
}

Depending on your design you may also want to limit the styling of these phone number links to a specific section (like your signature) within the HTML email. Adjust your selector appropriately to target the area you want to cover specifically.

.signature a[href^=tel] {
  ...
}

Remember, we’re only targeting browsers that auto-link phone numbers. These mobile browsers typically support more advanced features than web-based applications.

Improving the Mobile Experience

Now that we know how to target our links, let’s look at some examples in making it easier for people to call us from their phones. Most of the time I see phone numbers that sit at the bottom of signatures, crowded by addresses, which are likely auto-linked for a mobile map application, making them even more difficult to click on.

Our basic signature shoves the phone number right next to the address that has automatically been linked to activate our map application. Clicking the phone number without accidentally hitting the address takes careful consideration

Let’s start by adding a margin to the top to separate the phone number from the address. We’ll also need to make sure our telephone number is set to display: block or display: inline-block to allow that to happen.

a[href^=tel] {
  border: 1px solid #ccc;
  border-radius: 5px;
  color: black;
  display: inline-block;
  font-style: normal;
  margin-top: 10px;
  padding: 3px 5px;
  text-decoration: none;
}

Let’s add a little call to action to the phone number to help fill out the button and make it a little wider.

a[href^=tel]:before {
  content: 'Call: ';
  font-weight: bold;
}

This pulls the number further from that address and creates a basic, but reasonable style. It informs the recipient that they can click on the button, and by clicking, it will prompt a phone call.

We can move even further into making the button easier to click on by increasing the font size and setting the display to block.

a[href^=tel] {
  border: 1px solid #ccc;
  border-radius: 5px;
  color: black;
  display: block;
  font-size: 125%;
  font-style: normal;
  margin-top: 20px;
  padding: 5px 10px;
  text-align:center;
  text-decoration: none;
}

Spreading the display of the button over the full width of the screen eases the ability for users to click the button and further separates the button from the address content.

Moving Past the Basics

Within both of these examples I’ve done only basic visual adjustments to create separation of the buttons to create a customized visual styling based on the automatically added link. Your buttons aren’t limited to only these very basic changes. Since most of the modern email clients adding these links will support the needed CSS, it is possible to further customize these buttons. Using CSS3 features for example, we can create a more visually styled button.

a[href^=tel] {
  background-color: #f5f5f5;
  background-image: linear-gradient(to bottom,#ffffff,#e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #cccccc;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) 
                rgba(0, 0, 0, 0.1) 
                rgba(0, 0, 0, 0.25);
  border-bottom-color: #b3b3b3;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 
                    0 1px 2px rgba(0, 0, 0, 0.05);
  color: #333;
  display: block;
  font-size: 125%;
  font-style: normal;
  line-height: 20px;
  margin: 20px 0 0;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}

Both iPhone and current Android email clients support advanced CSS3 effects that allow you to create realistic buttons.

With these more complex CSS declarations you’re able to adjust your telephone links to fit any styling you like, be it traditional buttons or a more modern, flat design.

Make It Simple and Easy

Every opportunity you take to style phone number links should be looked at as a way to improve the ease of use for your recipients. The focus should be making the option easy to select without conflicting with other items around it. Sometimes just a basic style is best, others are more elaborate, but whatever you decide just make it as simple as possible for those who might wish to interact with you by phone.

Tim Knight is a Web Producer and Senior User Experience Architect at GravityFree in Sarasota, Florida.

If you’ve enjoyed this post, please hit “recommend”. Feel free to say hello and introduce yourself on Twitter.