Category Archives: Litmus

HTML Email – Targeting Yahoo Mail browser CSS

by ,

Yahoo! mail, specifically in Firefox and Chrome, ignores your media query declaration along with all of its conditional statements. It then renders each of the styles as if they are outside of the media query to begin with. This can become problematic when you are developing emails that have a logo in your footer, and you want to position it based on desktop or mobile view. See the image below as an example:

Logo that should not appear in desktop view - Yahoo! Mail

In this situation, the logo underneath the hyperlinks should be hidden, only appearing on mobile email clients. Here is the initial HTML.

HTML


<a href="http://www.website.com" target="_blank" style="text-decoration:none;color:#ffffff;">
   <img src="logo.png" alt="logo" width="116" height="31" class="show-mobile" style="display:none; border:none; border-style:none;"/>
</a>

The inline style of display:none; and class=”show-mobile” are in bold. The former is intended to hide the logo under the links in desktop view, while the latter is meant to display the logo in mobile view.

Below is the source code that is generated by the Yahoo! email client.

yahoo! email html source code

Yahoo! mail will prepend the following string “yiv##########” to your inline css that is used to show the element in mobile devices, as you can see it does so with class=”show-mobile”.

Despite the fact that there is now a Yahoo! media query that will fix this bug, attribute selectors are still not supported. Using a CSS rule as shown below, will not work when trying to target the Yahoo! generated CSS class.

CSS


[class^="yiv"][class$=”show-mobile”] {
   display: none;
}

Just for kicks, even if you explicitly create a rule for the generated class, it will still not work:

CSS


[class=”yiv0779069323show-mobile”]
   display:none;
}

Using the Yahoo! media query will do the trick and hide the logo.

CSS


@media screen yahoo {
   span[class="show-mobile"] {
      display: none !important;
   }
}

See the intended result below.

Logo in footer for desktop view - Yahoo! mail

Please note that I discovered that this problem only happens in Firefox and Chrome only, not in IE.

The Email on Acid website has two terrific articles on their website that were of great help when trying to solve this problem, https://www.emailonacid.com/blog/article/email-development/9_ways_to_prevent_yahoo_headaches#yahoo_tip8 and https://www.emailonacid.com/blog/article/industry-news/yahoo_mail_now_supports_media_queries.

HTML Email and Litmus – Prevent Plain Text Email Hyperlinks From Turning Blue

by ,

This article focuses on how to prevent plain text email hyperlinks from turning blue when testing email clients using an email design and marketing tool such as Litmus. This post will also be useful for situations where you want to prevent hyperlinks from turning blue.

Please see the image and HTML below for a visual. The URL has been bolded for illustrative purposes and is not part of final solution.

plain text hyperlink

HTML


<tr>
 <td valign="top" align="left" width="20" style="font-size: 1px; line-height: 1;">&nbsp;</td>
 <td valign="top" align="left" width="560" style="font-size: 14px; color:#6d6e71;">Ut sit amet consectetur justo, vel convallis ante. Phasellus at augue eu mi posuere rhoncus. Nullam quis pretium tellus. Quisque a odio vulputate lacus suscipit blandit ut vitae dolor http://www.website.com/page/document.pdf. Curabitur sed purus non ante eleifend aliquet id ut lacus. Aliquam erat volutpat. Duis tincidunt, enim nec eleifend condimentum, tellus lectus tempor felis, eu dictum magna elit ut arcu. Curabitur sodales, nisi eu lobortis consequat, ligula nulla placerat augue, ac vehicula quam arcu at ex.</td>
 <td valign="top" align="left" width="20" style="font-size: 1px; line-height: 1;">&nbsp;</td>
 </tr>

The following list of email clients will show a blue colored plain text hyperlink.

  • Apple Mail 9
  • Apple Mail 10
  • all versions of Outlook after 2003
  • Gmail App(Android)
  • Gmail App(iOS)
  • Inbox by Gmail(iOS)
  • all iPhones and iPads
  • AOL all browsers
  • Gmail all browsers

Here is what it looks like in Outlook 2016:

outlook 2016 plain text hyperlink blue

In most cases inserting a zero width joiner &#8205; or &zwj; within the plain text URL will solve the issue. Normally you would insert the zero width joiner in the www and the .com as shown here <a href="http://www.website.com/page/document.pdf">ww&zwj;w.website.co&zwj;m/page/document.pdf</a>. We normally do not precede linked text inside an anchor element with the http:// protocol, since it is only needed for the href attribute. However, for promotional emails or for references, URL’s are usually entered as plain text with the http:// preceding it.

When using plain text URLs with the http:// preceding it, placing a zero width joiner in the www and .com parts of the string will resolve the issue on email clients such as iPhone and iPads, but may yield strange results. See below:

HTML


<tr>
 <td valign="top" align="left" width="20" style="font-size: 1px; line-height: 1;">&nbsp;</td>
 <td valign="top" align="left" width="560" style="font-size: 14px; color:#6d6e71;">Ut sit amet consectetur justo, vel convallis ante. Phasellus at augue eu mi posuere rhoncus. Nullam quis pretium tellus. Quisque a odio vulputate lacus suscipit blandit ut vitae dolor http://ww&zwj;w.website.co&zwj;m/page/document.pdf. Curabitur sed purus non ante eleifend aliquet id ut lacus. Aliquam erat volutpat. Duis tincidunt, enim nec eleifend condimentum, tellus lectus tempor felis, eu dictum magna elit ut arcu. Curabitur sodales, nisi eu lobortis consequat, ligula nulla placerat augue, ac vehicula quam arcu at ex.</td>
 <td valign="top" align="left" width="20" style="font-size: 1px; line-height: 1;">&nbsp;</td>
 </tr>

Using the code above reveals a hyperlink that is partially blue in Gmail App (iOS):

Gmail-app-iOS-partially-blue-hyperlinkGmail-app-iOS-partially-blue-hyperlink-zoomed-in

The solution that seems to work for most, if not all, email clients, is to insert the zero with space joiner inside of the http://, the www, and the domain extension (.com, .net, .biz), at the very minimum. You may need to place it many locations as possible, such as after the dots, etc. By strategically placing them in certain parts of the URL string, you will avoid it appearing partially blue in some email clients. See below:

Solution

HTML


<tr>
 <td valign="top" align="left" width="20" style="font-size: 1px; line-height: 1;">&nbsp;</td>
 <td valign="top" align="left" width="560" style="font-size: 14px; color:#6d6e71;">Ut sit amet consectetur justo, vel convallis ante. Phasellus at augue eu mi posuere rhoncus. Nullam quis pretium tellus. Quisque a odio vulputate lacus suscipit blandit ut vitae dolor ht&zwj;tp://ww&zwj;w.webs&zwj;ite.&zwj;co&zwj;m/page/document.pdf. Curabitur sed purus non ante eleifend aliquet id ut lacus. Aliquam erat volutpat. Duis tincidunt, enim nec eleifend condimentum, tellus lectus tempor felis, eu dictum magna elit ut arcu. Curabitur sodales, nisi eu lobortis consequat, ligula nulla placerat augue, ac vehicula quam arcu at ex.</td>
 <td valign="top" align="left" width="20" style="font-size: 1px; line-height: 1;">&nbsp;</td>
 </tr>

Gmail-app-iOS-gray-hyperlinkGmail-app-iOS-gray-hyperlink-zoomed-in

This article may be unnecessarily long, however, as you become more experience with programming HTML emails, hacks for some issues may not resolve the worst case scenario. The worst case scenario here is that we needed to place a plain text URL, that is not hyperlinked, in a reference section of an email.

We may continue to expand on this post in the future. Hoping that this is a great help to you all!