There are cases where plain text emails are not enough. This is when HTML letters come into play. Snov.io supports HTML coding in emails, and you may easily send an HTML page or newsletter as an email with little effort. Learn how to send your HTML email in Snov.io.
Step 1. Create an HTML-based email
Before inserting an HTML template into your email, it would be good to create it first. Creating HTML letters can be a tedious task. If you like challenges or want a creative email that is totally different from the others, then designing yours can be fun and beneficial.
Otherwise, you can find ready-made HTML email templates. Considering how tricky HTML letters can be, this is probably the easiest way. Luckily, there are many HTML email templates available on the Internet, here are just a few:
- HTML Email Templates
- Really Simple Responsive HTML Email Template
- Litmus Templates
- Envato Elements
To create an HTML email, one should know that any HTML template consists of a head and body.
In the head section, we indicate meta tags and a title. All the media queries, styling, and CSS animations are mentioned here. It is located within <head> and </head>.
The head section of any email looks like the following code:
- <!DOCTYPE> is used to notify the rendering engine which HTML tags to expect and what set of rules HTML and CSS should abide by. Even though some email clients, such as Gmail, Outlook, or Yahoo! Mail, remove the code and apply their own, it is recommended that you add this to your email template HTML code.
- <meta http-equiv=”Content-Type” /> is used to notify how to process the text and special characters in your letter.
- “text/html” is used to inform the rendering engine to recognize the following strings of text as HTML.
- <title></title> is the email’s title. Recipients will see it on the browser tab when they open a letter.
- <meta name = ”viewport” /> is used for making a responsive HTML email. It informs the device on which the message is viewed to set the correct scaling.
The body section is the main email section that contains everything that will be visible when the recipient opens the email. It is located between <body> and </body> tags and starts with formatting.
To display the email structure in all email clients as it was produced, it is suggested that you format it using nesting tables.
Create at least two tables: email template container and email content table.
Email template container is the core table. Set its width to 100%. This way, you will cover an email space. It is also recommended to set the margin, padding, cell padding, and cell spacing to zero. This will eliminate unexpected space inside this table.
Email content table is placed inside the core one. Set its width up to 700 pixels. This is a standard well supported by the majority of email clients. Align this table to the center.
This is how it looks:
Next, depending on the selected template, you can add text, images, buttons (CTAs), as well as change colors. Place each text block or element to a separate cell and apply inline styling.
Here’s a simple structure of the content block and a button added as a separate table:
Finish your HTML code with a footer. It’s the closing part of an email. It is essential to add the sender’s information and attach an unsubscribe link here. You may also mention links to your social profiles or some additional information.
Here you go! You have successfully created an HTML email! Now you can easily use it in your email drip campaign.
Step 2: Copy and paste your HTML-based email
Select the Source code icon and paste the code of your pre-made HTML template into an email.
Then click Ok.
We recommend you send a test email by clicking the Send a test email button to make sure your HTML-based email will be sent as expected.
Check the test email on mobile and laptop; use at least two different browsers and email clients.
Learn about the limitations of HTML email design.
If you have any questions, please reach out to us and we will gladly help you!