All About Blue Links in Emails

How to Deal with Hyperlinks in HTML Email.

Chief Executive Officer, Co-founder

Dec 21, 2020

Links in emails have become an integral part and their importance is difficult to underestimate. Links help recipients navigate email, they lead newsletter recipients to the right pages of a website, and to the right external links.

Blue links in email, an incredibly useful feature, cause a lot of difficulties and problems for email developers and marketers. Recently, there have been many simple and complex ways to handle blue links. In this topic, I will look at the most effective ways to prevent the destruction of blue links in HTML emails.

Blue Links

Let's define the terminology. The blue link is the text in the email that becomes underlined and recolored in blue; in other words, it becomes a hyperlink. Usually, these links are created automatically by email clients. Usually within the category of blue links fall:

Names of web sites
Email addresses
Postal addresses
Phone numbers

Blue links certainly help the user better navigate the email text, but this can be a big problem—the unified email style is broken, and elements that you did not plan to have appear. We want the end user to receive the email exactly as it was intended by the email designer, without changes made by email clients and applications. On the other hand, users are used to the system of blue links and expect them.

Where is the golden mean?

I recommend overriding styles. We should keep the functionality of these links but make it so that we can set the styles for the blue links as we see fit, and not as the mail client algorithm decides.

Working with Link Styles

The best way to redefine the style of your links is to use CSS. This method has a lot of advantages, such as:

The ability to use different styles for different links—a designer's paradise.
The function of these links, which mail applications insist on, is still preserved.
This method is quite simple.

The only obvious drawback of this method is that different email clients do the definition of blue links differently, so you need to follow certain rules.

I want to draw your attention to the fact that free Email2 email builder has unique features that will make it easier for you to work with CSS.

Apple Mail

When creating links around text, Apple Mail adds additional attributes to these links that go beyond the normal href. For example:

<a href="#" x-apple-data-detectors="true">link</a>

Do not despair. We can overcome this inconvenience. To do this, you need to focus on elements with certain attributes and simply redefine the style for these elements. In the description of our email styles, we simply add the target links that Apple Mail has generated and force this text to inherit the style from the parent element:

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

The functionality of these links will remain the same, but their style will be the same as we intended.

Gmail

In the case of link processing, Gmail behaves differently. When viewing the HTML code of your email, Gmail converts the doctype to an underscore (u) element. Knowing this, we can add a hook to our HTML so that we can define elements for Gmail. We do this by using the id to the body element.

<body id="body"></body>

After that, we set up targeting for all links that are intended for Gmail, redefining the styles:

u + #body a {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

In Gmail, we use the same CSS properties as in Apple Mail, only with the specifics of Gmail.

Headache

When it comes to email, there is always room for unforeseen situations. There are updates for mail clients—some mail applications hate email developers so much that they do not give the opportunity to implement the design that was conceived. If the methods I described above did not work, then I recommend using the following approach.

This involves wrapping autolink candidates with an element, which is then targeted via CSS in the email header. The container element has a class that is used for targeting. Before, designers realized they could use the x-apple-data-detectors hack, this trick was usually used for blue Apple Mail links, so you'll usually see something like "applelinks" used for the class, but it could be anything.

For example, let's use the "blueLinks" class:

<p class="blueLinks">https://email2go.io</p>

Since we know that all mailers will do their best to make a blue link out of this element, we can use CSS to redefine the styles for it:

.blueLinks a { 
  color:inherit !important; 
  text-decoration: none !important; 
}

This solution is quite reliable and will help you avoid errors when creating emails for many email applications, but it requires more maintenance. The content of your newsletter can change, and you need to be more careful about where and what classes are used.

It is not superfluous to remind you that testing email templates is a guarantee that the recipients of your email will receive it in the form in which you want them to receive it.