Sometimes the simplest problems are giving you headaches... here is one of them. One of my clients recently requested to build a mobile-aware (responsive) site with phone numbers callable with one click from mobile devices.

After fooling around a while with testing  all sorts of complicated solutions, I found it to be a very easy homerun, in fact:

Here is the click to call code:

 <a href=”tel:0000000000″>0000000000</a>

Simple, isn't? Make sure to replace the zeroes with actual phone number! And be aware, that the trick to work, the "tel:" tag needs to hold a correctly formatted phone number - no spaces, no dashes, no other extra tricks. Do not put any other characters in the quotation marks or a + in it for country code, just the numbers. The mobile device will take the number as is placed there, and will attempt to dial it. After all, what makes a mobile site special? The ability to code a link so it allows mobile web visitors to click a link that dials a phone number. They’re already on a mobile phone, so why make them take out a piece of paper? You can add punctuation inside the anchor text if you like, such as parentheses and dashes or periods. If your mobile web visitor is on an iPhone, you might not even need to code it, but it helps to add it for users of other web enabled phones.

But be aware about possible problems!  If you are coding a page of emergency phone numbers in the European Union, United States or other countries where this is implemented, it might be best NOT to enclose 911 (or the other, similar numbers) in this code to avoid accidentally dialing them or making a “pocket call” where the phone dials a number if it’s accidentally activated. In these countries the police investigate fake emergency calls and (more important for our case) calls where no one answers to ensure nobody is hurt or unconscious. And if the investigation ends up by discovering, that the call was a fake or an accidental call, the law is enforced... and the website owner, as a side effect, can be sued. So, use the trick with care, on your risk!

Category: Template trickery