Type E:
05. The Blue Link Issue
|
|
Enabling the subscriber to call a telephone number directly from an email on their iPhone, or add a date into their calendar directly from an email on their iPad, is a great way of adding value to their experience. Unfortunately, iOS’s execution of this valuable feature, in its creation of ‘blue links’, has its flaws.
The shade of blue it applies to blue links, for example, is rarely consistent with an emails colour palette, and the content it sometimes creates blue links from, such as order numbers, isn’t helpful to the subscriber, to say the least. In this issue, I’ll look at how you can fix these iOS ‘quirks’, and get the best out of blue links.
|
1. Identifying blue links. |
|
Before you can begin to work with the blue links in your email, you need to identify them. To do this, send a quick test of your email, using a sending tool like PutsMail, to the relevant iOS device, or use a testing tool, such as Litmus or Email on Acid.
|
2. Wrapping the affected pieces of text within pairs of <span> tags. |
|
Once you’ve identified the blue links, wrap the affected pieces of text within pairs of <span> tags, and add a class of blueLink inside each opening <span> tag.
|
<span class="blueLink">3 March 2016</span>
|
|
NEW BOOK: A Type of Email |
A Type of Email
By Paul Airy
Foreword by Justine Jordan
A handbook for working with HTML typography in email, packed with useful tips.
|
|
|
|
Most blue links you’ll want to ‘hide’, such as those applied to order numbers. To do this, you need to restyle them using the blueLink class you’ve created, inserting the styling inside the <head>. Follow the blueLink class name with an a, as you’re styling an anchor element. Apply color
styling consistent with the text that surrounds the blue links and text-decoration:none; to hide the underlining. Apply the !important declaration to both, to override the iOS styling.
<head>
<style type="text/css">
.blueLink a {color:#666666 !important; text-decoration:none !important;}
</style>
</head>
|
While the blue links have been restyled to ‘hide’ them, they remain enabled, meaning they can be ‘accidentally’ selected. To disable the blue links, apply the style pointer-events:none;. Again, apply the !important declaration to override the iOS styling.
<style type="text/css">
.blueLink a {color:#666666 !important; text-decoration:none !important; pointer-events:none !important;}
</style>
|
|
Upper Case ‘D’Font: Adobe Caslon Pro.- Serif
- Bowl
|
|
|
4. Creating additional blue link classes. |
|
If blue links are being applied to more than one text colour in your email, black and white, for instance, you’ll need to create a class for each of the colours that’ve been affected, styling them accordingly.
|
.blackLink a {color:#666666 !important; text-decoration:none !important; pointer-events:none !important;}
|
|
.whiteLink a {color:#ffffff !important; text-decoration:none !important; pointer-events:none !important;}
|
|
|
Some blue links you’ll simply want to restyle so that their colour is consistent with your emails colour palette. In such cases, create ‘bespoke’ blue link classes to style content that genuinely adds value for the subscriber – telephone numbers for example. Don’t apply text-decoration:none; or pointer-events:none; in these instances, as you’ll want them to function as iOS intended.
|
.telephoneLink a {color:#ee0000 !important;}
|
|
|
One final word of warning is that blue links can easily be missed when an email is amended. ‘From’, ‘to’ and ‘until’ for example, are all words that can slip outside the blue link styling, in the process of making revisions to your email, potentially ruining it. So, make sure you test right until the send! ■
|
|
Type E: is an email newsletter devoted to typography on email, created by Email Designer and Developer, Paul Airy. Please email your thoughts, suggestions and questions to type-e@beyondtheenvelope.co.uk. Thank you for subscribing!
|
|
|
|
|
