A few weeks ago, I published a guide to spying on competitors’ emails for the purpose of creative inspiration, but what about using that inspiration to develop your own templates?
That is the topic of this post – a guide on taking an email template design and converting it to a functioning template. I’m going to present two classic options, plus a third lesser-known option that shows a lot of promise. I’ll present the pros and cons, tools, frameworks, and my personal tips for the whole process.
Skills Required for an Email Template Developer
The required skills closely align with three development paths I’m going to write about:
- Using a Drag & Drop Email template builders
- Writing email code using HTML & CSS
- Using automatic Design-to-Code converters
The first obvious skill that presents itself is HTML & CSS knowledge in email coding. I would say that the required level of actual HTML & CSS knowledge is pretty basic, but there is a high level of email client compatibility knowledge required.
Famously, all email clients, especially older ones like Outlook, have poor compatibility with modern HTML & CSS. In short, that means they don’t support the majority of elements used in modern web development like external stylesheets, layout techniques like CSS Flexbox, animations, interactivity, and even custom fonts. All this means that email HTML uses simple table-based layouts with in-line CSS, focusing on compatibility over advanced features.
Many people would stop the list here, but I think there are other extremely valuable skills that differentiate top email developers from the average ones.
- Knowing general email best practices: Understanding why emails are 600px wide, when to breakpoint for mobile responsiveness, how to implement custom preheader text, email markup, and list-unsubscribe headers are examples of topics that a good email developer can navigate to deliver the best possible template.
- Knowing email design limitations: Practically speaking, some common design features are not universally supported by many email clients. These include videos, GIFs, gradients, custom fonts, complex layouts, overlapping elements, animations, and interactive elements. From my experience, this is not common knowledge among designers, as not many have experience with designing emails. That is why I think it’s crucial for a developer to possess this skill to be able to guide the design process.
- Optimizing for dark mode – About 50% of users today use dark mode on their devices. Good enough reason to optimize your templates for it? That’s easier said than done. Different email clients do dark mode in different ways – some don’t invert colors, some do a partial inversion, and some do a full inversion. That means you get inconsistent results across different email clients by default (e.g., white text on a white background), so you need good knowledge to be able to fix such problems. My recommended source for reading more on dark mode is Litmus.
- Optimizing for deliverability: Poorly written code, using too many links, and certain keywords in the copy can make your emails land in spam, no matter how beautiful they are. It’s crucial for every email developer to navigate these challenges and provide templates that pass all spam filters and have a chance for maximum deliverability.
- Accessibility: All email templates should be designed and developed in a way that is accessible to visually impaired users, who may or may not use screen readers. This is a topic that is unfortunately widely ignored in email development and general web development. I recommend reading a complete guide on email accessibility from Email on Acid.
As with everything, I’ve managed to take a relatively simple topic and make it a really complicated one. Being honest, not all of these skills are necessary for every single person, but it does separate the best out there by having the best designs, user experience, and email deliverability.
Using a Drag & Drop Email Template Builders
Using a drag & drop builder is the easiest and most convenient way to build a template. Most platforms have a built-in email builder that is frequently used, but there are also 3rd party builders that provide extra capabilities.
Video: Showcase of a typical email drag & drop builder (beefree.io)
Pros of using a Drag & Drop Builder
- Ease of use: Such tools have an easy learning curve that allows fast creation and deployment of emails by users without coding knowledge.
- Cross-Client Compatibility: All blocks and templates are tested and optimized for various email clients out of the box.
- Responsiveness: All layouts you build will automatically be responsive across all devices.
Cons of using a Drag & Drop Builder
- Limited Customization: You are limited to features and layouts provided by the builder. It is often hard to introduce uniqueness and creativity, and implement advanced layouts and features.
- Code Bloat: These builders still generate HTML & CSS code in the background, and that code will always include unnecessary or redundant code, leading to larger email sizes, slower load times, and lower email deliverability.
- Cost: Built-in builders are often free or covered by the cost of the email platform you’re using. But if you opt for 3rd party builders that have advanced functionalities, you’ll have to pay a monthly subscription.
Popular Drag & Drop Builders
I think built-in builders in your email platform of choice will satisfy the majority of your needs, which is great as it doesn’t generate any extra cost. But if you need something a little bit extra, I recommend looking into the following email builders that have proven to be a great choice:
In conclusion, if you’re a small brand, have simple designs, and don’t have a lot of time to invest in your email campaigns, email drag & drop builders are a great choice for you. But if you are looking to create something better, creative, and unique, consider taking the next path.
Writing Email Template Code using HTML & CSS
I know, mentioning coding to someone who has no experience with it may sound intimidating, but I promise this is the simplest coding process out of them all. It doesn’t take years to learn and master, so if you are new and want to learn, or you already code and want to know more, stick around.
Pros of Coding Email Templates in HTML & CSS
- Complete Control: You can tailor every aspect of the email to meet specific needs and designs. Implement advanced layouts, develop bespoke features, and create custom responsiveness and dark mode rules.
- Optimized Performance: Write efficient and minimal code, leading to faster load times, smaller email sizes, and better deliverability rates.
- Better Compatibility: By using custom code, you can address responsiveness, dark mode, and email client rendering directly. By using a drag & drop editor, you are stuck with predetermined rules that often can’t be edited.
Cons of Coding Email Templates in HTML & CSS
- Steep Learning Curve: Knowledge of HTML & CSS is required, alongside knowing best practices, design limitations, and other skills I outlined before. Luckily, I think anyone can learn it within 1-3 months and master it within a year.
- Time-Consuming: Creating and testing such templates takes more time. They are often more complex in design and require individual compatibility adjustments for almost all email clients.
- Editing Challenges: Creating new campaigns requires users to edit images, links, and text directly in the HTML file. That might be intimidating for many and can often lead to mistakes such as deleting a tag, which then breaks the whole template. This can be mitigated by writing clean code and good documentation which allows non-technical users to easily update content.
This article isn’t a coding tutorial, but I’m going to explore all the ways email coding can be approached, starting with coding from scratch.
Coding Email Templates from Scratch
This method involves taking a text editor or a development environment like Visual Studio Code, starting a blank file, and writing code from there. This is a good start for beginners to learn the basics, but I would never recommend this to be a standard practice for anyone. The reason for that is that email templates have a lot of standardized elements that repeat, so typing them over and over is not efficient.
A better way to approach it is to start with a boilerplate template. This is an existing HTML file that already has the default structure, which is sort of universal across all templates from all brands. This speeds up the process and rids you of unnecessary typing. I would recommend a boilerplate template from Email on Acid.
An even better way to approach it, is to use a tool like Parcel (parcel.io). Parcel is an email coding platform that gives you a really nice environment in which you can write code, see live previews, use templates and code snippets, send preview emails, and much more.
Image: Screenshot of a Parcel dashboard
The paid version unlocks all functionalities, but there is a free tier that is still pretty good – especially for beginners. Using such a tool speeds up the development time by a lot, as you can easily organize projects and reuse code.
Coding Email Templates by Using Email Frameworks
If you are not familiar with frameworks, they are a structure of pre-built code that speeds up development. For example, if you wanted to code a button in raw HTML, you’d have to write 10 lines of code. By using a framework, you can write one line of code which will then automatically be converted to a button.
My favorite examples for email frameworks are MJML and Foundation for Emails 2. Both are completely free, open-source, very easy to learn, and massively speed up development time. It is possible to learn only a framework and create templates that way without ever learning HTML & CSS, but you will lack some foundational understanding and may encounter problems if you encounter bugs.
A proof of just how valuable these frameworks are can be seen on the image below – just 15 lines of written MJML code (left) automatically generated 138 of raw HTML code (right)!
Image: Screenshot of an online MJML editor
Using MJML is my personal process, which I recommend to others as well. It has great documentation, an online editor, can be used within Parcel, and has an amazing Slack community that is always ready to help with any problems.
The Best Resources to Learn Email Coding
As you might have noticed from the previous links in this article, I think Litmus and Email on Acid have the best resources for learning about email development. They cover all topics in very fine detail and are always on top of any changes and trends.
Figma to Code Conversion
The third method, which popped up recently, involves Figma plugins that automatically convert designs to email template code. Some of them give you a sort of design system you have to use in Figma and build a template from their blocks, while others promise conversion from any kind of design.
Image: Kombai Figma plugin at work
I personally haven’t used any such plugins extensively, but from my experience, they work best on simple layouts, while problems often occur on more complex ones. Some examples of the plugins are:
- Emailfy by Hypermatic
- Postcards Email Builder by Designmodo
- Kombai by Kombai for Email
These are worth keeping an eye on as they can only get better with time, even though they’re not perfect at the moment.
Template Testing
I’ve already mentioned responsiveness, dark mode, and different email clients. Now that we’re at the end of our development process, it’s time to test all those.
One method is to send yourself a test email, open it on a phone, a laptop, and use a few different mail apps, but that testing is very limited as we maybe only have access to a couple of devices. And even if we had access to every single device out there, it would be extremely time-consuming to manually test on each one.
That is why we have inbox previews. Inbox preview is a term describing a service offered by platforms like Litmus, that allows you to send a single test email and almost instantly receive screenshots of 100+ different email clients and devices. This is very convenient and allows you to speed up testing by a huge factor.
GIF: Litmus preview testing
Litmus also offers spam testing, which runs your template through spam filters, evaluating your code and content, and sending back feedback that can be used to optimize deliverability.
Litmus is a paid tool, but some email platforms have similar functionalities built-in, so they are essentially free. One such platform is Braze with its Inbox Vision feature.
Lastly, I just want to say that sending a preview to your inbox has its place, as that is the only way to test interactive elements, like clicking through links and making sure they lead to the correct destination.
The Conclusion
In conclusion, drag-and-drop builders are ideal for simplicity and speed, making them suitable for small brands and straightforward designs. However, if you seek advanced customization and control, coding with HTML & CSS is the way to go.
Figma-to-code plugins offer emerging possibilities, but may struggle with complex layouts. For thorough testing, use tools like Litmus to ensure compatibility across various email clients and optimize deliverability.
Ultimately, the best approach depends on your specific needs, resources, and goals. Whether you prioritize ease of use or complete control.