Articles, Email Content, Email Marketing

3 Ways to Make Custom HTML Email Templates (Plus Best Practices)

Creating your own HTML email templates gives you the freedom to fully customise your messages. But it’s a lot of hard work, right?

Not necessarily.

There are highly involved ways to build HTML templates, like coding them from scratch. But there are also much simpler ways to create customised templates without needing to know a thing about HTML. If you’re not familiar with coding, it can be a surprise to know that even when you use a module-based or drag-and-drop tool, you’re actually generating an HTML email.

The best option for you will depend on the amount of involvement you want to have and your coding capabilities. So here’s a couple ways you can create responsive email templates in Vision6.

3 Ways to Make HTML Email Templates

1. Code directly into Vision6

Building an email from scratch is an involved process, and you’ll need to have adequate knowledge in HTML coding and know what code to avoid using in an email before you give it a go. Our simple HTML designer gives you the option to code directly into Vision6 and save your design as a template. The designer also allows you to automatically set the email as mobile friendly. 

However, even for an experienced coder this solution can be quite time-consuming. We generally recommend coding directly into the text component of your email if you’re looking to code a certain section of your email like adding a personalised hero image or a live countdown timer. If you’re looking to build an entire HTML email from scratch then we recommend uploading your HTML code.

2. Upload your code

If you’ve coded your HTML email yourself or had a designer create it for you, you can upload your custom coded emails directly into Vision6. Follow the steps below to upload your code, then save it as a template so you can use it again and again. 

How to upload raw HTML code:

  • When you are logged into your account, select Messages from the sidebar.
  • Click Create new email.
  • Select More Options, then Upload Raw HTML.
  • Drag and drop your HTML file and associated images into the panel provided (or click to browse for files). Your files will appear in the Files dialog to the right.
  • Once done, click Continue to Editor. Your files will now be uploaded, with any images saved into the Uploaded Images folder, in the Files & Images Manager.
  • The editor will now open, so you can tweak the design if required with the HTML view. You can also test & send your email using the options provided.

Need some email template design ideas? Take a look at our real-life examples for design inspiration. 

3. Use the drag-and-drop editor

The simplest and most popular way to make HTML email templates while still having control over the design is by using our drag-and-drop editor. It gives you a flexible and powerful way to piece together your emails, dragging and dropping pre-made components into the builder, and editing and reordering them to your heart’s content. All emails built in the drag-and-drop editor are responsive, so your emails will render across any device.

This is the perfect option if you have no coding skills, but still want to design your own templates. Easier yet, you can customise our pre-built templates to give them your personal touch. 

Need a guide to using the drag-and-drop editor? We’ve got you covered. Take a look at how you can create an email in our platform.

Best Practices for Developing an HTML Email

There are a few things to keep in mind when you’re creating your own HTML email templates so that your campaign behaves the way you intended. 

1. Make sure it’s responsive

Responsiveness is so important. 81% of all emails are opened and read on mobile devices. Think about the layout, images, font, video sizes and button placement. This is particularly important if you are building a complex email – elements that look great on desktop might not work when they are scaled down to fit smaller screen sizes. 

2. Be aware of load time

Load time can make the difference between acquiring a new customer and losing a frustrated one. You may want to include great visuals, complex layout, and interactive elements, but none of that matters if your emails take way too long to load.

Things like using compressed images, using standard web fonts, and keeping the content in your emails short and sweet will help to keep the load time down. 

3. Test the rendering

Email rendering keeps growing in complexity. It’s been estimated that there are now more than 300,000 different potential renderings of a single email. Preparing for all of these variations is next to impossible, but there are few things you can do to make sure your emails optimised for all devices. 

Make sure you always test your email across different OS, browsers, and screen sizes to see how it renders. This will help you catch anything before it’s too late. There are some things that you won’t be able to control though, like the settings on the recipient’s end that could disable or block HTML emails. To combat this, Vision6 will automatically create a plain text version to every email so that your messages will still be received by all subscribers. You can also add a web page version of your email, so that recipients can render the email outside of their email service. 

Want to give our simple drag-and-drop tool a go to build your custom templates? Get started now for free!

Article Categories