Update It looks like the quirks are back, so please continue using attribute selectors as per our Responsive Email Design guide. Also, don’t forget to test!

We usually blog about email clients when things start breaking in them. But today, we thought that we’d turn things on their head by reporting on a few improvements – in Yahoo! Mail’s webmail client, no less.

But before we get to the beef, why even bother mentioning when things go right? While it’s unlikely that many of you will rush out to remove existing workarounds in your HTML email templates and campaigns, those who are starting from scratch will likely save time (and a couple of kb’s) by no longer having to code and test yet another ’email hack’. Secondly, we really want to encourage email client developers like Yahoo! to build the most user-friendly services they can – not just by knocking them when they miss the mark, but by recognizing their efforts when they touché. And last but not least, this is a sorely-needed glimmer of hope – Yahoo! Mail is a big player, with almost 10% market share – less than Outlook.com, but more than Gmail. When one of the biggies makes a move in the right direction, there’s a chance that the rest will follow. So, without any further hesitation…

No more .yshortcuts

For years now, we’ve been advocating the use of the .yshortcuts hack to ensure your link colors aren’t given the switcheroo by Yahoo! Mail. Well, it seems that .yshortcuts has taken a bow, at least for now. Brevity aside, leaving out .yshortcuts means one less strange class in your CSS styles to cringe about (and for your ‘knows-enough-to-be-dangerous’ clients to question).

Media query stylesheets are no longer applied by default

Around this time two years ago, it became very apparent to folks who we tinkering with responsive design that the ‘mobile version’ of their message was displaying in Yahoo! Mail. The workaround – using attribute selectors – reeked of desperation (at least to me), however it indeed solved the problem with few downsides.

After some recent tests with more regular-looking, non selector-fied CSS stylesheets, Yahoo! Mail seems to be correctly resolving commonly-used expressions like:

@media only screen and (max-device-width: 480px) { … }

As a curious side-note, Yahoo! Mail does appear to still ‘support’ media queries, however using a catch-all expression like @media screen { … } (as done in our tests) is really the opposite of device-targeting – a whole array of other email clients are likely to trigger it, too.

Now, this is likely to be old news – Yahoo! Mail was updated in mid-December, however it’s hard to say whether these fixes were applied by their team during, or after that big push. But what we do know is that not only has the Yahoo! Mail team been listening to our feedback, but countless newcomers to the email design game have been spared from the hair-tearing hackiness that supporting their client used to be.

A strong pat on the back goes out to everyone at Yahoo! Mail for patching up these quirks. Now, it’s over to you – which email client would you like to see improve, and how? Let us know in the comments below.

  • Mark Shingleton

    Dear god please improve Outlook … please …

  • Kevin

    Outlook for sure.

  • Troy

    Outlook 07-10 for sure, but Gmail needs to get on board with <style> content and background images.

  • B. Moore

    Outlook is the only answer anyone needs to say.

    how to fix it Step 1: Stop ignoring us.

    for the love of all things good, microsoft, wake the hell up its not 1996 any more.

  • Elliot Ross

    I think Gmail (particularly mobile versions) needs improving over Outlook, for a few reasons:

    – Gmail’s lack of media query support is one of the big challenges for responsive email design, plus it still has a few annoyances that could be ironed out (changing black links to blue for example)
    – we know where we’re at with Outlook, and it’s losing market share anyway. It’s fiddly, but it’s getting to the point where we can think along “graceful degradation” lines and accept support for things dropping out
    – even if Outlook were to be made perfect tomorrow, there would still be hundreds of thousands of installations that need updating, whereas a Gmail update would propagate much more quickly

  • Erik Woods

    Elliot,
    You can fix the changing black to blue by using #000001 instead of #000000.
    I believe you can also fix your Gmail media query woes by putting media=”all” on your <style> tag. At least for the Gmail native app. It won’t work in Gmail via web browsers since they don’t support anything but inline styles.

  • Erik Woods

    /sigh
    I hate the commenting system and wish you guys would integrate it into the forums somehow.

    My last comment got cut off, Elliot. What it said was something like:
    “I believe you can also fix your Gmail media query woes by putting media=”all” on your <style&gtl tags. It should work in Gmail’s native mail app, but Gmail in the web browser only accepts inline styles. More info on that here: https://www.emailonacid.com/blog/details/C13/the_android_mail_app_and_css_class_declarations

  • Mark

    Sorting ALL microsoft clients would be nice.

    Gmail too but I find the Gmail workarounds quicker and easier than the microsoft ones. Unless you use my favourite strap line
    <!–[if !mso]>Get a new email client

  • Sebastian Green

    It is great news about Yahoo, but at the same time for our clients its irelevant as Yahoo Mail does not have a massive user base in the UK.

    Outlook is number 1 here, especially in business scenarios.

    I doubt Microsoft will make any changes. They won’t listen to any feedback and they don’t have to. Their is no compertition for them. They already own the business e-mail client market.

  • Ros Hodgekiss

    Erik – Sorry about the commenting situation here, we’re looking into our options outside of ExpressionEngine, so hopefully we’ll get an overhaul happening at a later date. In the interim, we’re really hoping readers can use our forums where possible for code samples.

    Mark – While I haven’t seen any articles around (email client devs are a quiet bunch), I can tell you that their priorities are very different from ours. I think you’ll find that for the most part, the teams behind Gmail, Yahoo! et al are not a bunch of web geeks that get hung up on media query support, but engineers doing what’s perceived to be best for the business. In Outlook’s case, what’s best is ensuring that documents can be shared and displayed consistently between Microsoft’s applications, even if it’s at the expense of CSS support.

    That said, I’d be keen for someone from Microsoft to pipe up and prove me wrong!

  • Jared Armstrong

    This is great news anytime you can help change the culture that is email formatting. It can be a complex operation to keep nice HTML emails working across all audiences.

  • Dom Milne

    For me, giving the mobile clients a bit of a shake up getting some media query action on the non-native email apps might be nice!

  • Eyal B

    ATTN :
    Outlook 2013 — You’re <td> line-height default is ‘way too’ high. Around 18px (no matter what you’ve declared) . PLEASE FIX ASAP!

  • Robert Bush

    Yes, outlook!

  • Kate

    Any chance Outlook.com will stop using those giant grey, alt tag/text obscuring boxes?

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free