Hey all!

We just sent out the first Litmus newsletter of 2017 (you can see it here in Builder). We like to experiment with new design and coding techniques in our newsletter, and this month we tried something new (and possibly radical).

We did not inline the CSS for this email. We only used a couple of inline styles to restrict the email width and center the email content. For users opening in an email client that doesn’t support embedded CSS, they essentially received a plain-text like version of the email (you can see an image of it here).

With Gmail's rendering update to support embedded CSS, essentially the entire global email client market share (95%+) now supports embedded CSS.

Granted, there are still some edge cases where Gmail accounts do not have the update, such as non-Gmail accounts (@outlook.com, @yahoo.com, etc.) in Gmail App. However, when we used Litmus Email Analytics to analyze our own audience we found those users to essentially be non-existent (less than 100 opens per send). Several international webmail clients (Mail.ru, Yandex, etc.) still don’t support embedded CSS either, but most of our audience doesn’t open in those clients.

Our generic audience breakdown at Litmus currently is:

  • Apple Mail ~30%
  • Gmail ~30%
  • Outlook ~15%
  • iPhone ~12%
  • Web version ~5%
  • iPad ~1%
  • Android ~1%
  • All others < 1%

Given our audience makeup, we decided to start testing embedded (non-inlined) CSS. This has the benefit of creating more accessible emails with semantic markup. Plus, it comes with many development benefits in terms of organization, maintenance, and flexibility to more easily use progressive enhancement.

For clients that did not support embedded CSS, we added a special preheader message explaining why the email may look a little different and pointed them directly to this thread for more information.

Non-inlined version

We’d like to understand your reaction to this approach, and we’re hopeful we’ll be able to move forward with a similar strategy for email development at Litmus.

What are your thoughts?

  • Do you plan to stop inlining CSS for your emails in 2017?
  • Do you like this approach?
  • Did you open this email in a client that didn’t support embedded CSS?