Once upon a time, mobile devices were primarily used for calling other people. That was long ago and since then, we've graduated to using our iPhones and Androids primarily to play Angry Birds. Nonetheless, voice calling still has its place in the world.

There are loads of businesses that rely on phone calls to make their bread-and-butter - from Thai take-out joints, to your local salon. Perhaps even you and your clients fit into this category, too!

In this post, we're going to look at how you can get your subscribers to place calls from an HTML email newsletter received in their desktop, web or mobile email client. You heard it - we're not talking about maximizing click-throughs, but call-throughs. Featured is an example HTML email newsletter (pictured) which you can download, adapt and use to learn more about this technique.

Placing calls via email: the basics

If you check email on a mobile device, you may have noticed how some models parse phone numbers in messages and turn them into tappable links. These links allow you to conveniently place calls, by automatically switching from the email app to the phone interface on your device.

As of recently, Gmail has started doing the same thing, launching Google Voice in a similar manner to make it really easy to place calls via their telephony service.

Creating links for convenient calling is nothing new. Prior to either of the above hitting the scene, Skype URLs were commonplace on the web. In March this year, Skype hit a record 30 million simultaneous online users and can be installed on Windows and Mac machines, as well as on iOS and Android handsets.

It turns out that these methods can be adapted for use in HTML email. The resulting links can be customized, meaning that you can turn a phone number or Skype username into a bold call-to-action. To demonstrate, lets look at the example template (click to view):

The 'Call:' button has been disabled in most browsers - we'll explain why and how shortly

Linking to telephone numbers and Skype usernames

When testing email newsletters on the iPhone and in Gmail, we found that both email clients automatically wrap phone numbers with <a> tags like so:

<a href="tel:555-666-7777">555-666-7777</a>

This can be a massive annoyance for email designers, as these 'new' tel: links tend to be bold, bright blue and often difficult to style with CSS.

Thankfully, there is a universal fix - preemptively adding your own tel: links to the HTML code. Using this method, you can also add phone number links wherever you see fit - let it be in your call-to-action, or surrounding a 'call us now' line in your copy:

To order a pizza, <a href="tel:555-666-7777">call us now</a>.

The same can be done with Skype links:

Skype us on <a href="skype:555-666-7777">555-666-7777</a>. 
Don't forget to add <a href="skype:abcpizza">abcpizza</a> to your contacts!

The downside to this method is that in order for the links to be detected in email clients, we can't convert them into tracking links for use in Campaign Monitor campaign reports. To turn off tracking specifically for these links, we use the cm_dontconvertlink attribute:

To order a pizza, <a href="tel:555-666-7777" cm_dontconvertlink>call us now</a>.

To make things even more testy, not all email clients know how to deal with tel: links. Obviously, Skype has to be installed on the recipient's machine for skype: links to work. With this in mind, here's what support looks like across the major email clients:

While tel: support is great across mobile clients, it's spotty at best on desktop and in webmail clients. Conversely, skype: support is the bee's knees on desktop clients, it falls over on mobile and webmail clients (unless you have the Skype web toolbar installed).

Disabling tel: links in desktop and webmail clients

Given the inherit troubles in featuring tel: links in anything but mobile email clients, the best option is to simply turn them off. We'll do this by nesting the link text in a block-level element (eg. a table), wrapping this with the tel: link, then applying the following CSS:

a.disable-link {
	pointer-events: none;
	cursor: default;
}
...
<a href="tel:1800ABCPIZZA" class="disable-link" cm_dontconvertlink>
   <table>
      <tr>
          <td> Call: +1800-ABC-PIZZA </td>
      </tr>
   </table>
</a>

And voila! The tel: link above is inactive in Outlook, Apple Mail, Thunderbird and most browser/webmail combinations. Remarkably, Google Voice still picks up on tel: links, even with the workarounds above. That's a good thing.

In mobile email clients, we'll activate the link by using a @media query:

@media only screen and (max-device-width: 480px) {
   a[class="disable-link"] {
      pointer-events: auto !important;
      cursor: auto !important;
   }
}

Nicely done, if I say so myself.

The template, yours to download and tweak

Admittedly, this isn't a perfect solution, due to the lack of tracking and limitations with tel: support. However, if your business relies on phone enquiries, then you can build very innovative campaigns around this technique. Feel free to download the template, see how it works and refactor it for your own adventures in email and telephony:

A huge thank you to vlanzoiz for the inspiration and early testing and Panic, for letting me rip off their design again. If you have any questions or comments on initiating phone calls from email newsletters, we'd love to hear them in the comments below.