While much of the web has advanced, some technologies are slow to evolve. E-mail is one of them.

E-mail clients don’t always keep up with the latest web features, but users expect their e-mails to look and behave like websites, nonetheless.

Over the years, I’ve gathered some tips and tricks to help minimize the pain when creating emails.

Figure out which e-mail clients your customers use

The global e-mail client market share isn’t always relevant. It’s more important to find out which clients your users are using. In my case, a lot of them were using Outlook. Figuring out which e-mail clients to target should be your first step as it guides your design strategy. You can then use caniemail.com to see what features you have at your disposal.

See how your e-mails are rendered on the targeted clients

If you have the resources to do so, try to actually see how your emails show up on the e-mail clients you’ve chosen to target. You can either do this manually by (e.g. installing Windows/Outlook on a VM) or you can use various SaaS e-mail testing tools.

Keep it simple

Most e-mails can be created using table, div and img elements, the margin: 0 auto, text-align: {left, center, right}, background-* and border-* CSS rules, and the valign attribute for vertical alignment. Adding more cutting-edge features opens you up to compatibility issues.

Create reusable components

In Rails you can do this with partials or helpers, and it helps DRY up your templates and make your e-mails look consistent. Most e-mails I create have lots of nested tables, so components de-clutter a lot of that mess.

While you can use frameworks like Foundation (inky) or MJML, that come with their own component system, I find that creating my own component system gives me more granular control, at the cost of a higher ramp up time.

Use premailer-rails

This allows you to write CSS the way you’d write it normally when making web-pages i.e. through stylesheets. premailer-rails will then inline those styles before sending out the emails.

Bonus: Maizzle

If you’re a fan of Tailwind CSS, you might be interested in Maizzle. It’s a relatively new e-mail framework that doesn’t come with a component system, but rather it integrates with your own HTML, adds Tailwind CSS, and many more features that allow you to create responsive e-mails that render well on many clients.