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.
At Kontist one of our main communication channels with customers is via email. Historically, our newsletters were designed as one-offs using Mailchimps email designer and therefore differed a lot in terms of font-sizes, colors and layout. My goal was to create a “master” template that is flexible enough to meet the needs of any kind of newsletter we might want to send. In addition, the template should be highly readable, responsive, and unbreakable for the people working with it.
While looking for inspiration I found a website called Really Good Emails, which showcases dozens of create emails of every type. Offscreen magazine is sending out some really nice ones as well. Another great example for well designed newsletters is The Modern Desk, also curated and made by Kai from Offscreen.
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.
HTML emails are build using table layouts, which isn’t a huge deal, but leaves you with tags in tags in tags.
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.
The way media queries work or the way CSS works in emails is not laid on the line. First you have to write all of your CSS in a <style> tag in the head section of your html file, but because only a few email clients support that. You also have to inline all the CSS you write on the related HTML tag. Thankfully Mailchimp can do that for you automatically. CSS media queries however doesn’t work as inline styles, so you have to leave them in the <style> tag and add an important rule to each property to override the existing inline styles (sigh).
This leaves you with the second problem. Gmail doesn’t support the style tag and therefore media queries at all, so your best bet is to make an email which looks decent on mobile and desktop. My advice here is to give all tables and maximum width of ~600px and apply a global padding to the body of ~10px. This makes sure it scales down probably. Hint: The Gmail mobile app adds a funny little border around emails for some reason, so the emails could become really narrow. In general as most email desktop clients support the style tag I would start mobile first to cover the gmail issue and add the desktop styles using “@media (min-width: 600px)”. The reason for that is also that mobile emails don’t look that wrong on a computer as vice versa.
They have some great resources about both best practices for HTML Emails and design patterns. One thing I learned a little too late is that you can’t create a Mailchimp template and then use it with the drag and drop email builder, which let’s you add all kinds of different email modals. Instead design the longest version of a possible newsletter and make all sections both editable and hideable. You can learn more about this here. Other then that, expect to spend a lot of time copy pasting as well as sending test emails.
While you shouldn’t rely on not-safe web fonts to render text in emails, there’s a nice solution when you don’t want to stick with Arial or Lucida, which are Mailchimps default options. On iOS and MacOS you can access San Francisco (or any other system font) on Android phones you can use Roboto instead. All you have to do is to use this really long string of font fallbacks:
Outlook is your enemy
If you do some research you will learn that Outlook seems to be the final stage of email madness and I myself, while not optimising for Outlook 2007/2010, ran into a problem. Full width images are not displayed full width in Outlook Mobile (which is my current email client of choice), but leave a right margin of like 10px. I still haven’t figured out how to solve this, so if you’ve got ideas, please send them my way.