Style Phone Number Links For Mobile

How does your website look on an iPhone or iPad? Is the experience the same? Is it better or worse? Depending on your answer it may be time to think about a dedicated mobile version of your site, but that is for another article. Here we want to hone in on one small aspect of the mobile browsing experience: Phone numbers and how they appear on the full version of websites.

Excluding Flash, designers are able to provide the same (or similar) experience that a user gets when viewing a website on a laptop or desktop as they do on a mobile device. Honestly it is not that complicated. Building a site properly allows it to be scalable across the board. There are subtle difference though.

Mobile Safari on iPhones and iPads (and other modern mobile browsers) view phone numbers as links, so you can click on the phone number and call that person or business without having to copy or write down the number. It is a pretty slick function built into the browser. Even though regular browsers will not view phone numbers as links, it is important to style them for mobile browsing.

Sometimes the links may look fine by default based on the current stylesheet in place. Other times, we will not be so lucky. A prime example is the navigation for a project we are wrapping up right now. The top section of the site has the phone number directly to the left of the navigation and the colors are flipped between the two sub sections. When the navigation is viewed on a regular browser, it looks like the following:

Styling iPhone Phone Numbers

Without styling the phone number area, by default it would pick up the same pinkish background color for the link color. So on a mobile browser, the phone number would look like this:

Styling iPhone Phone Numbers

Obviously it is not a good thing if users cannot recognize that there is a phone number that they can call. The solution is to add a link class to the phone number and bring it back to the white color it is intended to be. This simple solution reiterates the importance of being detail oriented and how it can affect a final project.

Stay In The Loop

Social Gathering

Join our newsletter to get notified about the happenings here at J Taylor Design.