The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

iOS: Banning Blue Links

iOS: Banning Blue Links

iOS is a wildly popular mobile platform. 38% of people open emails on an Apple device, so it’s important for designers to make sure their emails look great on iOS. One of the most frustrating challenges designers encounter on iOS is Mail turning phone numbers, addresses, dates, and even random words like “tonight” into links.

While it’s handy for users looking to quickly add a date to their calendar or address to their contacts, the default underlined blue links are often ugly and unreadable within the context of a well-designed HTML email.

The Problem

Looking at this test email, you can see how iOS Mail automatically links addresses, phone numbers, and dates. Despite none of these things being coded as hyperlinks, they are displayed in the default underlined blue that we are all used to.

While this isn’t a huge problem for simple transactional emails or plain-text messages, it can become an issue for both branding and readability in marketing campaigns.

The Fix

So how do you prevent this behavior on iOS devices?

The best, most reliable solution is to wrap the offending text in a span and use CSS to override Apple’s default behavior.

That's looking better.

Taking a simple date as an example, let’s wrap it in a span with a class of appleLink:

<span class="appleLink">November 6</span>

Then, in the head of your email, you will want to target that class and the child a tag and style your text accordingly:

It’s important to note that, even though the text now looks correct, the links are still there. Tapping on any of the links will trigger the intended behavior. Most designers will style these links to look like the surrounding text, but if you want to make these links visible to users, you can style them using that same technique to better fit into your overall design.

Further Reading

This isn’t the only technique for banning blue links on iOS devices, but it is the best one. If you want to investigate other methods, check out some of these resources:

Unless it's a case where it legitimately doesn't make sense for the content, i'd recommend against "hiding" this functionality by styling them to look exactly like surrounding text. That functionality is there for a reason and can be very useful. Make them look nicer sure, but keeping it obvious that an address, for instance, is clickable is a feature not a bug.

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Your free Community account includes access to the Litmus Community, as well as limited access to Litmus Builder. Check out the entire Litmus Email Creative Platform when you sign up for a free 7-day trial.