Calling all HTML wizards! You can use your magical coding powers to build your own email from scratch.
Whether you’re a beginner or an experienced coder, you’ll be able to create custom emails with our updated HTML editor. We’ve been busy sprucing it up to make it even better—here are the new and improved features to try out today.
While the new editor might seem similar to the old one, we’ve done a ton of work behind the scenes to enhance usability! You’ll notice that when you select a section of code, it highlights the relevant section in the preview. So it’ll be much easier to keep track of how the code renders in the email.
Made a typo? Mixed something up? No problem, just hit ‘control z’ if you use Windows, ‘command + z’ for Mac, or select the ‘Undo’ button in the editor. We had it on all our other editors, and now this function is also available in the HTML editor.
We’ve made the interface lighter, fresher and much more convenient (take a look at these before/after pics, for example)! Definitely easier on the eyes…and it will save you time with less to process.
Last (but certainly not least) we have… drumroll please… snippets! These are pre-written, reusable source codes that can be quickly inserted into your newsletter code, helping you to save time. We already have variables and custom field tags, and now you can also access HTML snippets for more convenient coding and improvements.
Snippets help people with less coding knowledge to create more professional-looking newsletters. And they also speed up campaign creation for those who are more advanced. So it’s a win-win for everyone.
Here are the 9 snippets that you can now access in the HTML editor:
This is the most crucial feature for any Custom HTML editor. Many newsletter designers want to add hosted content, or insert pre-made designs into the editor, preview it, maybe add variables and then send it. This feature allows you to import content for your newsletter, speeding up your email design.
Sending a newsletter without the unsubscribe link is a big no-no. But you can easily take care of this by using the Automatically add footer setting, which will pull up data from your default company information under Account settings.
Selecting this option enables you to insert the preheader text of your email. You’ll also be able to create a ‘View in browser’ link at the top of the campaign. This directs people to the web-hosted version of your email, which is kept on our servers.
This helps recipients who either can't view HTML emails, or who have image downloading switched off, or if they want to view the full version of your email.
Generally, CSS is responsible for any style added to the code—shapes, text formatting... all the elements that make your email look pretty! There are three ways to write CSS for emails:
By opting to have automatic CSS, you will change your email style settings into inline.
Why is this useful?
You want to make sure that your subscribers’ inboxes will read the style code correctly. Inline code renders well in all inboxes, so it is a safe choice for email marketers.
On the other hand, you may choose not to use inline styles in favor of embedded styles, because:
Embedded code brings the same value as inline code, BUT keep in mind that some older inboxes will not support embedded styles. Take a look at this table for reference:
For anyone who is still new to HTML, it’s best to select automatic inline CSS to avoid any styling issues.
And when it comes to external or embedded code, there’s a slim difference between them, so you need to know what you’re doing.
If you send an email and it doesn’t look the same as in the editor, then select the automatic inline CSS setting and try sending the email again. People who are confident using HTML will normally only use external CSS—or select this option to be safe.
Variables are pieces of content that may vary depending on what data is available. Custom field variables are the same variables in our other builders for personalization:
There are three other variables in the HTML builder:
Great, so now you know all the main components of the HTML editor! Before we wrap up, here are three quick things to keep in mind when designing your emails.
Your email layout and styling may look different depending on the inbox, device and screen size. To manage this:
We all have short attention spans these days, so you want your email to load as quickly as possible. Here are some things to remember:
Give yourself peace of mind by testing your emails, before hitting ‘send’. You can use test emails to check how they look on different devices. You’ll thank yourself later! And as a backup, use the Web version link variable so that people can read the email in their browser if it isn’t loading correctly.
Hopefully, you’re now as excited about HTML email editors as we are! It’s intuitively-designed to help you work like Daft Punk—faster, smarter, stronger. You get it.
Have you tried the HTML email editor yet? Let us know in the comments.
Hi, my name is Migle, which is a very hard Lithuanian name to pronounce. Let's just say I have way too many nicknames to count. As a Project Manager, I am obsessed with planning and organizing. I love that feeling of taming the dragon of chaos. Especially when that chaos turns into a new product feature that helps you succeed!