If you are wondering why your links have been suspiciously changing colors in Yahoo! Mail recently, we have the answer for you! Better yet, we have a solution that will restore the desired styles to your links.
First, a quick explanation. Due to some recent changes in the way Yahoo! Mail highlights links, all
Many of you may be saying, "So? Aren't links blue already?" For most, this is true. If you use the ExactTarget content editor to create content areas for your email, chances are your links are in fact already blue. Most links default to #0000ff, whereas Yahoo!'s links are #366388. Thus, this is a very minor difference and probably will not be a issue for the vast majority of emails.
However, if you use HTML paste, you may fall into one of two categories. The first is those who use HTML paste but still have a relatively simple email, wherein all links are the same color (other than the default blue). For these cases, you will want to employ the fix that a savvy user over at Campaign Monitor posted last week. This solution places a bit of embedded CSS in the header and then references that style with a class property in a div tag.
Figure 1: Styled <a> links modified by Yahoo!
Lastly, if you use HTML paste but have more complicated emails with links of multiple different colors (see Figure 1), you'll need to use the solution we use internally for the emails we code. It requires you to put a bit more code with each and every link, but it's worth it. Instead of just including a
Figure 2: Styled <a> links with the addition of the <span> tag.
Original code:
Corrected for Yahoo!:
One additional note: only http URLs will trigger the color-changing effect in Yahoo! https and mailto URLs will render normally without the addition of the
Since most of the customers we work with have a number of different link colors included in their email designs, we've found that the
Super-Geeky Footnote:
We found one additional way to deal with this link-coloring issue. The great part? It completely removes all Yahoo!-specific coloration and Yahoo! Shortcuts, so your links will look exactly as coded, and it requires no extra hand-coding. The not-so-great part? It's a weird workaround. First, you have to use HTML paste. Second, and most importantly, your raw HTML email (before send) must be at least approximately 67,000 characters – or 67KB in size – to utilize this "hack." Any email of this size or larger will not be affected by Yahoo!'s colors and Shortcuts. Keep in mind that any AMPscript in your email is removed from the email by ExactTarget before it's actually sent, so only html tags and content (text) count toward the minimum file size. In our testing, this method works reliably every time, but it's just a strange method with limited applications. Enjoy!
Want to know more about designing and developing one to one marketing emails? Download the new Email Design Kit which includes a number of email design best practices.
Michael Thom
ExactTarget Campaign Solutions Team
First, a quick explanation. Due to some recent changes in the way Yahoo! Mail highlights links, all
<a href="http:..."></a> tags will show as blue (specifically, #366388), regardless of any style="color: #xxxxxx" properties you may have in the <a> tag or any containers (such as the three header links and the four navbar links in Figure 1 below). You will see that it does not affect any text-decoration properties present, though. (Please note this is a separate, though similar, topic from the Yahoo! Shortcuts that are automatically added as context-sensitive, dotted-underline links; see our blog post on this topic for more information.)Many of you may be saying, "So? Aren't links blue already?" For most, this is true. If you use the ExactTarget content editor to create content areas for your email, chances are your links are in fact already blue. Most links default to #0000ff, whereas Yahoo!'s links are #366388. Thus, this is a very minor difference and probably will not be a issue for the vast majority of emails.
However, if you use HTML paste, you may fall into one of two categories. The first is those who use HTML paste but still have a relatively simple email, wherein all links are the same color (other than the default blue). For these cases, you will want to employ the fix that a savvy user over at Campaign Monitor posted last week. This solution places a bit of embedded CSS in the header and then references that style with a class property in a div tag.
Figure 1: Styled <a> links modified by Yahoo!
Lastly, if you use HTML paste but have more complicated emails with links of multiple different colors (see Figure 1), you'll need to use the solution we use internally for the emails we code. It requires you to put a bit more code with each and every link, but it's worth it. Instead of just including a
style="color: #ff0000;" property within the <a> tag, add a <span> tag around the link text, inside the <a> tag, and drop that style property within the <span> tag as well as the <a> tag (see Figure 2 below).Figure 2: Styled <a> links with the addition of the <span> tag.
Original code:
<a href="http://www.exacttarget.com" style="color: #333333;">Link</a>Corrected for Yahoo!:
<a href="http://www.exacttarget.com"><span style="color: #333333;">Link</span></a>One additional note: only http URLs will trigger the color-changing effect in Yahoo! https and mailto URLs will render normally without the addition of the
<span></span> tag.Since most of the customers we work with have a number of different link colors included in their email designs, we've found that the
<span> tag solution is the best for us, even though it requires interacting with each individual link. By including a <span> tag with the color property inside the <a> tag, we ensure the link will display with the desired color. A small inconvenience, this method will keep your emails looking great!Super-Geeky Footnote:
We found one additional way to deal with this link-coloring issue. The great part? It completely removes all Yahoo!-specific coloration and Yahoo! Shortcuts, so your links will look exactly as coded, and it requires no extra hand-coding. The not-so-great part? It's a weird workaround. First, you have to use HTML paste. Second, and most importantly, your raw HTML email (before send) must be at least approximately 67,000 characters – or 67KB in size – to utilize this "hack." Any email of this size or larger will not be affected by Yahoo!'s colors and Shortcuts. Keep in mind that any AMPscript in your email is removed from the email by ExactTarget before it's actually sent, so only html tags and content (text) count toward the minimum file size. In our testing, this method works reliably every time, but it's just a strange method with limited applications. Enjoy!
Want to know more about designing and developing one to one marketing emails? Download the new Email Design Kit which includes a number of email design best practices.
Michael Thom
ExactTarget Campaign Solutions Team
Comments for Design Tip of the Week: Changes to Yahoo! Mail link styling
blog comments powered by Disqus