I was recently helping optimize a website for some buddies of mine over at Global Electrical and Plumbing and since they are an electrician and plumber based in a small seasonal town called Plettenberg Bay, it was imperative that a user of their site could have quick access to their info from their smart-phone or tablet.

Picture the scene, a holiday-home owner arrives for the first time in months, it’s late after a long journey and only when you open the hot water do you realise that your geyser element isn’t working?!  What does one do, you’re on holiday and you need to find either a plumber or electrician or perhaps both fast.  You quite possibly don’t have your laptop with you or a desktop at your holiday home.  They’re most likely to search for something like “Electrician in Plettenberg Bay“ or “Plumber in Plettenberg Bay“  and as a result we wanted to make it as easy and hassle-free as possible for the user to dial them, from their smart-phone, straight away.

Having implemented the good foundation that is the Responsive Theme for WordPress by the guys from CyberChimps who know more than a little about fast, lean and mean responsive themes for WordPress, I was intent to make the telephone numbers for the guys clickable so that anyone browsing on the pages could access their electrician or plumber quickly in case of an emergency.

So with a bit of searching I was able to quickly implement the below code which ought to instruct any modern smartphone to automatically fill in the number in the device’s dialler.

Say we wanted to make +01-1234-5678 the clickable number to dial.  It was as simple as adding an anchor tag ( a ) with a href attribute of “tel:+12345678” around their numbers.  Just like one uses a “mailto:” tag in a href for handling the mail protocol, modern smartphone browsers identify the “tel:” protocol to act upon.  What’s also kinda cool is that you can actually make your own and register them in the browser.  Have a look at this article from Mozilla Web Based Protocol Handlers which gives an awesome and concise example.

What’s interesting to note is that the actual content contained within the ‘a’ tags can be whatever you like, be it text or formatted numbers.

This went a little something like this:

So if I now were to display this below and you viewed this through a compatible browser, you ought to get some sort of reaction.  For example on my laptop, Skype seems to have registered that protocol to my web-browser and hence Chrome asks if I’d like to open Skype with that link

Electrical – +27 (0)73 248 3600
Plumbing – +27 (0)82 702 5046

Here is a screen shot of my Chrome browser asking if it should launch Skype

So there you have it folks!  If you want an Electrician in Plettenberg Bay or a Plumber in Plettenberg Bay and you hit their site, you will get clickable telelphone numbers in the header of every page e.g. their landing page Global Electical and Plumbing aswell as in the content of their Contact Us page