Quick Tip: Retaining Hyperlink Colors
Here is a scenario:
You have spent hours working out a brand new template, days even. Your design aesthetic choices reflect your brand and really power your message home to your subscribers. You have scoured your branding guidelines for your color choices and plugged all of those in to one cohesive, well-oiled machine (or template in this case). Next comes the testing phase. You place your cursor over the first hyperlink you find, click and… all of that work seems to be in vain due to a visited hyperlink defaulting to that strange purple color.
Certainly a dramatization of the situation, but you still don’t want this to happen. Fortunately for us, there is a solution to this predicament. The first thing you will want to do is ensure that your anchor tag ( seen as <a> ) has a style with the color attribute set to your intended hyperlink color. This would look something like this:
What we have done is make sure that when our email is rendered, the default hyperlink color is being overridden with our specified color (#ea5e5e which equates to a nice salmon color in this case). That is only the beginning, however, as in most cases when a subscriber clicks on this link it will default to purple when visited. Our last addition to the code is to wrap our link text in a <strong> attribute. What this attribute does is bold the text contained within its tags. This workaround allows our hyperlink to remain the specified color we would like, even when visited. If you do not want your hyperlink to be bolded, but would still like to make use of the benefit, all that needs to be done is have a style added to the strong tag specifying font-weight:normal; as seen here:
And that is your quick tip on retaining hyperlink color! For more design tips, check out more design blogs here.