email-bugs icon indicating copy to clipboard operation
email-bugs copied to clipboard

Yahoo! Mail app for Android strips styles from the first <head> tag

Open jkupczak opened this issue 8 years ago • 6 comments

<html>
  <head><!-- Yahoo App Android will strip this --></head>
  <head>
    <meta ... >
    <style>
      your styles
    </style>
  </head>
  <body>
    your content
  </body>
</html>

Using an empty <head> tag first will prevent Yahoo! Mail app for Android from stripping out your styles.

Use this with caution. Some ESPs will process your code before sending it. In many cases this involves accepting the first <head> tag and deleting the rest. MailChimp for example will do exactly this, leaving you with no <style> tag.

jkupczak avatar Dec 13 '17 20:12 jkupczak

Ha-ha, nice abuse. Really, impressive. What about other email clients? We can get some unpredictable problems with using this method. Targeting email client with @yahoo in email address isn't safe

dudeonthehorse avatar Dec 13 '17 20:12 dudeonthehorse

I only just learned about this today. I found the Pine Email Framework which mentions it under their Meta tags section here: https://thememountain.github.io/pine/index.html#meta-tags

They don't go into a lot of detail about it, but I managed to track down this page that explains it further: https://mosaico.io/email-client-tricks/double-head-trick-yahoo-app-android/

I've tested that it works in the Yahoo! Mail app, but not whether or not it breaks other clients. They claim that it didn't break anything in other clients.

jkupczak avatar Dec 13 '17 21:12 jkupczak

Thanks for links.

I'll do the test in most popular email clients in Russia:

  • mail.ru
  • mail.yandex.ru
  • mail.rambler.ru

I'm interesting for result in yandex mail client. It's still strips styles from <head> on all platforms

dudeonthehorse avatar Dec 13 '17 21:12 dudeonthehorse

Method not useful with Mailchimp. We losing the second <head> element in different clients includes Gmail

dudeonthehorse avatar Dec 14 '17 15:12 dudeonthehorse

@dudeonthehorse

Which clients are you losing the <head> in? I use MailChimp as well and it works fine for me on the Gmail website in Google Chrome as well as the official Gmail app on Android. This was done by sending test emails as well as running the full campaign.

I tested again using MailChimp's Inbox Preview powered by Litmus. The styles I placed in the second <head> element worked fine in Apple Mail 9, 10, Outlook 2000/02/03/07/10/11/13/15, AOL (Chrome), Gmail (Chrome), Google Apps (Chrome & IE), Office365 (IE), outlook.com (IE), and Yahoo! (IE).

jkupczak avatar Dec 14 '17 16:12 jkupczak

As of July 2018 MailChimp now processes your code with what they call a "purifier" prior to sending. You cannot use this trick with MailChimp.

jkupczak avatar Aug 13 '18 19:08 jkupczak