Many businesses these days use some form of Voice Over IP (VoIP), a method of making and receiving calls over the internet. You may be familiar with this type of service with tools like Skype, FaceTime and Google Hangouts etc.
As with everything we do on the interwebz [sic], we look at user experience as being our driving force – in this case, we need to have a think about where and how our users are likely to be looking at our website. It’s no secret anymore that we’re doing more on mobile devices than desktops (read: [Search Engine Land] Google Says More Searches Now On Mobile Than On Desktop), so when thinking about how your phone number is going to look and work on your website, we think about the same technology split; mobile and desktop.
mobile smart devices will quite happily handle phone numbers – but not everyone has a smart device (I know – shocking, right?). On Android and iOS devices, tapping a telephone number will most likely open the dialer and drop the tapped number there – but what about devices that can’t do that – or more specifically, desktop browsers – sure, they’re used less than mobiles, but they’re still there!
So, just as we tell a browser how to handle a link that contains an email address (
<a href="mailto:email@example.com">Email Me!</a>) and a link to another website/page (
<a href="http://www.example.com">www.example.com</a>), we tell a browser that the information we’re providing is a telephone number. We do this with the ‘tel’ provision.
Define your link in the following way –
<a href="tel:+441642688533">01642 688533</a>
You’ll notice that we define the country code for our number. As the link will open the dialer, we need to allow for anyone who may click the link – so starting your link with +44 for the United Kingdom and +1 for North America etc. will ensure that anyone will be able to click your link, and it will work for them (don’t worry, using the international code for a number in the same country as you’re in is fine, it works the same way as any other number).
The section between the quote marks () gives the instruction to the browser, the section before the closing </a> tells the browser what to actually display on the page. So you could write
<a href="tel:+441642688533">01642 688533</a> to display 01642 688533 or
<a href="tel:+441642688533">Call HypeStar</a> to display Call HypeStar, but both links perform the same action, so it’s your preference.
And that’s it – you can now add a clickable phone number to your website, email templated – whatever you want. On mobile devices, this will launch the mobile dialer, on laptops/desktops, it will launch whichever default dialer is available (Google Hangouts, FaceTime, Skype etc.).