Writing HTML/CSS has been greatly simplified in recent years due to improvements in the web standards and various frameworks. You can rely on frameworks like Bootstrap or Tailwinds to manage you CSS, React, Angular to structure your javascript and logic and so on. However there is one very important and heavily used part of the web where you can not use any of these modern technologies and rely on handcoded HTML and inline CSS. That is when you write rich email templates. If you have seen the email templates from Amazon, Ebay, Macy's etc. you would know what I am saying. These are rich, accessible and highly useful email templates that front end engineers had to write from scratch. In this article we learn few things that one should keep in mind when it comes to email templates.

Apply a test driven approach for email template development

Always remember that the number of email clients in the world are too many and they are all important. You are not just limited to Outlook or Thunderbird here but you also have to deal with Web and mobile apps of Gmail, Outlook, Yahoo and few others. Testing in chrome or firefox is not very useful as these browsers are far too modern. You should ideally test it manually first in the most common email client such as Gmail web or mobile app. Then use automated tools to test the email template and send you screenshots to make sure nothing is broken.

Some of these tools are Browserstack, Litmus, Moosend and many more. Pick a tool that serves your needs the best. Pricing and speed is important but most of these tools have very similar features.

Always remember that it incredibly hard to get this right for all email clients.

Rely on email templating frameworks

There are many email templating frameworks. Ideally try to use one of those even if they do not fit your needs perfectly and evolve from there. These frameworks will teach you the basics and pitfalls and help you develop a good sense of the challenges. You wont be wasting too much time reinventing the wheel.

These frameworks will also get you setup with all the basic tools such as all the right npm packages, build and compilation pipelines and so on with good design patterns.

Think about evolution and growth.

One of the hardest things about emails is that they may not get delivered at all. Key to good email delivery is personalized emails that are view worthy and clickworthy. Mass emailing boring emails is likely to get you to waste a lot of money and add to the spam folder of your users. Hence make emails really great. Do not send an email if you already know it is not relevant to the person whom you are sending it.

While this is a product decision, frontend engineers do have a role to play. If your template is not readable, if it does not render properly or if it is not accessible for all users it hurts your email campaign performance. For example, I have seen that making your email templates sensitive to dark and light mode of the computer increases the CTR by around 5%, which is a significant jump at scale.

Email accessibility is very important

While we are very familiar with accessibility requirements of web, the accessibility of email templates is often overlooked. But it is important. Emails are often very important medium of communication for users with accessibility needs. Since emails and their notifications can appear on wide variety of devices, the accessibility users might be relying on email for getting right information on the choice of their device with appropriate settings. Your emails should render well and should be accessible.

You can always rely on the testing tools we mentioned about for this purpose but do not ignore this important aspect.

Email images matter. Ensure optimal performance.

Images play an important role in emails. Email images make the email more informative, clickworthy and improves your brand recall. Especially after Gmail rolled out changes that by default displays images, email experience has been really good. But, you need to ensure that that images in email are very high quality, optimal for performance and load properly. Remember that they need to look good, responsive and adjust to dark mode/light mode of the system. Optimizing images for email templates is an engineering problem in itself but worth solving if you plan to send millions of emails.

Remember that emails get printed too.

A lot of emails are printed on paper eventually. For example ticket confirmations, receipts, medical reports, appointment confirmations etc. get printed as a hard copy. Always remember that a print version of your email should look good too. It can be a simple version that has only the relevant information but it should be tested if you expect your users to print those emails occassionally.

Sometimes we forget that a page has a limit and when printed, it ends up printing 3-4 pages with relevant information appearing on different pages. This not only wastes paper and ink but is also frustrating for the user. For print version of the email it makes sense to fit everything on one page and all information being upfront.

Remember you can use media queries to apply different css rules to the elements and hide elements that are not worth printing.

Conclusion

Writing email templates is hard and a different skill than writing normal webpages. We have covered the basics in this post which boils down to 6 principles. Using right tools, knowing right technologies such as raw html, css and being aware of accessibility is key to writing good clickworthy emails that delight your sure.