Quick Tip: Retaining Hyperlink Colors

Alex Gorton

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.

img_01

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:

img_02

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:

img_03

And that is your quick tip on retaining hyperlink color! For more design tips, check out more design blogs here.

About the Author
Alex Gorton

As a Digital Marketing Designer, Alex is tasked with the creation of client templates, educating clients on design best-practices and assisting with internal marketing needs. Out of the office, Alex is an self-proclaimed adventurer, snowboarder and tinkers on his custom-built computer.