Prevent Yahoo! Mail from displaying the mobile version of your email

April 28, 2011

Soon after publishing our recent post on 'Mobile email design in practice', it was pointed out to us that using @media queries to optimize email for mobile devices has a glaring downside. As it turns out, Yahoo! Mail inexplicably gives precedence to the @media stylesheet, using the CSS styles defined within, over any inline styles in the HTML email. The result is predictably sub-optimal:

Narrow email in Yahoo! Mail

Thankfully, there's a straightforward, if less-than-elegant solution. It turns out that Yahoo! Mail ignores any styles that use attribute selectors, meaning that you can use these in your @media queries to ensure that Yahoo! Mail doesn't override existing inline styles with your @media -defined ones. For example, you would change:

@media only screen and (max-device-width: 480px) {
   ...
   table.table, td.cell { width: 300px !important; }
   table.promotable, td.promocell { width: 325px !important; }
   ...
} 

...to the attribute selector format, like so:

@media only screen and (max-device-width: 480px) {
   ...
   table[class=table], td[class=cell] { width: 300px !important; }
   table[class=promotable], td[class=promocell] { width: 325px !important; }
   ...
} 

The result for us was a restored-width email newsletter in Yahoo! Mail that displays consistently across the most popular webmail and desktop email clients.

Restored newsletter

Thankfully, this solution doesn't affect the display of mobile-optimized email in the iPhone and Android's respective Mail email clients. However, it does bung up how emails render in Yahoo! Mail's mobile browser client... If that's a concern to you.

Of course, the danger is that Yahoo! Mail will someday support attribute selectors and render this technique useless. So keep testing and hope that they properly implement @media queries well before then.

Many thanks to mobile email design legends Ed Melly and Stefan Velthuys for outlining this excellent mobile optimization for our monthly newsletter. We hope this helps you get your HTML emails close to pixel-perfect in both desktop and mobile email clients alike.

Posted in: Tips & Resources

9 Comments

Chris
April 28, 2011 1:34pm

Great stuff! Thanks for the writeup, Ros. I’d add that depending on the specific alterations you’re performing with @media, making the stylesheet external can help, as well.
Ed Melly
April 28, 2011 3:42pm

@Chris - the problem with using an external stylesheet is that it’ll only be downloaded when the recipient chooses to view images (otherwise it could be used as a form of open tracking).

Where the external stylesheet amends the layout, you see a jump between the desktop and mobile-optimised versions, which can be a bit jarring (at least in the native Android client, where images aren’t enabled by default).
ZHBill
May 5, 2011 2:16pm

merci dans le but de cette nouvelle, un article pratique rapide et complet mais super.
Ted Goas
May 6, 2011 4:51pm

So now I have to go back and fix my emails… :)

Seriously, though, hap tip to Ed, Stefan, and CM! I’m currently working with a client who has a lot invested in Yahoo! email addresses. So this is quite timely!
Stephen
May 7, 2011 4:39pm

I prefer to use the div:not selector…

e.g.

div:not(#cg_msg_content) .footershow {
width: 300px !important;
}
Tim Locke
May 27, 2011 3:28pm

What a pain in the @ss!
Phil
June 10, 2011 6:03am

Another solution is to break your subscriber list into two segments
1. Yahoo email addresses (contains: yahoo),
2. Not yahoo email addresses (does not contain: yahoo).

And send out two versions of your campaign, one with the @media styles and the other with out.
andipandi
June 29, 2011 6:08pm

Thank you, I was wondering what was up with that. Also, any tricks on getting rid of the links they spam your emails with? I’ve got .yshortcuts rewritten, but the <a> link is outside of that and always returns an underline. I want the links I’ve created to have an underline, not these impostors.
Ros Hodgekiss
June 30, 2011 1:01am

@andipandi - Not that I know of yet. By the way, it turns out that .yshortcuts no longer works in Yahoo! Mail Beta - we advise you use this method to set your link colors instead.

Blog