• Skip to primary navigation
  • Skip to main content

Ishan Sharma

Full Stack Engineer, Blogger, Student

  • Blog
  • Contact
  • About

Mandrill/GMail eating your email design? Try inlining!

Programming, Work · February 23, 2016

Recently, our CTO and Product Designer noticed that EpicBeat Alerts were appearing weird in GMail.

If you have worked with email design before (I pray to God you never have to!), it is not the easiest thing around and the constraints imposed by email clients are stricter than IE 6! (Ok, I am overshooting here, maybe 8!)

Back to our weird email, I tried a couple of fixes but nothing worked.

Mail looked good in all other email clients. In GMail, all CSS had magically disappeared.

Finally, I discovered that GMail removes all classes from HTML. Because of this, the CSS inside style tag in my mail design was just sitting there, finding no classes. GMail was going ahead and happily displaying alert with ugly default formatting. Take a look:

Alert email design in GMail without inlining
Yuck, this looks terrible!

Solution

The solution is to move the CSS inline. This process is called inlining. It works by removing class names from your HTML and replacing with style tags. Here are 2 ways to fix your emails:

  1. Inline Manually: MailChimp has a free inlining tool that will automatically move your styles for you.
  2. Enable Automatic Inlining in Mandrill: Mandrill can do inlining for you automatically. They have instructions available here.

I went ahead and enabled inlining in Mandrill. And here’s the result:

Epicbeat alert email design with inlining
Yay! Much better now.

Looking for more email design tips?

Take a look at EpicBeat search for email design. With the new and more powerful EpicBeat, you can even set an alert for email design to get notified about latest articles around the web.

Share this:

  • Twitter
  • Facebook
  • Reddit
  • More
  • Email
  • Print
  • LinkedIn
  • Pocket
  • Pinterest
  • Tumblr

Filed Under: Programming, Work Tagged With: mail, Programming

Ishan

I am a Software Engineer and Writer. Interested in design, AI and drawing. When free, mostly found reading or gaming.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Copyright © 2021

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.