I coded a responsive email, here’s what I learned

Joshua Söhn
Dec 5, 2016 · 4 min read

Since listening to a podcast with one of the developer/designers at Mailchimp who is responsible for most of their predefined email template designs, I was aware how tricky HTML emails are. I recall he talked about coding it in Dreamweaver because its internal preview of it comes pretty close to a mail client rendering engine. Until recently I didn’t know how tricky though.

The Problem

First steps

I designed the template in Sketch and because of what I read about email design in the past I tried to keep it fairly simple and straightforward: 1 column, no web fonts and embed all the “nicer” visuals as images.

Then, it was time to code: I created a new template in Mailchimp by choosing the “Code your own” option and was presented with some nice looking boilerplate code, which I used as my basis.

Indent hell

I spent around 30min cleaning up the files and trying to understand the layout/structure after copying it into my editor. The good news is, when you think you probably can use less tables rows, you probably can. If you are born after 1990 and new to the table tag, this article can be helpful to understand the different tags in the first place.

Forcing responsiveness

Gmail first

Using Mailchimp

Fonts

Outlook is your enemy

Thanks to madibell.

Joshua Söhn

Written by

One man design department at @Kontist.