Digital Marketing-min

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


Nov. 12

6.92 K

User Experience Discussion
User Experience Discussion

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).

Country Flag
Country Flag

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.


Lets Nurture
Posted by Lets Nurture

Blog A directory of wonderful things

7 Reasons to Believe for Laravel’s Prominence in 2017

In the span of two years, developers have used number of frameworks for different languages. This includes, Yii2, Symphony, Ruby on Rails etc. But there is one particular framework which …

Internet Security : Keeping your WordPress Website Safe

There is a famous quote by Sir Isaac Newton – “What we know is a drop and what we don’t know is ocean”. The very same thing goes when are …

Using CSS through CSS Preprocessor

Any website at the basic layer is pure HTML – tags and styling. When internet started a few decades ago, HTML was only text. Gradually, it was possible to add …

Better User Experience ? What is it ?

What is a User Experience (UX)? The exact definition as outlined by the International Organization for Standardization, is a “Customer’s perceptions and responses resulting from the use and or anticipated …

Next Level Mobile Friendliness Website Just in 3 Steps!

Google’s Mobile friendly Up-dates come out these days and also officially announced about its mobile friendly ranking algorithm changes.  These changes are impact on websites that aren’t mobile friendly, this …

10 Debates and Technical Flaws That Might Redefine Programming!

It doesn’t matter what you are thinking, there is always a different opinion to consider from others. It might be either Savory Vs Sweet, every one has a different point …

Would you use HTML 5 on your mobile?

We all have seen some really amazing things happening on the internet. A collection of beautifully animated sites showing off a wide range of features. If you have seen all …

Secure WordPress CMS website with OSE firewall Plugin

WordPress has major issue and that is “security”, if you ask any wordpress user they would always emphasize on security concern while using wordpress. As a WordPress web developers we …

CSS3 replaces traditional JavaScript for styling purpose: Checkbox styling example

HTML5 and CSS3 is advance level client side programming (we cant get away with it). CSS3 has opened up all new horizon for UI Designer Today We want to show …

easyReservations – WP Plugin Review For WordPress Website Customization

In the past decade business websites have come a long way from just being brochures that point your customers in your direction providing an address and phone number. With the …

How to install an Android App on Your Phone

All this while you have wondered on having that favourite application of yours but didn’t know the way of installing it on your phone. That favourite game of yours, that …

Bring Your Concept Online With a Stunning Website

Someone has rightly said that, ‘Your customers step at your store looking at the design and interior” the same applies to your online store The more interactive and lively is …

Tools To Make Tag Soup Healthy

Anybody who has ever attempted to make a web page knows what a tag soup is. It’s the innocent crime that most of us, unwantedly make. An ill-structured, invalid HTML …

Pains Of Do It Yourself Websites

Sometimes doing it right and exactly right makes the entire difference. Sure you have made your website look decent with the help of DIY (do It Yourself) websites that claim …


Have an !dea or need help with your current business?

We use cookies to give you tailored experiences on our website.