HTML Email Development Tools

If you are an experienced email developer or you have been following the Modern HTML Email Tutorial, you know that creating robust HTML Emails which look good on most of the email clients can be a pain. You have to code emails in a way we used to code for the web in the early 2000s.

Therefore, if you want to be a great email developer, you have to think differently. You have to take advantage of bugs, lack of features and you have to combine your hacks in a way that it works well across email clients.

Thanks to this, your code will be extremely complicated, depending on the email clients you want to support. After a while it will be very, very hard to follow what's happening in your code. You will make more and more mistakes and you will spend lot of time with debugging your email code.

Without the proper toolset, creating and maintaining email templates requires extremely lot of time and effort. In this article series we are going to show you tools which can help you a lot with email development.

Some of the articles will help you to be more efficient, some will help you with tips and tricks to debug your email code and some others will enhance the maintainability of your code base. If you don't have much experience in email coding, I suggest you to finish the Modern HTML Email Tutorial first.

What are these articles focusing on?

These articles are focusing on efficiency, maintainability and minimizing the human error. It means that we are going to show you tools that help you to increase your productivity.

It's a general way of thinking in software development that if you have created something for the second time, you should never need to do that again. You can achieve it by proper tooling, abstraction and automation.

So the main focus of these articles is to show you ways that help you to do the same job faster and hopefully in better quality.

Text Editors, Browser Development Tools and Scripting for HTML Email Coding

If you want to be an efficient (email) developer, then you have to have a good basic toolset. A good text editor is the most important. Don't stick to your good old text editor, because there are cooler and cooler features coming in the new ones which can help you a LOT.

Also, a strong understanding of the DOM and how an HTML rendering engine works is also essential. You should have enough experience in debugging in at least one browser, but it's best if you know many. There are nice tricks in the browser as well, which can improve your productivity.

Last but not least: programming. That is something you definitely should know at least a little bit. If you are able to create scripts, then it will be very, very easy to automate most of the work. Otherwise you have to do it from scratch every single time.

Tools for Code Generation & Modification

There are many small libraries and tools out there which can do an incredible job for you. We are going to explore some of them throughout this article series.

Some of these libraries generate complicated email code snippets based on your imputs. Others modify your existent email code in a way that it will be much more robust across email clients.

Using this tools help you to use state-of-the-art solutions with a few clicks.

CSS Preprocessors & Inlineing

To be honest, CSS is not the nicest language out there. It's very hard to maintain your CSS codebase and it usually does not help to understand the structure of your page.

That is why CSS preprocessors are more and more popular. They help you to organize your code in a logical way. If you use them together with other tools, then your work will speed up and you will make less mistakes.

Even though more and more email clients support the <style> tag, it's still recommended to inline your CSS to support a wider range of email clients. There are many CSS inliners out there, but selecting the perfect one can be a struggle.

There is going to be a dedicated article about CSS preprocessors and inliners in this article series. We are going to explore the pros, cons and provide you some tips & tricks.

Email Testing Tools

You might think that email testing is only about visual testing. Well, a huge part of it is that, but there are much more you can and should test. There are great tools for visual testing, but it still can take a lot of time to test a tiny change in different email clients.

You can do lot of testing before you test your email on Litmus or Email on Acid. You can use validators, regression testing and many more on your own machine.

Another very important aspect is spam testing. It's obvious that you don't want your email to end up in the spam folder. There are lot of things which can help you with that, but you have to understand the fundamentals of many other things than email coding.

One final thing you have should definitely test is that your call-to-actions are clickable! If they are not, it really does not matter how nice-looking your email is. If you want to convert, then your buttons have to be clickable.

Templating Languages in HTML Email Development

Using templating languages is great if you want to create a maintainable set of components you use regularly in your newsletters.

There are many great templating languages. Each of them has their strengths and weaknesses, but the important thing is that it's a very easy-to-understand abstraction. With a little bit of scripting in javascript, miracles can happen. You can be extremely efficient with templating languages and javascript.

We are going to show you how to use these tools to create a your own component library and to use them to send out personalized emails to your subscribers.

Task Automation in HTML Email Development

Task automation is the greatest thing since the invention of the wheel. It's nothing more than scripts running automatically for certain conditions. For example you can run validators or you can compile your Sass files whenever they were changed.

We are going to show you how to use these tools to enhance your email development workflow.

Domain Specific Languages for Email Development

Say what?! - You might have asked when you read the title of this section. As wikipedia says, "A domain-specific language (DSL) is a computer language specialized to a particular application domain." So what if we had a language specialized for email development? Actually we have multiple of these. We are going to show you one, which will extremely improve your productivity and your emails will look amazing on almost all of the email clients.

Summary

This article series is focusing on tools which will help you to increase your productivity and the maintainability of your code base.

We are assuming that you have experience in email development, so if you do not, please finish the Modern HTML Email Tutorial first.

There are probably going to be topics which I did not mention and we are also happy to hear about what you want to read about. Please leave a comment below with your ideas.