Avatar for admin

Embedded CSS Fixer for HTML Email

Posted by Ben on


For those of you who code your own HTML email, you probably know that CSS isn’t fully supported in all the different email programs.

Embedded CSS often breaks in webmail apps like Gmail and YahooMail. In order to make it work properly, you have to turn it all into inline CSS. Besides making you feel dirty all over, inlining your CSS in HTML email is just plain tedious.

So we made it automatic in MailChimp.

Details and a demo video after the jump…

Read More


I thought for sure Gmail would fix the cellpadding problem that popped up last November, but I guess they did all that on purpose. Oh well.

So we just upgraded our HTML Email template designer to work for Gmail. It uses inline-CSS to add the padding for proper Gmail rendering. In other email programs, where CSS doesn’t work, our templates fail gracefully to use the old-fashioned cellpadding. Here’s a before-and-after screenshot (click to zoom in):

Gmail cellpadding broken

MailChimp users: This only applies to brand new templates, created after February 15th. Normally, we like to make changes like this retroactive, but this was one of those changes to our code base that just wouldn’t allow for that.  So if you want your templates to work perfectly in Gmail, you’ll need to create all new ones in MailChimp. Otherwise, your templates will work fine in all the other major email programs. If you’re looking for an excuse not to go through the work of creating new templates, you can always say, “That’s Gmail’s problem, because they’re still in friggin’ beta.”

For me, this was just a good excuse to sit down and tweak all my old templates, and to go ahead and make a few more (see: 7 basic email templates every business needs).