Our experience in creating HTML email templates

Despite being a UI/UX designer, my passion has always been development so when the Getpaid team was working on the notifications part of the platform, I immediately asked the tech lead to let me work on the HTML email templates.

I remember thinking, "Hey, it's HTML, I am good with HTML, I can do it", little did I know how much of a nightmare it can be creating email templates. But I pushed through it, did a lot of research, and learned a lot of things about how to build an HTML template and what things to consider while building an HTML template.

Things to consider while building an HTML template

1. Compatibility across major email clients

According to Litmus.com, there are about 10 different email clients that share the global email client market and all these email clients support or don't support certain HTML tags and certain CSS rules.

It's important to take note of what is supported in order to create an HTML template that is compatible with all these email clients. I used Caniemail to check the support of a tag or a CSS rule I was considering using. Campaign Monitor also provides a great guide to CSS support for the most popular mobile, web, and desktop email clients.

2. Responsiveness

A responsive email will resize and adapt to any screen size whether it is a desktop, laptop, tablet, or mobile, therefore, creating a responsive email template will ensure that the email is always readable on any device.

3. Dark/light mode

According to Nighteye App, 81.9% of people use dark mode on their phones, 82.7% of survey participants said they use their operating system’s dark mode, and 64.6% of respondents expect sites to automatically apply a dark theme.

This means that even if you don't set up a dark theme, your email will still look dark on devices where users like me have set the operating system to apply dark mode to everything. So it's important to create an email template that can work well with both dark and light modes.

Implementation

When creating an email template, your usage of HTML and CSS is limited. Only table elements and inline CSS are a guarantee to work across the board of email clients and even then, not all CSS rules work in most email clients.

We decided to take our chances with the style element even though at least four email clients do not support it and the main reason for that is to include styles for dark mode and responsiveness. Here is a code snippet of our CSS code to support dark mode.

We experienced a bit of trouble with the background-image property, it was not showing on some email clients, even those that were supposed to support it so we decided to have a compromise on the Getpaid logo; place it using an image tag and only have the icon so the logo can be visible on both light and dark modes.

Here is a link to the full email template if you are interested in taking a look.