Importance of displaying telephone numbers to Improve Website’s User Experience

User Experience is always an important part of any Website development project. It is always important to try something and tweak your html to improve website development. Phone Numbers and Emails are often ignored in Content Strategy but now  mobile internet user base is increased in a huge amount so, improving user experience around phone number can do wonders for online business.

Today I am writing something about Telephone Numbers and its CSS Tweaks for better User Experience.

Telephone Numbers and its Importance

Being an SEO Service Provider why we always get mail or Skype talk on “make our phone call busy” why my phone is not ringing all the time? At one point we reach to a level and think why it is not ringing, as it should be? For Local Businesses enquires are generated or converted into customer by ringing vendors.

Here, we would suggest some easy tweaks, which will improve User Experience.

Make it Large

Phone Number should be large enough (if it is your own website) and clear enough to get noticed. You can apply different color for Phone Number ( Especially if it is ecommerce website).

Country Flag

If you are providing services in multiple countries it is advisable to have country flag so people can easily identify where they should place a call. (Obviously everyone wants to save money).

Make Number clickable

In this Era of fast communication Clickable Number will improve your conversion ratio ? How? Because now 50% of Internet is accessed by Mobile Devices , if your number is clickable your potential customer will easily be able to reach to you. And Many of Desktop / Laptop users will have Skype or other voice calling plugin installed.

Making number clickable is easy just use use tel: or tel://.

<a href=”tel:+441274272717″>+44(0)1274 271727</a>

And Phone Number will become Clickable

+44(0)1274 271727

CSS and Phone Numbers

If you want a special telephone icon in beginning of your phone number you need to make some tweaks in CSS.

a[href^=”tel:”]:before {

content: “260E”;

display: block;

margin-right: 0.5em;

}

For me CSS is one of the most lovable programming language ? . here ^ carat sign will ensure to find any href starting with “tel” and before will be a CSS to put before text of that element. Howz that? Ha?

you will get this kind of black phone icon before your phone number

Phone Numbers and Mobile Accessibility

We all love iOS and android rendering skills right? Both OS has predefined capability to find “phone numbers” from device browsers. If Web Page has text in particular format it will directly make that link clickable as a phone number so user can make a call to that number.

Following Text Patterns will work in both Android and iPhone for rendering text as a phone number

• (123) 123-1234
• 123 123 1234
• 123.123.1234

<!– Cross-platform compatible (Android + iPhone) –>

<a href=”tel://91-794-009-5953?>+91 79 40095953</a>

+91 79 40095953

I hope it will help to improve user experience on your websites. Call us at +91 9374444800 to have a further discussion.