Email service providers can send and receive two types of emails: plain text and HTML. If you receive a bare-bones email with no fancy graphics, color, or formatting, that’s plain text.
HTML emails are specially designed messages. These are often used in email marketing, newsletters, or onboarding emails.
They’re made using the same languages programmers use to build websites: HTML and CSS. The good news is you don’t need to be a programmer to make great HTML emails.
The catch?—just because you can, doesn’t mean you should.
Before using HTML emails in campaigns, you need to consider a couple things. We’re here to help you through all the nuances to ensure your next email marketing campaign succeeds.
What are HTML Emails?
HTML stands for HyperText Markup Language. It’s called a language because it’s used to communicate to an HTML reader (browsers or email service providers).
In a nutshell, HTML emails have all the perks plain text emails don’t, including color, style, or images. Marketers can design HTML emails to fit their brand or provide a more visually engaging email experience.
Do HTML Emails Lower Deliverability?
HTML emails caused a lot of havoc when they first surfaced in the mainstream in the early 2000s. They wouldn’t render properly, and only a few email service providers could read HTML.
To avoid issues, Google even disabled most HTML features on Gmail. With today’s email technology, that wouldn’t be an issue—thanks to responsive designs for email.
Responsive design means that the design of an HTML email would dynamically adjust itself based on browser size. That means mobile users had a better time reading HTML emails.
However, because HTML became so accessible, it also caused new problems in email, such as viruses or phishing scams. To combat this issue, ESPs would put HTML emails in spam.
This could lower deliverability rates, especially if you’re sending cold emails. But this won’t be much of a problem if the receiver already trusts your domain.
In some cases, antiviruses would strip the HTML email to the bone, only leaving plain text. Users would then get a prompt when they open that email to allow HTML to load.
The Pros and Cons of HTML Email
Using HTML has a lot of advantages in marketing and brand building. But, there are some negatives that you need to look out for. Here’s a look at the pros and cons of HTML email:
The Advantages of HTML Email
The biggest advantage of HTML emails over plain text is their customizability. You can use HTML to design emails, engage prospects with stunning visuals, and build your brand.
In short, your emails would just stand out from the rest. There are also several sales psychology strategies you can implement with design elements in your HTML email.
For example, you can use arrows or leading lines to guide prospects to CTAs, use color theory to evoke emotions or use interactive buttons to improve email engagement.
Aside from the design elements, there are more opportunities for tracking and analyzing key data from prospects with HTML. This lets you monitor email open rates, CTRs, or reply rates to optimize and improve CRM strategies.
The Disadvantages of HTML Email
While popular ESPs like Gmail can easily handle HTML, that’s not the case for all. HTML emails can end up as jumbled code, and images or graphics can also be blocked by default.
That’s because too many HTML emails are tagged as either spam or promotions. You don’t want to land on either. In most cases, it’s not even the HTML email’s fault but the users.
Email is used heavily as a marketing tool instead of a communication tool. Even the most visually appealing, well-designed HTML email can be sent to spam.
It’s the lack of personalization that goes with HTML emails that may cause its downfall. It could either be too promotional or too salesly.
HTML Email Best Practices
Before going into how to create an HTML email, we need to understand the following best practices to ensure successful campaigns:
Identify The HTML Email’s Purpose
Are you sending a transactional email? Is the email a promotion for a new product line? Or are you looking to ask for a survey? Aligning the goal to the design is key to a great HTML email.
Each type of email will need a unique layout and approach. For example, a transactional email can be straightforward. Only basic design and branding elements are needed.
Meanwhile, marketing emails need to be visually engaging. But it also has to have a clear call-to-action and not overwhelm prospects with the visual content.
The goal should align with the design and layout of the email. Subscribers shouldn’t be confused when they get the email.
Understand Your Audience
While you can’t do a 1:1 personalization with HTML, you can get close using segmentation strategies and leveraging customer data from your CRM.
For example, segment A might respond better to promotional emails vs segment B. Instead of focusing on nurturing campaigns for segment B, you double down on segment A instead.
It’s also important to know what devices your audiences mostly use. If your audience mainly opens their emails using smartphones, you’d want a mobile-first HTML design.
Use Responsive Design
Your emails will likely break without responsive design. Nobody wants to read a janky email. Before sending out campaigns, make sure the email is tested on all devices including smartphones, tablets, and desktops.
Ensure that design elements make sense when they’re viewed on a different screen. For example, some designs might work well when viewed top-down but entirely different from left to right.
Standardize the Fonts
Having a standard font across all marketing elements ensures that you have consistent branding. It’s best to use web-safe fonts for emails to ensure texts appear nice and clean for all prospects, regardless of the device or email service provider they’re using.
If you’re brand uses a unique font for branding reasons, be sure to include a web-safe font as a default fallback for your CSS just in case the ESPs can’t read the font you’re using. If the primary font can’t be read, the ESP can just default to the web-safe option.
Some of the most popular web-safe fonts include:
- Arial
- Brush Script MT
- Courier New
- Georgia
- Impact
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
Avoid JavaScript, Flash, and Embed
JavaScript, Flash, and Embed aren’t supported by a lot of email clients. Only focus on creating email structure and design elements using HTML and CSS.
Flash and embedded elements can be flagged by ESPs or any third-party antivirus or firewall program. It’s best to stick to the tried and tested HTML and CSS. Both have great support and are used across various programs and platforms without any major concerns.
How to Create HTML Emails
HTML emails don’t need to have the fanciest designs. Even emails with simple email signatures are already considered HTML. But if you’re looking to create emails for newsletters or promotions, there are several drag-and-drop email builders out there.
For example, you have tools like HubSpot that offer pre-formatted HTML templates. But if you want to code the HTML yourself, you need to be familiar with these fundamental elements:
- Header: This is what your recipient sees at a glance when your email pops up in your inbox. Make sure it is succinct, yet eye-catchy.
- Body: The main message of your email needs to focus on engaging with recipients. Focus on emphasizing benefits, not the features.
- Footer: Your footer can have key details like contact information, your email signature, and an unsubscribe button.
Here’s an example of what a simple HTML email looks like from a builder like Design Modo:
How to Design High-Converting HTML Emails
Learning how to make an HTML email is pretty straightforward. You don’t need to know any actual coding and you just have to follow best practices to ensure the email doesn’t break.
Designing an HTML email for conversion is an entirely different topic. Here’s what you need to know about creating HTML emails that convert:
Clear and Compelling Subject Line
In every email, subject lines should be short, attention-grabbing, and accurately reflect the main point of the email. Don’t rely on overused emails like, “Quick question?”
Instead, try adding personalized elements to your email. You can use the recipient's first name, company name, or industry. A good example is pain point + industry.
For example: “Is {{company name}} struggling with {{pain point}}? Here’s an easy fix”
Subject lines can also be used to create a sense of urgency (limited-time offer, promo expiring fast, or limited slots available).
However, be careful when using those subject lines as they can get caught in spam filters. If ESPs don’t tag them as spam, they’ll likely be sent to the promotions tab instead.
Mobile-First Design
Most email users use mobile devices. To ensure the email you design seamlessly adapts to different screen sizes, create a single-column structure.
This design makes it easier to read on smaller screens. Interactive elements like buttons for call-to-action should be easy to spot and more importantly, easy to tap.
Engaging Visuals
Use visually appealing images relevant to the email body. But don’t use a file size that’s too big. Before uploading, make sure it’s compressed while retaining high quality.
There’s the option of converting the file to more modern formats like Webp to save space. However, this can break the image if the ESP doesn’t support this file type.
As a rule of thumb, you should display the most engaging content above the fold. For example, if you’re sending a discount email, the discount should be the first thing your audience sees.
But always remember not to clutter the email with too many elements. Keep the design clean, focused, and aligned with your brand identity.
Persuasive Content and Copy
With HTML emails, you have a lot more space for visuals. That means the copy that’s included should count. Use simple language that’s straight to the point.
Highlight the benefits of your offer and how it solves problems rather than features. You can also use elements from persuasive sales email copywriting in your HTML newsletters.
Ensure that a clear CTA is nudging the recipient to a favorable action (Shop Now, Learn More, Sign Up). You can also use a CTA that’s relevant to your topic.
For example, if you’re selling electric guitars at a discount, instead of saying “Get your discount” you can say “Start Rocking Today!”
Personalization and Segmentation
You can use tools like Instantly CRM to segment your customer database. You can segment based on interests, demographics, behavior, or purchasing history.
Don’t forget to add dynamic elements to your HTML email. Even simple personalizations in the email like {{first name}} can go a long way.
Testing and Optimization
To improve the performance of your HTML emails you need to track what works and what doesn’t. Test different subject lines, CTAs, images, and layouts to see what performs best.
Instantly.ai can help you do just that. You can A/B test different email sequences, CTAs, or email copies to find which one works for what specific segment.
You can also enable the auto-optimize feature. This finds your best-performing email. Then, stop sending the other variations and send that version to the rest of the recipients on your list.
Key Takeaways
HTML emails are great for visual engagement and brand building. The best part is you don’t even have to learn how to code to design high-converting HTML emails.
But, there are pros and cons you need to consider. Some ESPs filter out HTML emails for security reasons. Others send them to the promotions inbox instead.
That’s why it’s better to use HTML emails for things like newsletters where recipients subscribe to your emails. To recap, if you want to design high-converting html emails, remember to:
- Use clear and compelling subject lines
- Create a mobile-first design
- Use engaging visuals
- Put the most important content above the fold
- Personalize and segment based on interests and demographics
- Test and optimize campaigns for better results
If you want to send HTML emails with high deliverability, have the option to send plain text emails, and auto-optimize A/B testing, Instantly has you covered. Try Instantly today.
