How to Remove Blue Links in HTML Emails

[ 0 By

Blue links in email: They’re a helpful usability feature, but far too often cause headaches for email marketers looking to design thoughtful, on-brand campaigns. 

Over the years, we’ve seen multiple ways of handling blue links in HTML emails, from simple to complex. We’ve even posted multiple articles on handling blue links in the past, from overriding styles on iOS to dealing with Gmail’s auto-linking behavior

But which techniques work the best? And how can marketers ensure a beautiful email design without sacrificing useful functionality in an email? In this guide, we’ll look at what blue links are and the best way to prevent them from ruining your own emails.

What are blue links?

Blue links are exactly what they sound like: Text in an email that takes on the default blue, underlined styling common to hyperlinks. In email marketing—especially on mobile devices—these blue links are automatically created by email clients to provide users with additional options for saving or interacting with information. 

The key to understanding blue links is identifying which text is most likely to be auto-linked and styled. In our testing, these things are prime candidates for becoming blue links:

  • Addresses
  • Dates
  • Email addresses
  • Website names
  • Times
  • Phone numbers

In each case, the information linked could be valuable to users, whether they want to add a phone number to their contacts list or look up an address online. While annoying from a branding perspective, blue links are actually great for users and provide critical functionality.

This brings up the debate on whether or not we should be overriding this behavior in the first place. 

On the one hand, we want our email designs to stay consistent and on-brand. Email clients overriding our own styling can cause surprises and anger stakeholders. On the other hand, users rely on this functionality and expect to be able to take action on information in an email.

So, what should email designers do? 

It’s our opinion that overriding the styles—but not the functionalityof these links is the best approach. The ideal solution for blue links should retain the ability to take action on those automatically generated links but allow us to style those links as we see fit, not the operating system or email client. 

Some would argue that overriding the blue, underlined styling is going too far. However, the default behavior has serious accessibility problems that we can combat. For example, look at this email footer, with blue links added to the address:

It’s a common design: White text on a black background, with small text to keep the focus on the content above it. When information is linked and the blue styling is applied, the contrast is extremely low. Anyone with visual impairments—or those with excellent sight using a dimmed screen or mobile device in a sunny setting—will have an extremely difficult time consuming that information. A helpful feature turns into a frustrating experience. 

Not all email clients treat auto-linking the same, either. While blue links are the most common culprit, some clients maintain the font color but add a subtle underline. Some clients link telephone numbers but not addresses. With all of that inconsistency, it can be frustrating to deal with.

With all of that in mind, how can email designers deal with blue links?

The Best Way to Override Link Styling

Although we’ve looked at different solutions in the past—like targeting commonly-linked text with spans and classes, or inserting non-visible characters into that text to break the behavior—the best solution we’ve found is to rely on embedded CSS to override automatic link styling. This method has a lot going for it:

  1. It allows designers to set their own styles on text
  2. Designers can use different styles for different links—it doesn’t force one style across an email
  3. It still retains the functionality introduced by email clients and operating systems
  4. It’s easy to maintain

The caveat is that different email clients do different things when auto-linking text, so we need multiple CSS rules to override styling.

Overriding Blue Links in Apple Mail

When creating links around text, Apple Mail adds additional attributes to those links beyond the usual href. A simple example is the following:


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

Fortunately, we can target elements with specific attributes and override styling for those elements. In the style block of our email, we can add the following to target Apple-added links and force that text to inherit the styling from its 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 will still be there, but the text will be styled as intended.

Overriding Blue Links in Gmail

Instead of adding attributes to auto-linked text, Gmail does something else entirely. When processing the HTML of an email, Gmail will convert the doctype to an underline element (u). Knowing this, we can then add a hook into our own HTML to allow us to target elements only for Gmail. This is commonly done by adding an ID to the body element.


<body id=”body”></body>

Then, we can target all of the links contained within the body in Gmail with the following, overriding any added styling in the process:


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;
}

It uses the exact same CSS properties as the Apple Mail trick, just specifically applied to Gmail. 

Overriding Blue Links in Samsung Mail

Samsung Mail uses a similar technique to Gmail. Instead of converting one element to another, though, Samsung Mail will add a specific ID to the email called “MessageViewBody.” Just like with Gmail, we can target that ID and any links contained within:


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

Again, the exact same CSS properties are used as before. While it would be convenient to be able to chain those CSS selectors into one rule, Gmail strips CSS using attribute selectors, so the fix would be removed from Gmail, allowing blue links to roam free. Therefore, we should keep all three rules separate. The good news is that, once added to email templates, we don’t need to do anything additional in our code to remove blue links from most email clients. 

Handling Edge Cases

As most of us know, there are always edge cases when it comes to email design. Blue links are no different. Some email clients will still auto-link text and the three clients above could very easily introduce an update that breaks those fixes. For these edge cases, we can take a different approach. 

This technique involves wrapping auto-link candidates with an element that is then targeted via CSS in the head of an email. The container element has a class applied for targeting. Before designers figured out they could use the x-apple-data-detectors hack, this trick was commonly used for Apple Mail blue links, so you’ll commonly see something like “appleLinks” used for the class, but it can be anything. 

In our example, we’ll use the class “blueLinks”:


<p class="blueLinks">+1 (800) 123-4567</p>

Since we know that email clients will be adding a link within that element, we can target it in the CSS and override specific CSS properties:


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

This can be a very robust solution but it requires more maintenance. Since the content of an email can change frequently, tracking where those classes are applied and ensuring that all suspected text is accounted for can be time-consuming and prone to errors. 

That’s why we typically recommend using the three embedded CSS solutions above, falling back to the class-based solution only when testing shows a need for it.

Test Your Emails Today

Frequent email client updates and changing content means blue links can pop up anytime. Test your campaigns for blue links in 90+ different clients with Litmus. Start a free trial today and find blue links and other issues before your subscribers do.

Start testing today →

Have alternative blue link fixes? Comment below so we can test them out!