When creating HTML emails, certain HTML email clients change the font colors for phone numbers to blue, especially if they are not styled with inline CSS or are placed inside of an anchor element with an href=”tel:” attribute. You can see an example in the image below:
The following list of email clients will be affected as a result:
- iPhone 5s iOS 7
- iPhone 5s iOS 8
- iPhone 6 iOS 8
- iPhone 6+ iOS 8
- iPhone 6 iOS 9
- iPhone 6+ iOS 9
- iPhone 7 iOS 10.2
- iPhone 7+ iOS 10.2
- iPad (retina) iOS 10.2
- iPad Mini iOS 10.2
- iPad Pro (12.9 inch) iOS 10.2
- Gmail IE
- Gmail Firefox
- Gmail Chrome
Below, I will explain several methods that I have seen recommended based on research.
HTML – Solution One(iPhone 5, iPhone 5s, iPhone 6 and iPhone 6s only)
Use <meta name=”format-detection” content=”telephone=no”> in your HTML header. This will resolve the issue on only the older iPhones (iPhone 5, iPhone 5s, iPhone 6 and iPhone 6s, all versions of iOS).
HTML – Solution Two(Gmail only)
Surround your hyphens with <span> elements. This will only fix the issues in Gmail (IE, Firefox and Chrome).
1<span>-</span>800<span>-</span>888<span>-</span>8888
Using the HTML entity for hyphens, - renders the same result as above example.
1<span>-</span>800<span>-</span>888<span>-</span>8888
HTML – Solution Three(All Clients)
This is considered the ultimate solution and will work for all clients. Insert a zero width joiner ‍ in at least two or three different spots in the phone number.
1-8‍00-8‍88-8‍888