Retrofitting an existing website for mobile can be daunting and potentially expensive, especially if there is some redesign or a separate mobile site involved. However, there is one small thing you can easily and inexpensively do to your current website for your mobile visitors — make your phone numbers clickable!
How Clickable Phone Numbers Work
We’re all familiar with links on websites. Most websites currently employ a few different types:
- links to another page or website
- links to an email address that open up your default email client when you click on them and put the email address in the “to” field
- in-page links, or anchor links, that move you to another part of the same page when you click on them
Links use something called the “href” attribute of the HTML “a” tag. Depending on the browser, the href attribute accepts a number of different “schemes,” which tell the browser what do do with the link when it’s clicked. Links to another page or website use the “http” or “https” scheme. Links to an email address use the “mailto” scheme. The handy “tel” scheme allows you to link to a telephone number. In browsers that recognize the tel scheme, clicking on the link will either prompt you to add the number to your contacts (iPads and Kindles) or will prompt you to dial the phone number (Androids and iPhones).
Here’s the syntax:
Phone me!
Making your website phone numbers clickable is obviously very convenient for customers visiting your site via their data phones. It saves the time and frustration of having to copy and paste or type a number in. And it’s a simple fix that takes very little time and effort to implement.
The Desktop Caveat – Filter Your Code for Mobile Devices
When you or your developers dig into your website’s pages to wrap your website phone number in links, be sure to test for a mobile device before displaying a linked phone number. The tel scheme is well supported in mobile browsers, but not in desktop browsers. Clicking on a tel link in Firefox on a desktop computer will return an ugly “problem loading page” error to your site visitor; IE will return a “webpage cannot be displayed” error. Chrome ignores the link, but ignored links look broken.
If your website is built in WordPress, the wp_is_mobile() function can be used in your website themes to screen for a tablet or phone. Both WordPress and Joomla offer mobile detection plugins: WP Mobile Detector and the similarly named Mobile Detector for Joomla. If your site is built with a different framework, your developers should be able to help you conditionally display the linked phone number.
Give it a try! Your mobile visitors will thank you!
