Complete Guide to Create HTML in Emails
Try Publicate For Free Today
Start Now
Email marketing and email creation has come a long way with advents like drag-and-drop email builders and email analytics. Yet, some companies and teams still rely on HTML in email to send their communications. While HTML email code can do the job, it can also be tricky.
Here, we’ll look at how to create an HTML email and uncover the best practices for both email design and development.
Whether you’ve been responsible for sending an email or not, you certainly have received emails. So, you’re probably already aware that there are different types of emails. These include:
Marketing emails are geared towards an ultimate goal such as making a sale or converting a new customer. Marketing email service providers typically focus on solutions to manage subscribers, send bulk email campaigns, track their success, and provide reporting.
Transactional emails are those related to an action, which means they can include receipts, welcome emails for new subscribers, password resets for those who forgot, and more. Many companies rely on software solutions to automate these types of emails through APIs or development tools.
Life-cycle emails are behavior-based and can be used to drive engagement or help with onboarding, for example. There are email service providers that focus primarily on this function as well.
Sending any of the aforementioned types of emails relies on having a list of people to send the email to. When it comes to collecting, storing, and growing your email list, keep in mind the following best practices:
You may be tempted to pay for an existing email list. But, it’s advisable to ignore this temptation because you’ll likely end up experiencing bounced emails. If your emails are considered as SPAM, then you are hurting your internet protocol (IP) address’ reputation and could ultimately be blocked.
Did you know that there are legal ramifications for sending emails? The CAN-SPAM Act states that email senders can’t use misleading subject lines, ignore opt-out requests, or use false header information. Additionally, your emails have to include a way for recipients to easily opt-out and know your location, among other requirements.
Add an extra step for your subscribers to verify their email address. This way, you can ensure that no one is abusing their email address and your subscribed emails are accurate and clean.
Once you create an HTML email or any email and send it, the job isn’t done yet. You’ll want to assess how it performed. But, what exactly should you look out for?
There are a number of key performance indicators (KPIs) to track and you can choose which make the most sense based on your goal. When tracking KPIs, it’s useful to know benchmarks for comparison’s sake. Keep in mind that the below benchmarks can vary by industry, so it’s useful to do some research of your own.
The number of people who opened your email/the total number of sends x 100: 20% is typically considered good
The number of people who clicked on an ad or call-to-action button / the total impressions x 100: 3-7% is considered strong
The number of bounced emails divided by send emails x 100: benchmark calls for less than 2%
The number of unsubscribed / total number of emails delivered x 100: the average unsubscribe rate is about .49%
That’s where an email builder can provide even more value. HTML email builders offer a suite of analytics that deliver actionable insights into your email’s reach and success.
With access to these analytics, you can measure what is and isn’t working in your email strategy and adjust accordingly. An email builder like Publicate has detailed analytics including heat maps, open rates, click rates, and more.
The best part is you can drill down into analytics regardless of the platform you choose to use to send HTML in email.
If you’ve been in the world of sending emails, you may have come across the metric called sender score. A sender score is basically your reputation in the world of emails and ISPs.
Mailbox providers assess your sender score before accepting your email or considering it to be SPAM. Your sender score can be your golden ticket in, so it’s very important to take care of your sender score. This rating is based on your IP reputation, your domain name signature, your bounce rate, and your compliant rates.
This is yet another reason why you want to pay close attention to your subscriber list and ensure that the email addresses you send bulk campaigns to have actually opted-in and want to receive your emails.
Now that you know how to perform due diligence and cover best practices for sending emails, let’s drill to the core of creating HTML emails.
The word coding itself can scare off a lot of people. But beyond knowing how to code HTML to design and develop an email, you’ll also need to keep in mind that different email service providers render HTML emails differently. So, you can optimize your HTML email for Gmail and then an Apple Mail recipient may receive the email and see it wonky.
Additionally, different email clients that you use to build HTML emails may use different codes for the same thing.
Phew, that’s a lot to overcome. The good news is that an HTML email builder provides you with templates that are optimized already and designed to render across email providers.
You can choose from a suite of professional templates and customize them using the drag-and-drop functionality, which removes the need for a designer or coder.
If you’re moving forward with using HTML in email, then you’ll need to know how to cover the following:
A basic HTML email template will need both a header and a body section. To create a header section, you’ll use <head> and </head> to end the header section. Styling, CSS, and animation is specified within your header section.
Then, you’ll lead into the body by using the code <body> and </body>. Email engines use this code to create the HTML structure.
Then, you’ll lead into the body by using the code <body> and </body>. Email engines use this code to create the HTML structure.Email development will involve CSS, or cascading style sheets, along with HTML. Link colors, headline fonts, and other styling elements are described by CSS. There are some email clients that will ignore any CSS that isn’t inlined, which means you’ll want to write your CSS inline as you go.
To incorporate a button in HTML in an email, it’s preferred to use tables to style everything. This will add more lines of code than you’d need to add a button on a website, but it is necessary in emails so that you can style buttons across email clients.
General fonts are considered typefaces like Arial and Helvetica. But, if you choose to stray and choose web fonts (i.e. Google fonts) instead, use a WebKit conditional media query so they display properly in clients like Outlook.
When adding images into your HTML email code, it’s vital to know that some clients don’t automatically render emails. For example, Outlook blocks image-rendering, but Apple Mail and Gmail don’t.
That’s why it’s necessary to include alt text (which is a description of what the image is in plain text). So, if the image doesn’t load, the recipient can read what was in that place.
If you need to include a form in your HTML email, it’s recommended to link to an external form because each email client will support forms differently.
As you can gather, creating your own HTML in email from scratch can become more complicated than you may already think it is. Instead, you can use an email builder like Publicate that comes with pre-built templates for HTML emails.
This way, you can use a drag-and-drop editor to visually design your email and spend your time focused on content creation rather than the logistics. Once it’s ready, you can export the email to the email provider of your choice with a few clicks of the mouse.
Picture source Unsplash
To create HTML email that renders well across email providers and looks good, use the following bullets as a checklist of sorts to help you cover your design and development bases.
Want to know how you can always be sure that your HTML email covers these best practices? Choose an email builder like Publicate that offers professional ready-to-go templates that already have these best practices built in.
The best piece of advice you can remember from this entire article is to test your email before sending. Testing can help you check for typos and ensure the design renders properly. It’s always useful to also ask for a second set of eyes to review the email before you press send because once you send, you can’t take it back.
There are services for email testing that will show you what your HTML email will look like across various email providers. However, given that you have to fulfill requirements across many different platforms, the testing process can become time consuming.
This is another reason why many people are opting for an HTML email builder that can automatically handle the design and development process with the use of an existing HTML template.
HTML email builders take cover all the otherwise painful details of having to create an HTML email by hand. For example, a tool like Publicate is a web-based email builder that allows you to choose from hundreds of existing email templates.
Once you adjust your email’s content and design with the drag-and-drop functionality, you can send your HTML email using any email service provider or communication tool of your choice by exporting the email in HTML and uploading it to your preferred service.
Instead of coding HTMLs by hand and having to adjust for different screen sizes, HTML email builders make it simple to get your emails out faster and track their progress once you hit send.
When going down the path of embedding HTML in email, you may face challenges when coding by hand. The optimal path forward is to utilize an HTML email builder that will handle the heavy lifting for you so that you can focus on your email’s message and strategy rather than being bogged down by testing, coding, and re-coding.
