Thursday 31 December 2015

CSS styling for phone numbers on iPhone and iPad

iPhones, iPads, and other mobile devices automatically detect phone numbers and add the tap-to-call functionality. It’s a great feature fo... thumbnail 1 summary

02:15

iPhones, iPads, and other mobile devices automatically detect phone numbers and add the tap-to-call functionality. It’s a great feature for user experience, but the systems add their own styling to the numbers, i.e. usually they are blue and underlined. This makes sense as a default, it’s the traditional link styling, and what Google still uses in it’s SERP pages.

However, a blue underline may not match the design of the rest of the page. Or worse, may be illegible on similarly coloured backgrounds.

Styling the phone number

We want the numbers to look like a link so mobile users are more inclined to tap it and make that call. So it’s a good idea to keep the underline, or maybe make it even more obvious as a call-to-action button.

Add an anchor tag

The best way to do this is to wrap the number in an anchor tag with the href as tel:thenumber. A bit like a mailto email link, like this:

Note the tabIndex, more on this later in the article. Adding a class gives us a hook, if needed, to add CSS:

.tel,.tel:visited { /*for small screens */ display:block; color:#fff; background-color:#000; padding:1em; text-decoration:none; } .tel:hover,.tel:focus { color:#000; background-color:#fff; } @media screen and (min-width: 28.5em) { /* for larger screens */ .tel,.tel:visited { background:none; cursor:default; } .tel,.tel:focus { color:#000; } }

The above will make a simple looking button on small screens, and just text on larger screens. The curser state is defined as default, which is the regular arrow. This is so not to confuse desktopers when they rollover a link that goes no-where.

An unwanted link

The anchor tag is a great solution for small screens, but the tradeoff is that it’s unnecessary and potentially an accessibility issue for larger screens. Although we’ve styled it so it doesn’t look or behave like a link, it’s there in the DOM. Which means it will mess with the tab index a little, i.e. it will take the focus when keyboard users are tabbing through links on the site. Luckily, there’s a solution.

TabIndex-1

This has good browser support, and is a simple way to stop a link receiving the focus. Adding it to the anchor tag for the phone number means keyboard users will be none-the-wiser, and their experience is not effected. Here it is again:

Embrace the Phone number link on mobiles

It is possible to stop devices recognising numbers altogether with this piece of metadata:

However, I don’t recommend using it. Most businesses want to be contacted by their customers, using the code above makes it hard for customers to call from their phone. They would have to leave the browser to make the call, remembering the number, or having to write it down. Copy and paste isn’t an option either as pasting into the dial screen doesn’t work on all devices.

Although the iPhone’s does a good job of recognising phone numbers, adding the <a> with href of the number eliminates any possibility of the device not recognising it. After-all the device is looking for patterns in the numbers, i.e. a certain amount of numbers followed by a space, followed by some more numbers. If the phone number, or the way it’s entered on the site, doesn’t match a pattern it could be missed.

Manually telling iPhones, iPads and other devices to engage phone number recognition, and styling it on page, add up to a mini win for user experience and removing barriers between websites and their customers.

Thursday 31 December 2015

CSS styling for phone numbers on iPhone and iPad