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.
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. Get ready to learn:
Beware: There are other culprits of a broken email
Do email errors make you shudder? Blue links are just one way your email can look broken. Take a deep dive into what can break your email and the tips & tricks to stay true.
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 people with options for saving or interacting with information.
In recent years, Apple Mail has updated their handling of some of these links and no longer turns them blue. For addresses and times, iOS devices retain the original styling but add a dotted underline to indicate that these are clickable.
While this is a step forward for accessibility for some of the blue link issues, it does not solve all the problems because more than just addresses and times can be affected.
Most iOS versions of Apple Mail turn phone numbers, URLs, and email addresses blue—but leave physical addresses and times in the original styled color (red, in the example below).
In iOS 13, the content is still linked, but the original styled color is maintained:
In our testing, these things are prime candidates for becoming linked content (blue or otherwise):
- Email addresses
- Website URLs
- Phone numbers
The benefits of blue links: Should you remove them or not?
In each case, the information linked could be valuable to subscribers, 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 usability and accessibility, providing critical functionality.
This brings up the debate: Should we 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, anger stakeholders, and cause accessibility issues. On the other hand, people may 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 functionality—of 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, 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 manage.
So, how can email designers deal with blue links?
The best way to override auto-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. Then, add values such as underlines and on-brand colors to let people know the content is still clickable. Ideal for usability and accessibility.
This method has a lot going for it. You can:
- Set your own styles on text.
- Use different styles for different links—it doesn’t force one style across an email.
- Retain the functionality introduced by email clients and operating systems.
- Maintain the styling easily.
That’s a win-win for both you and your subscribers.
The only caveat? Different email clients do different things when auto-linking text, so you need multiple CSS rules to override styling.
Do your emails have blue links?
Always know when email clients update their email rendering with Litmus Email Previews. Preview your emails in all popular email clients and devices and spot errors before you send.
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:
Blog – Litmus