Linking Telephone Numbers for Mobile Phones

Posted on Wednesday September 24th, 2008

Like many people with shiny new toys, I am thrilled that mobile phones like the iPhone and Blackberry pick up telephone numbers and allow you to call any number you come across on a web page. But what about linking to a number? I've run across several CTAs in my daily work which have a graphic that says 'Call to Order' followed by a phone number within the graphic. How can we make it as simple to call that number without disrupting normal web use?

Apple has designed the iPhone to recognize HTML for a telephone number:

<a href="tel:1-800-1234-567"><img src="###" alt="Call to Order" /></a>

…but unfortunately normal web browsers do not recognize tel: like they recognize http: and cannot make any sense of your link. See error message.

Well, I found a solution. All you have to do is add onclick="return false; " into your link's attributes. The iPhone still prompts you to call the number, and all the normal browsers execute the JavaScript which does nothing. Add a dash of CSS to your link to avoid the mouse cursor from turning hot (there is no cursor on a touchscreen so this doesn't affect the iPhone), and now you have a link which looks and acts like it is not a link in the normal browsers:

<a href="tel:1-800-1234-567" onclick="return false; " style="cursor: default; "><img src="###" alt="Call to Order" /></a>

The only other option I'd like is the ability to specify a fallback URL within HTML, so if the phone number doesn't work, you can send someone to an order form or other conversion path. I've been brainstorming solutions that don't rely heavily on JavaScript, because I don't want to do any browser detection to pull this off. So if you have any thoughts, please share!