Advertisement
HTML/CSS

Quick Tip: Make Telephone Numbers Do Something

by

I'm not going to begin this quick tip with the old "these days people view your websites on a multitude of devices" spiel, but it is true. Many mobile devices will do a good job of recognizing phone numbers in your HTML, making them clickable so you can directly call that number - but not always.

What happens if a user's mobile doesn't recognize a telephone number as being "callable"? Perhaps, for example, the way you've entered the number isn't recognized by the platform. Missed opportunity!

(Check out Mark Hammond's list of patterns which are recognized for iOS and Android..)


Make That Number Clickable

This one's dead easy: wrap your phone numbers in anchors, but instead of using the http* protocol (or whatever else you'd normally stick in an anchor) use tel: or tel://. This way, even if you've used an unrecognized pattern, the device will still know what to do:

<a href="tel:+4411122233344">+44 (0)111 - 222 333 44</a>

Non-supporting browsers (your desktop, for example) don't know what to do with the tel: protocol yet - unless the user has some kind of extension enabled which allows Skype to recognize telephone numbers. Google Chrome will happily ignore the click, but at the moment other major browsers start to cry. Other non-phone devices (such as the iPad) will recognize the number, prompting the user to add a contact to their address book - this would be a sensible approach for desktop browsers too.


Styling Phone Links

As an optional extra, let's make it even clearer to the user that they're looking at a phone link by styling each one. We'll use an attribute value selector for this, targeting only the :before pseudo element of links which contain the string tel: within their href attribute:

a[href^="tel:"]:before {
	content: "\260E";
	display: block;
	margin-right: 0.5em;
}

The little carat there ^ denotes that it's looking for any elements whose href attributes begin with the string we specify. tel: and tel:// will therefore both be covered here. We've slotted in a little unicode telephone \260E;, so we needn't even use a webfont icon. Nice.


Nice hue eh? color: tomato believe it or not..

We're all done here, in the name of accessibility give it a try!


Further Reading

Related Posts
  • Code
    HTML5
    HTML5: Vibration APIPdl54 preview image@2x
    HTML5 has been a breath of fresh air for the web, which hasn't only affected the web as we know it. HTML5 provides a number of APIs that enable developers to create interactive websites and improve the user experience on mobile devices. In this article, we'll take a closer look at the Vibration API.Read More…
  • Code
    HTML5
    HTML5: Battery Status APIPdl54 preview image@2x
    The number of people browsing the web using mobile devices grows every day. It's therefore important to optimize websites and web applications to accommodate mobile visitors. The W3C (World Wide Web Consortium) is well aware of this trend and has introduced a number of APIs that help with this challenge. In this article, I will introduce you to one of these APIs, the Battery Status API.Read More…
  • Computer Skills
    Productivity
    How to Use an Android Smartphone With Your MacAndroidmac1
    Year upon year, Android has proven its value as an alternative to Apple's iOS. Android's 79-per cent marketshare worldwide means a fair number of Mac users also use Android phones. This tutorial covers what it's like to be in that camp, and what apps and services are available to help make these obverse devices work together.Read More…
  • Web Design
    HTML/CSS
    Creating Friendlier, “Conversational” Web FormsForm retina
    Web forms are constantly a hot topic when it comes to web design and user interaction. The reasons for this are vast, but one of the more obvious reasons is that forms are the most basic way for a user to input information into your application. In this article, we'll discuss a few techniques that allow your forms to respond to the user's input, while helping to obscure unnecessarily confusing or overwhelming elements.Read More…
  • Code
    HTML & CSS
    Better Responsive Images With the picture ElementPicture element retina preview
    This article will introduce you to <picture>, a new proposed element created to try and solve the problem of serving the version of content images which better suits the device currently visiting a web page.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…