Scenario:
I’m walking down the street, trying to get in touch with a recommended restaurant to see if they have space available.
Expected user experience:
Do a Google search for the number, find it, tap it, call them (and hopefully find a table). Search, find, tap call.
Actual user experience:
Using my smartphone, I did a Google search for their name, found their website and tapped through to their contact page. On their contact page I was however greeted with something frustrating like +27(0)12-123-1234. I tapped it, but it was just plain text, obviously nothing happened. So, I had to select the text and copy the number. Next, you close the browser, open the phone app go to the keypad area and paste the number (after finding out where to paste it). Since it had the annoying extra zero in brackets, it wouldn’t ring. Back to the phone app, and since I’m using an iPhone I couldn’t edit the annoyingly formatted number, so I had to first save it as a new contact, then edit the saved number it to remove the brackets/international dialing code and then calmly throw the phone under a moving bus and walk home.
Sure, I could have memorised the number, but an even better idea would be to make things easier for your visitors: make your phone number clickable (or “finger tappable”) for mobile devices by using a simple line of code.
So then, here’s how to make your number clickable:
Simply change the line on the page you’d like to change (you’ll have to switch to a plain text view if you’re using WordPress or something similar) from:
021 123 1234
to:
<a href="tel:+27-12-123-1234">021 123 1234</a>
or, if you really must, to:
<a href="tel:+27-12-123-1234">+27(0)21 123 1234</a>
That’s it. No more frustrated visitors. Go ahead and click on the first one. Heaps of nothing.
021 123 1234
Then try and click the new one, which will render as below. If you’re not using a mobile device, it will attempt to call the number using Skype or Google Voice (if you have those installed):
You’re also helping your site with regards to SEO, as the <tel> attribute tells search engine crawlers that you’re listing a telephone number (and not just a random string of numbers). Same goes for the <address> attribute (among others).
This is actually part of a much longer checklist I’m working on for those in the hospitality industry with simple changes required to make sure that their websites don’t suck and leave their potential visitors frustrated. Expect basic things like:
- how to show a menu (that doesn’t come in the form of a 24mb PDF document),
- driving/walking directions,
- listing contact numbers and importantly,
- how to do this not only for desktop, but for mobile visitors too.
But more on that in another post. Thanks for reading!
