3 min read
HTML Email for Beginners
Are you diving into the world of HTML email and feeling a bit overwhelmed? Don’t worry; you’re not alone. Email coding can get tricky. If you’re not familiar with it and thinking “What is hard about HTML?” Well, nothing is actually. HTML is our friend, CSS too. The enemy is inconsistent results!
In the world of email development, you quickly realize that what seems straightforward on the surface can turn into a battleground of inconsistencies across different email clients. That is because email clients do not fully support all HTML and CSS features. Your code won’t just differ among email clients; it’ll also look differently on desktop, mobile, and the web. Even though this sounds scary, there are many tools and ways to help you overcome these restrictions. In this post, I will share some of them to help you navigate in the world of HTML email, especially if you’re a newbie like me.
Developing
You can start creating an HTML email in your code editor and see the results in the browser, but I think it is easier to manipulate and preview email templates with an editor dedicated to emails like Parcel. You can use the editor to write down your code and see the preview on the side, also having access to the accessibility and HTML problem check. In the free version, you can create up to 50 emails.
Now that you have a platform to code emails, it is time to start writing! You may feel overwhelmed and not know where to start at this point. If so, I recommend checking out Good Email Code by Mark Robbins. In this amazingly useful website, Mark explains various concepts and practices about HTML emails by breaking down the code line by line, making it easy to understand. To begin with, you can use this base template as the foundation of your email and refer to the other sections when needed.
When coding, do not forget to check the compatibility of the properties that you want to use across various clients. You can do this with Can I Email.
Testing
Due to the lack of uniformity in client support, testing becomes the most essential part of HTML emails. You need to make sure that your email looks as intended for each client. If you use Parcel to preview your code, you can quickly send the code to your email address by using its ‘send test’ feature.
You can also use Putsmail to do the same thing. It’s a free tool to send emails to yourself by pasting your code. If you’re going to use these tools to test your code, I suggest creating accounts on different email clients and sending your code to each of them. This way, you can check how your email looks for those clients.
Although this approach works, it is not always convenient because you should also test your emails on different devices, browsers, and operating systems. To achieve a more comprehensive check, you can use Litmus to preview your emails across a wide range of clients, devices, and browsers. Litmus is not free but it offers a 7-day free trial. I suggest uploading your code to Litmus after testing it with the free tools that I shared above, because there is a limit to the number of previews you can view in the free trial.
More
My last recommendation is a tool to help you discover more tools! You can browse any resource based on your needs with Email Resources, which presents a variety of amazing tools put together by Parcel.