Browse by...
Home Resources Blog

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, 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.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free