What are Blue links?
The blue links do precisely what you’d expect them to do: Email text formatted like a hyperlink (blue, underlined text) is called a hypertext link. These blue links are often used in email marketing, especially on mobile devices. They are made automatically by email clients and give recipients many ways to save or interact with content.
Apple Mail used to color these hyperlinks blue, but the program has since upgraded its system to no longer do so. When viewing an address or time on an iOS device, the formatting will seem the same as before, but a dotted underlining will be added to show that it may be clicked.
Even though this makes some blue links easier to find, it doesn’t solve all blue link problems because the problem is bigger than just addresses and times.
If you’re using Apple Mail on an iOS device, you may have noticed that the phone number, website, and email fields have been colored blue. However, the postal address and the time zone fields have been left the same.
Should you get rid of those blue links or not?
Subscribers may find the linked information useful, whether they’re looking up an address or a phone number to add to their contact list. Blue links, though irritating from a branding standpoint, are fantastic for usability and accessibility and provide vital functionality.
On the one hand, we value brand cohesion and uniformity in our email layouts. When email clients override our custom formatting, it might shock us, irritate our stakeholders, and create accessibility problems. However, recipients may come to rely on this feature and anticipate being able to act on the contents of an email.
So, how should those who create emails proceed?
Our recommendation is to replace the visual appearance of these links while leaving the functionality the same. The ideal solution for blue links would let us, not the operating system or email client, decide how to design these links while yet retaining the ability to perform actions on them automatically.
One may argue that erasing the blue, underlined style is taking things too far. However, there are significant accessibility issues with the default behavior that we can address. Take a look at this email’s footer for an example of an address with blue links:
It’s a typical layout, with white text on a black backdrop and a few subheadings to keep the eye moving upwards. The blue theme and the related information reduce contrast significantly. It will be incredibly challenging for anyone with visual impairments, or even those with exceptional sight utilizing a darkened screen or mobile device in bright sunlight, to take in that information. A useful function becomes a source of irritation.
Additionally, not all email programs handle automatic links in the same way. While blue links seem the most problematic, some customers keep the text color but add underlining. Phone numbers, but not physical addresses, may be linked by certain customers. It’s difficult to keep everything under control when there’s so much variance.
In that case, how should web developers code for blue links in emails?
The most efficient approach to bypass auto-link aesthetics
Embedded CSS to override automatic link style is the best solution we’ve discovered, while we’ve considered other options in the past like using spans and classes to target frequently-linked content or adding invisible characters into that text to disrupt the behavior. The next step is to use brand-appropriate attributes like underlining and color to indicate that the material is still clickable. Easily the best in terms of usage and convenience.
There are several benefits to using this approach. It is possible to:
1. Format text to your liking.
2. You aren’t limited to using just one link style across an entire email.
3. Maintain the advancements in features made by operating systems and email clients.
4. Easy to keep in shape.
5. That’s beneficial for your mailing list and you.
There is only one catch, though. Because of the wide variety in how auto-linked text is handled by various email clients, you will need to set up many CSS rules to override the default.
Changes to Apple Mail’s blue links
Apple Mail uses more than just the href property for building links around text. Here’s a straightforward illustration:
<a rel="noopener" target="_blank" href="#" x-apple-data-detectors="true">
In any case, all you have to do now is look for components that have certain properties and change the styles of those elements.
To ensure that any hyperlinks added by Apple take on the formatting of their parent element, you may include the following in your email’s style block.
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 present, but the text will be styled as you originally planned.
Assign a hex color code that works with your brand’s aesthetic to the color property (e.g. #77d6fc for light blue) and set the text-decoration property to underline to make it clear that the text is clickable.
Even though you may like to get rid of the blue auto-links for a pixel-perfect design, keep in mind that the recipients of your email are people who have subscribed to receive it. Addresses, dates, and phone numbers are clickable in email clients with the best intentions, a feature many welcome and anticipate. Keep them out in the open. Alter them, so they fit the style of your email. When you do this, your investors and your readers will be pleased.
