We are launching soon, leave your email to be the first who gets the full version
HTML emails: most common issues and how to avoid them
7 min read
•
•
by Alena Parfisenko
job-4-4
seq-1-2
HTML coding for emails is no fun whatsoever: it’s so outdated it has seen dinosaurs, and so inconvenient it makes you wish you never took this career path at all. Thankfully, Drag & Drop email builders exist, so you can avoid it… But in some scenarios, you still have to deal with HTML. And you’re a marketer, not a programmer, so yeah — no fun.
When an HTML code is ruined, ESPs can’t load it properly and the email falls apart. EPSs sense that, too: in many cases, if something’s off, they’ll just send your email straight to the spam folder or even refuse to let it through. And you don’t want to lose a campaign like this, do you?
We know how sickening the email HTML experience is, and we want you to be armed and ready for it. This is why we talked about HTML basics in the previous article, and why we’re writing this one about the most common mistakes. We’re going to go over them one by one, and by the end of this, you’ll be sure to never make them and accidentally ruin your emails. Let’s begin!
The headless mailman
There’s one mistake that ensures your email never gets delivered right at the start. No matter how great your code is from that point forward, it’s not going anywhere with its head cut off.
See, at the beginning of every HTML email, you must define how ESPs’ engines are supposed to read and render the code — it’s called the head of an email. There, you specify the title, meta tags, document type, text style, CSS animations, media files, etc. It’s a solid chunk of code, and if it isn’t where it’s supposed to be, consider your email never existed — no ESP is going to let it through.
The head looks something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>✉️This is not just a letter. This is a game-changer!</title><meta name="color-scheme" content="light dark"><meta name="x-apple-disable-message-reformatting"><meta name="supported-color-schemes" content="light dark"><meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no"><!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]--><!--[if mso]>
<style type=”text/css”>
td {
font-family: Arial, sans-serif;
}
</style>
Make sure this monstrosity is not missing any crucial elements — or not missing altogether.
Weak tag game
No running around on this one: it’s serious business. One small mistake can lead to the entire layout sliding into the abyss — it’s an unclosed tag.
Most tags in HTML go in pairs: one’s an opener, and one’s a closer. For example, <a> </a> — and the specifics must be contained between the opener and the closer. If you don’t close a tag, it won’t work.
Using the previous example, it may look like this:
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]--><!--[if mso]>
<style type=”text/css”>
td {
font-family: Arial, sans-serif;
}
</style>
The closing </xml> tag is easy to miss considering it’s surrounded by multiple other pieces of code. So watch out for your tags — you can use code samples if you’re not proficient enough in HTML. Anything that helps a marketer avoid turning into a programmer is good.
Color intricacy
When you’re coding colors, keep in mind that some email apps fail to recognize abbreviated three-digit color codes. Unless you’re the one for fun little experiments at work, use full six-digit codes instead — or the colors might render switched up or completely disappear. So you’re much safer using good old #000000 instead of #000.
Not what it seems
When you’re integrating links into your emails, don’t forget that ESPs hate link shorteners and redirects. If you plan on coding the link to look neat and short or want to redirect your subscriber elsewhere for some reason, don’t bother — this email’s going nowhere. ESPs check if the final webpage’s address is the same as the link claims — and if it’s not, they assume it’s either spam or fraud. The same main happen if you use a full URL instead of a correct hyperlink.
The best solution is simply embedding links into text or images.
Cloudy issues
There’s another type of link you shouldn’t embed in your email code: cloud storage links. Email HTML will only allow for rendering images via direct links, whereas a link to a cloud storage file won’t be direct even if your file settings are set to open. As a result, your emails will be rendered without these pictures at all. We mainly talk about images because people most often have this issue with them, but it applies to other file types, too.
What can you do instead?
Here are three simple options:
- Use online services like imgur.com for direct links;
- Upload your files to the email editor from the start;
- Upload files to your hosting.
No ALTernative
Another basic mistake when it comes to images in your emails is forgetting that some ESPs don’t render them automatically and some users have media loading disabled. For this sort of situation, you have to include ALT tags — special texts displayed instead of pictures if the latter is not loaded.
If the image is essential, try to describe it or just ask to turn the media files on. If the pictures are purely for aesthetic purposes, you can leave the ALT tag text fields blank, but you still need to include them.
Missing option
While we’re still on the topic of embedding links into your emails, let’s highlight another important issue: the unsubscribe link. We talk about it a lot since the unsubscribe link is one of the absolutely crucial elements for one too many reasons.
Why do you need to always include the unsubscribe link in your emails?
- It’s legally required for all marketing emails;
- It saves emails from being auto-marked as spam or blocked;
- It keeps sender's reputation and deliverability rates high;
- It keeps your recipient list nice and clean;
- It gives the recipients a choice and builds trust.
All of these reasons are important, but for this article, the second one matters the most: emails without the unsubscribe link will automatically be sent to the spam folder or blocked altogether.
This link is no big deal in terms of design or complexity, and not having it has too high of a price. So do yourself a favor and add this link to your default email footer if you haven’t already, and forget about it for good.
Enough about mistakes
There’s always much more to cover, especially when it comes to a topic like issues with email HTML. However, we went over the most common and basic mistakes that are easy to miss and do an amazing job of ruining one’s hard work.
It’s not like email HTML will become fun after reading this article, but at least you’ll save yourself the frustration of trying to figure out why your entire email’s gone terribly wrong. We hope we helped you prevent such troubles.
Related Content