Email Design Tip #5: The Telephone Blues

The Problem

Before

One of the most annoying design issues our team have come across lately is how the email readers can sometimes style the text that contain telephone numbers. Similar to the way mobile devices turn telephone numbers into links, some email readers (particularly Gmail) have started to do the same, not only on mobiles but also when online using a regular browser and computer screen.

Whilst this is a great feature for mobile devices, many email designers do not appreciate the way the email reader can change the look of their perfectly designed emails in an instant. Not only can this make the email look ugly, but if the design already has a dark coloured background behind the telephone number it can make it unreadable.

The Solution

After

After a bit of design tweaking and html code changes our email design team cracked it. Instead of trying to stop the telephone numbers becoming a link (as this would still be valuable for the readers who receive the email on their mobile phone) it is better to manually format them as links, set the text decoration as “none” and set the colour you would prefer the telephone number to display :

<a href=”tel:+448452267181″ style=”color: #FFFFFF; text-decoration: none”>0845 226 7181</a>

The blue and underlined telephone number is gone and replaced with a linked number which is more fitting with the rest of the design.

More useful email design tips are available in the Essential Guide to HTML Email Design, to download it simply click here.