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

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

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.