The Yourzine Email Doctor: Purple link woes
Got a problem with your email? The front-end developers at Yourzine are here to help! In each issue of our Email Doctor blog, we’ll explore a common issue which developers are finding when developing emails, diagnose the cause of the problem and prescribe a fix for it!
“I am building an email which has a white text link on a black CTA button. I have defined the color attribute with the hex value #ffffff within the in-line style on my anchor tag, but when I click on the link in Outlook 2013 (not to mention Outlook 2010 and 2007!) the linked text changes to purple, meaning that the link is barely visible once it has been clicked on. I’ve tried wrapping a span tag around the linked text and defining the color attribute here, but it still doesn’t solve the issue! Is there a way to fix this?”
Pseudo classes such as :visited and :hover are not supported in most email clients, so it is difficult to target and define specific styles for this. Despite this, most email clients will simply fall back to the defined colour on the anchor tag for all pseudo states. However, Outlook 2013, 2011 and 2007 use Microsoft Word to process HTML email, and therefore render the default Microsoft Word style for the :visited pseudo link class. The result of this is that when a link has been clicked on within this client, it turns purple. It is a frustrating issue, because, as with most email clients, pseudo classes defined in your CSS will be ignored by Outlook 2013, 2011 and 2007 entirely.
Whilst <span> tags do not appear to over-ride the default pseudo styles set by the Microsoft Word processor that Outlook uses to render emails, <strong> tags can make this possible. So, to fix this particular issue, we need to use a clever hack which involves wrapping your linked text in a set of <strong> tags inside your set of anchor ( <a> ) tags. Next, declare an in-line color attribute of “#ffffff” within the <strong> tag. If you do not want boldened link text (which the <strong> tag sets by default), you can resolve this issue by declaring the style attribute “font-weight:normal” within the in-line styles on your set of <strong> tags:
Now, when we test in Outlook 2007 / 2011 / 2013, the text link remains white as expected, even after the user has clicked on it:
WHERE ARE PSEUDO CSS SELECTORS SUPPORTED?
Pseudo CSS selectors (such as those which target a visited or active link) may be a nice way to enhance your email, but as you can see from the table below (taken from this blog post by Email on Acid) they are not widely supported across the most popular email clients:
Therefore, if you would like to use pseudo classes in your email, our advice would be to use them as an enhancement rather than a key feature of your email — will the email still work well if the pseudo style is not supported? If the answer is “no”, you may need to reconsider the use of pseudo styles within your email campaign.