Building emails

I’ve been actively engaged in the world of email marketing for a few years now. As a modern front-end developer building emails felt like a bit like a step backward, as far as development goes.

Emails defy a lot of our rules for clean Code. Unfortunately, they are still built using inline styles and table-based layouts, it’s difficult to move away from this due to certain email clients.

I’ve been developing my emails with a mix of more modern CSS styles and media queries, and of course, reinforced with the necessary dinosaur inline styling. I’ve also used native builders in products like Mailchimp and Salesforce Marketing Cloud, but find they sometimes lack flexibility in the HTML and usually resort back to the code based build.

Here are a few observations I’ve recently made:

Padding and margins become a problem with older based mail clients. The designed will come with a beautiful email, but typically spacing has to be created within the <td> tags without the use of basic CSS. The reason is often the padding will get stripped breaking the email layout, or at least changing the overall look.

Images in Gmail act as a “download” in emails. Yep in Gmail, there is a weird little download arrow on all the images. Solutions? Not really, I try to create an associated like for my images. This can become a real pain for image-heavy emails. I try to use the rule “less is more” in emails. Minimal content including text and images.

Lastly, we have forced dark mode. Some clients have added a feature that allows users to select all the time dark mode in emails. Which I love as a developer but it creates a whole new set of issues for emails. When testing I’ve observed differences in how colors are displayed, primarily elements with background colors. This will have to be taken as a consideration in the design phase moving forward. I can test dark mode in litmus.

Emails are still effective marketing tools provided there is an engaged audience. I am hopeful the “old school” email clients will make a move in 2020 to support some more modern practices.

Leave a Comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.