Including Phone Numbers on Your Website With Modern Browsers

I was recently conducting research for an upcoming client and I stumbled across an interesting observation. For a while now I was simply assuming that a few things that Chrome does are actually beneficial to my web browsing experience – I was thinking about MY web browsing experience, but what about YOUR web browsing experience?

Chrome currently takes what they deem to be a phone number and they turn it into a clickable link. That is great except that perhaps it might not be depending on how you actually designed your site.

Here are a few examples of the same site – all from a portion of the header, all from different web browsers – the phone number for this business is listed on the top right corner (I’ve blurred the actual phone number):

In Firefox:

In Internet Explorer:

In Google’s Chrome:

As you might have noticed, in the Chrome version you can barely see the phone number of the site - that is because Chrome took the liberty of making the phone number a clickable link, and making it dark blue. That is great if I want to click on it, but perhaps I miss the phone number entirely as it is so blended into the background.

I also ran a test using a service called BrowserShots to see how the test would render in Safari – it looked similar to the way Firefox and IE handled this particular issue.

So what is the solution for this? You can create a separate CSS rule specific to Chrome browser, or maybe on the off chance that other browsers emulate this same feature it might make sense to to design your headers a little differently. On my site the bulk of the header is an image (which I’ll be changing soon) but one minor benefit I am not impacted by this “advance.”

Overall I think the way Chrome handles this is actually very sensible, particularly as our phones are becoming more and more integrated with our browsers BUT as website owners you can see how that might be a cause for some serious concern. We all need to be paying attention to small details like this – particularly something as big as the way you are encouraging you website visitors to contact you.

Also – in case you were wondering, here is a screenshot taken from my droid phone which elected to show the phone number as text (in white) instead of a link:

As browsers continue to evolve and to roll out new enhancements it is important as a business owner with a website you are taking the time to really consider what this means for your own site. Often a business owner will get a new site from a developer and the relationship does not move forward from there. You are happy with the site. The developer is happy with it to. You all move on with your lives. I get it, costs are always a factor, but fast forward a year or three later and there might be some issues with your site that frankly looked great a few years ago but today are not performing as you (and your developer) intended.

And with something as important as a phone number that is a critical piece of information. So at minimum take the time to do some cross browser testing even if your site is a few years old. Sometimes a very small fix can have a big impact.

Sorry, comments are closed for this post.

Get More Great Strategy & Marketing Info
Be Sure To Subscribe

If you like what you've read be sure to subscribe and have powerful Digital Identity Management strategies and tactics sent right to your inbox!

Subscribe with confidence! Read all about our Privacy Policy