It's upsetting when your HTML email, which you worked hard on, ends up in the spam bin. Ouch. Everyone has been there.
Because HTML emails have a 25% lower open and click-through rate than plain-text emails (in addition to having lower email deliverability and being despised by email spam filters), it's difficult to develop the ideal warm lead template.
The good news is that by following the best practices, you can still considerably increase email deliverability and prevent it from ending up in spam. So, I'm excited to offer 17 HTML practices that we utilize at Folderly, and by do so, you can join the 1% of outstanding marketing specialists that know how to get through to every user's mailbox.
By the end of this post, you'll understand how to design warm email templates that are responsive, accessible, and don't sabotage your email campaign due to low email deliverability.
The Article Walkthrough:
A Little Reminder When You SHOULD NOT Send HTML email templates
We’ve already written an A-Z article about plain text VS HTML emails. So, we'll not take much of your time and move to tips next. But let’s quickly summarize the key points on when you SHOULD and SHOULDN’T send HTML emails (because it's so much important to not kill your domain reputation!).
So, the rule of thumb is that if the audience is warm and has signed up for your emails, the message doesn’t need to be personalized and conversation-like, and it can’t be delivered via plain text, feel free to create a highly appealing warm lead email template based on HTML.
But โ๏ธ If you are sending emails to the cold audience (those who don't know about your brand yet) and want to create conversation-like communication with an emphasis on personalization, then ALWAYS ๐ฆ๐ง๐๐๐ ๐ง๐ข ๐ฃ๐๐๐๐ก ๐ง๐๐ซ๐งโ(unless your goal is to annoy either recipients or spam filters).
Best Practices: HTML Code Tips
Whether you're HTML-savvy or not, you can start building a solid HTML email marketing strategy without the fear of hitting spam folder with these best practices we recommend using Folderly clients.
Practice #1: Using DOM structure in your HTML email template code
| The HTML DOM (Document Object Model) is a tree-like structure that is the core of how your HTML "blocks"(like <p> for paragraphs, <div> for divisions, <h1> for headings etc.) are organized. Like a tree whose trunk splits into branches, each branch of the DOM structure has a tag element that is easy to manipulate. The DOM Structure starts from a single block at the top (the "document" or HTML tag) and extends downwards with branches (HTML elements like "body", "head", "footer") which are further divided into smaller parts (more specific HTML tags). |
Why it matters for your email deliverability?
โ
Well-structured DOM model ensures readability across all ESPS.
โ
DOM bridges the gap for HTML adaptability to mobile and desktop screens of different sizes.
โ
The DOM structure makes it easy to add, delete, and change elements.
โ
You can conduct A/B testing of different layouts, styles, and content more effectively.
Practice #2: Using <table> tag instead of <div>
Unless you’re creating a very simple email, one golden rule to follow is to code everything with <table> tag structure.
|
๐ก What is the HTML <table> tag? |
If you use <div> tag, it is more difficult to arrange elements correctly according for your design, because you should use Flexbox (a single-direction layout method) or Grid (grid-based layout system).
|
๐ก What is the HTML <div> tag? |
Email clients which doesn't not support Flexbox: Yahoo, Gmail, Outlook
Email clients which is not support Grid: Gmail (older version than 2020), Outlook, Yahoo!, AOL, Orange
So, the bottom line: <table> tag is the best option to go if you want to have perfect email deliverability across different platforms.
๐ Pro-tip from Folderly: If you’re crafting a complicated email, you want to nest tables. Nesting involves placing one <table> structure inside another, creating a hierarchy of tabular content. It gives precise control over the positioning and alignment of various elements. Also, for better cohesion across devices, apply "background" and "background-color" exclusively within the <table> tag.
Practice #3: Using commonly supported set of tags
When creating a warm prospect email template, ensure it looks good for everyone who opens it. To achieve this, you should use a specific group of tags (read: building blocks) that all email clients support. Here's a list of tags commonly supported across all ESPs:
Practice #4: Using meta tags in the <head> tag of the email
For an HTML template to be responsive, it needs to be adaptable to different screen sizes. Sadly, 1 in 5 email campaigns is not optimized for mobile devices.
Using meta tags ensures mobile-friendliness, which can increase unique mobile clicks by 15%.
Adding the meta tag in the <head> tag helps the email know when to make things bigger or smaller so that everything fits well on all kinds of screens.
It's like giving your email a friendly reminder: "Hey, when you're on a tiny phone screen, adjust things this way! And when you’re on desktop, scale things up to fit the screen." ๐
Example: <meta name="viewport"content="width=device-width, initial-scale=1" />
Practice #5: Not using JavaScript in HTML email templates
While JavaScript adds fun and interactive elements to websites, it's a big "no-no" for email templates. Email clients are like picky eaters—they block most JavaScript code since they can't handle it well.
Email services like Gmail or Yahoo use JavaScript to run smoothly. But they get a tad grumpy when they see JavaScript in emails. Why? Well, emails are like guests; if a guest brings something that messes up their home, the hosts (email clients) won't fancy it.
95% of websites worldwide run on JS, which makes it a core weapon for hackers looking to loot via email. Consequently, email clients play it safe by keeping JavaScript out. If your email contains JavaScript, it will be automatically blocked.
Practice #6: Using absolute URLs for all your links
Putting links in your emails gives directions to a place online. Now, there are two ways you can give these directions: make it vague or super clear.
Using absolute URLs means adding the complete address to the link, so there's no vagueness. Instead of adding "www.folderly.com/blog" which is a bit unclear, you should use "https://folderly.com/blog.” That way, the email knows where to take a person who clicks the link.
Practice #7: Using only full records for colors
In computer code, colors have their own special codes. These codes are different ways to describe colors, and one of such codes is the RBG record.
It's better to use the full-color code to ensure your colors look just right — everywhere. Using a full code like "#d4d4d4" rather than a shorter code helps computers and devices understand exactly what color you want without confusion.
Practice #8: Using required attributes for HTML <table>, <span>, <img> tags
We’ve established that HTML tags are the building blocks for your warm email template. For these tools to work just as you want, giving them the right instructions (or attributes) is important.
When you use the <table>, <span>, and <img> tags in your webpage, you should use the required attributes for each of them.
Using the right properties removes any extra spaces, default styles, or borders that might show up by mistake. This way, your content looks clean and tidy.
Practice #9: Not overusing the image (<img>) tag
When creating a warm intro email template, it's tempting to use lots of pictures to make it look amazing. Keep in mind that many email programs hide images when users open emails.
When designing emails, imagine that these images won't appear immediately. Also, some background images won't even load. Your email should make sense and look good even without those images.
Other reasons not to get too trigger-happy with <img> tags are:
- Images take longer to appear because they need to be downloaded. It’s like waiting for a picture to load on a slow internet connection—it's not fun. Also, images use more data, which can be a problem for people with limited data plans.
- Using too many images might get your email flagged as spam. 36% of spam emails are marketing emails. To be exempt from that statistic, minimize using images in your warm lead email templates.
Extra HTML Code Tips
Here’s a brief overview of other small tips, so you can create an excellent HTML template:
Use padding (additional space inside an element) with <td> tag for indents. Otherwise, not all email clients can make your indents correctly.
Example:
‹td style="padding: 10px;"></td>
Use property "background=" and "background-color =" only with tag <table>. The Gmail email clients can't read this property if a customer uses the Safari browser.
NoteโSome email clients don't support property background images=". If you do use a background image, set a background color as an alternative in case the image doesn't load.
Use absolute URLs for your image locations.
For example:
Instead of img src="images/headline.gif", use img src="http://go.pardot.com/images/headline.gif"
Don't forget to add the following attributes when inserting images, so they won't break in different clients: sr, alt, width, height, border.
Example:
<img src="https://absolute-path-to-image.jpg" alt="Useful alt text" width="500' height="300" border="0" style="border:0; outline:none; text-decoration:none; display:block;">
Since not all email clients can scale down image dimensions, make sure to pre-scale them yourself. It will save you from several layout issues and complaints from our recipients.
The image dimensions must be whole-number pixel values.
Example:
<img src="https://absolute-path-to-image.jpg" alt="Useful alt text" width="500' height="300" border="0" style="border:0; outline:none; text-decoration:none; display:block;">
HTML Design Tips
When it comes to designing HTML emails, there are a few design strategies to keep in mind:
Practice #10: Not forgeting about the mobile experience with the help of media queries
More people use smart devices. Internet traffic from mobile devices rises annually. Mobile devices generated 48.71% of Internet traffic in Q1 2019. In Q1 2023, the number reached 60.89%. Mobile-optimized emails will definitely boost your marketing.
Thus, when designing emails, consider mobile responsiveness.
This is where "media queries" come in. They're like special instructions for your email design, creating different layouts based on device size and configuration.
It’s basically giving the instructions, "Hey, if you're being read on a smaller/larger phone screen, adjust content to fit the screen."
But not all email clients understand media queries. Still, whether they get the memo or not, it’s advisable to use the queries. A great trick to make your email content flow smoothly on any screen size is to design your email in a single column.
Practice #11: Keeping Your Email 600-800 pixels maximum width
Many email platforms now show a sneak peek before readers open the email. This is the "preview pane." Emails between 600 and 800 pixels perfectly fit inside, allowing people to read without scrolling.
Keeping your email 600-800 pixels wide is like framing your painting—all important parts are preserved, and no awkward scrolling is needed. Your email looks great on any screen and improves the reader's experience.
So, remember this rule of thumb:
โ The ideal email width is 600–800 pixels. Anything larger forces readers to scroll sideways, which is annoying. However, if you choose to stick to 700-800, you must thoroughly test them across all popular email clients. Gmail, for instance, often hides the background color for 600–800 pixels over 640 pixels.
Practice #12: Limiting the number of links
When creating a warm leads email template, you may want to include many links to direct your readers.
However, when it comes to links, less is more. Spam filters get triggered when an email has too many links, as they label the sender to be a potential threat.
To avoid this, limit the number of links included in your emails. Instead of bombarding your readers with a long list of links, focus on the most crucial links to your email objectives and marketing campaign outcome.
Practice #13: Minding The Proper Fonts
When choosing fonts for your emails, it's important to pick ones that everyone can read comfortably.
Avoid using a font size smaller than 10 pixels, as this can make the text difficult to read. A good rule of thumb is that your email font should be readable even at arm’s length and on a small mobile screen.
Another guideline is to opt for fonts supported by all email clients. This way, you can ensure a consistent rendering across different devices.
Some universally-supported fonts are:
Outlook HTML Optimization Tips
Being one of the oldest email clients presents unique challenges with correctly displaying messages. HTML emails are displayed poorly to anyone who isn’t a fellow Outlook user.
This is why we recommend certain rules for optimizing emails for Outlook. Since Outlook relies on outdated protocols and methods to render HTML content, these outdated methods can lead to inconsistencies in design & layout.
When you follow Outlook optimization guidelines, your emails are adapted to work within the limitations of this older email client. This boosts your chances of having your messages displayed as intended with your visual identity intact across all recipients' inboxes.
In the world of HTML optimization, tips abound. Here are some of our top picks:
Practice #14: Using Ghost tables for Outlook
When working with emails, especially in Microsoft Outlook, a trick called "Ghost tables" can bring order to your email layout.
No point sugar-coating it: Outlook is a bit old-fashioned in how it reads and displays emails. To help it understand your email's design, you can use special tags, like secret codes called ‘MSO tag’.
These tags from Microsoft are developed to be recognized and displayed by decoding a language that is peculiar to only Outlook.
Ghost tables are like creating a cozy space within your email where Outlook will pay attention. They help Outlook see and understand your email's structure and layout. Hence, Outlook reads your email correctly and displays your content properly.
Practice #16: Using conditional comments
Conditional comments tailor your email's code to match the preferences of different email clients. For older clients like Microsoft Outlook, they’re a way to customize how content is displayed in a warm email template.
These comments are like special notes you leave in the code that says, "If this email is being read in Outlook, do things like this."
For instance, you may need a different font or layout to show your email correctly. Conditional comments help you provide those instructions without botching the email layout to other email clients. It ensures your email looks its best, no matter where it's being read.
Practice #16: Designing your buttons using a <table>
When designing buttons for your warm prospect email template, one crucial consideration you want to observe is how email clients handle them.
For instance, it is typical for the regular <button> tag to malfunction in Outlook. So, a safe rule to follow here will be to design your button using a <table> tag.
While Outlook might not interpret the <button> tag well, the <table> tag displays correctly even on Outlook. With it, you get a smooth display no matter where your email is opened.
Practice #17: Image width should be given both as an attribute and style
When working with images in HTML email content, it's best to define their width and height along two requirements: an attribute and style.
The attribute is a direct specification in the code that tells the browser how wide or tall the image should be. The style is an extra way of confirming the instruction.
Using both the attribute and style increases the chances that your image will be displayed as intended on every email client—even Outlook — as the space attributed to the image will be reserved when the page loads.
Conclusion: Email Deliverability Goes Beyond HTML Template Optimization
While these best practices are crucial for effective warm outreach, achieving successful email deliverability involves more than just optimizing your HTML templates.
