Designing for Mobile Devices: Phone Numbers

Mobile web development is very important these days. The numbers vary, but about 50 percent of mobile phone owners in the United States are estimated to have smartphones now. Responsive design comes in handy when making websites because of the website could adapt to the screen sizes of various devices. I have written two posts before sharing some basic tips on responsive design: “Responsive Design: Tips and Tricks” and “Responsive Design: The Basics”. Today, I am going to share some tips about mobile web development that may be useful.

Phone Number Detection in Mobile Devices

Phone numbers listed on websites are recognized and converted to links on mobile devices. This enables users to call businesses directly when accessing websites on their phones. This is why calls to action are especially important on mobile websites. These phone number formats become links when the website is viewed on the iPhone:

• 770.817.9563
• 770-817-9563
• (770) 817-9563
• 770 817 9563

Tel: Link and Turning Off Phone Number Detection

A way of inserting phone numbers in a mobile website is to use the following code:

<a href="tel:770-817-9563">770-817-9563</a>

In the case of the iPhone, most characters will work as a separator, but phone numbers containing * or # will not work to prevent malicious uses of the phone link. You can also turn off phone number detection by using a meta tag.

<meta name="format-detection" content="telephone=no">

This becomes useful if you have a lot of number strings, such as product codes, on the website that could be mistaken for phone numbers.

Designing for the mobile web is becoming increasingly important as the number of smartphone users rise. Phone numbers are important in mobile web development because they lead to immediate action from users by allowing them to easily call businesses they are interested in.