Have you notice that links in HTML emails have started showing up blue in Yahoo! Mail. This has been documented across a number of blogs alongside solutions to this rendering glitch. First we will explain what is happening, then we will provide two solutions to restoring your links to the colour you originally intended.

How is Yahoo! Mail changing my link colours?

Well, Yahoo! Mail is now applying a class called .yshortcuts and surrounding the links within your HTML emails with <span> tags. The .yshortcuts class makes all impacted links a blue colour (#366388, to be exact), this could spell bad news for your design.

Yahoo! Mail link colouringDon’t fret, below are two great solutions to override Yahoo! Mail’s choice of link colour.

Solution #1: Beat ‘em by out stylin ‘em

Since Yahoo! Mail is automatically adding a .yshortcuts class and <span> tags, you can simply override Yahoo’s ambitions with your own styles. In the <head> section of your code, add the following:

<style type="text/css">
.yshortcuts { color: #CCCCCC; } /* Body text colour */
.yshortcuts a span { color: #00FF00; } /* Link text colour */

Where the colours defined are appropriate to your design. In your body, wrap your body copy and links in a <div> tag with the class .yshortcuts like so:

<div class="yshortcuts">There that will stop Yahoo! Mail from styling my links, <a href="...">click here</a></div>

You have just overwrote any link colour styles that Yahoo! Mail applies.

Solultion #2: Roll your own span tags

The second solution is to surround every link with a <span> tag with inline styles, like so:

<a href="..." style="color:  #808080;"><span style="color: #808080;">Link</span></a>

It will do the trick, however it does result in a lot of repetitive coding.

Should I tweak my campaign?

Wander on over to your email client usage reports in your Three Squared Email account. For most of our clients they will see that Yahoo! Mail accounts for over 14% of email client market share (just remember this percentage may be more or less, depending on who is on your lists).

You might want to consider running your newsletters through the Three Squared Email design and spam tests to see how they display in Yahoo! Mail.

Errr, blue, dotted links? Can I remove them?

Yahoo! Mail also has also started to pick up keywords in emails and linking them to advertising popups (look for the blue, dotted links). Unfortunately, there is no known way to disable this behaviour. Yes we agree, this is potentially distracting and confusing for your subscribers.

Whether you have 5 or 5,000 Yahoo! Mail subscribers on your list, add this to your HTML email testing checklist.


Got something to add?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>