What is an HTML email?
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Email Title</title>
<style type=”text/css”>
a:link {
color: #0000EE;
text-decoration: none;
}
a:visited {
color: #551A8B;
}
</style>
</head>
This is an example of what text is in the HTML code of an email (more precisely, these are the first lines of the email code). Before we move on to the potential problems that can arise when coding emails, let's briefly explain the essence of this topic. HTML stands for HyperText Markup Language, and an HTML email is an email created using custom formatting, i.e. encoding that provides more content options than a plain text email. When it comes to how it is created, it should be emphasized that email coding and web (website) coding are not the same, although the two are often confused with each other. Web coding has established web standards that are supported by all modern browsers. On the other hand, email coding is not just for desktop computers, phones, or tablets - there are a variety of applications that customers use to open emails. This means that there is no one standard way to write code for all these variations of devices and applications. In other words, what works for one person may not work for another.
HTML Possibilities in Email Marketing
It is obvious that HTML gives you more control over design and you can create emails with real visual appeal that matches your brand. By using different HTML tags in your code, you can, for example, customize the color, background appearance, different images, etc. Here is a list of the biggest advantages that come with HTML in your emails:
- You can add custom images, photos, color schemes, charts, links, polls, and more to your email.
- When done correctly, an HTML email is obviously more attractive and visually pleasing.
- Each letter design can be optimized to speak your brand language.
- You can add custom fields and hidden parameters to your HTML forms.
- Unlike plain text emails, the performance of HTML emails can be monitored using code that monitors downloaded images when an email is opened.
- Mobile-friendly design ensures that your HTML emails are also easily readable on smartphones and tablets.
- While Email Service Providers offer great visual editors, sometimes you may need new and very specific template features that may not be supported by drag-and-drop editors. With HTML, it's easy to edit or add new code and make such changes. This is especially important if you're troubleshooting some annoying rendering issues!
Possible Disadvantages of Using HTML
Yes, HTML offers a lot of ways to make your emails speak your brand language. Unfortunately, it’s still not possible to have a completely free hand when it comes to email marketing and coding. Many email clients don’t support the various HTML content options that you see on web pages because the clients aren’t as up-to-date as web browsers.
- Custom fonts and videos (both discussed below) are not supported by many email programs.
- Background images and GIFs may also lack proper support in email programs.
- If it is critical that the email reaches the recipient at a certain time, HTML emails may pose problems due to their technical nature.
- HTML code can become "heavy" and "clumsy", so emails may not reach the inbox.
- HTML errors can be difficult to find and fix – for example, a missing closing tag can cause a lot of email rendering issues, so it can take some time to find the error in the code!
When composing an HTML email, you should also be aware of those HTML elements that are blocked or do not work in almost all common email programs. These would be:
- JavaScript. This language is standard for web programming, but it is usually blocked in marketing emails for security reasons.
- iFrame. Short for “inline frames.” Despite being one of the oldest HTML tags, it is not widely used in emails because it contains scripts, so most email programs simply block it.
- Embedded Media. While video has more support than in the past, it still doesn't match the support in web browsers. So even if you try to embed media using email code, it's likely that it won't work as expected in most email clients. In addition, you should always think about the deliverability of your email and check that embedding video or other media in your code won't mark your email as spam.
- HTML forms. The purpose of surveys is to get responses, not just to show your readers what you're interested in. So you need to make sure your survey is functional. If your subscribers are spread across many different email clients, this can be confusing, as some inboxes may see your survey, but it won't be possible to flag and forward it. Instead of using an HTML form, try to drive readers to a landing page or website that contains your survey.
The Problem with Videos in Marketing Emails
Since this is a particularly relevant topic in the field of marketing, we focus more on the possibilities (and validity) of using videos in email marketing.
In email marketing, an embedded video is a video that is attached to a marketing email using HTML code. As you can see from the table above, most of your subscribers will not see it due to the settings of their email program.
Secondly, most mailboxes remove the part of the code to which the embedded video is attached (considering it a malicious script, "<embed>" is not allowed in email programs).
Let's compare different email platforms, for example, Smaily and Mailchimp. True, Mailchimp and some other platforms offer an alternative solution in their text editor (which can currently only be done manually on the Smaily side). This allows you to add a video link to the newsletter, where a screenshot of it is created, and a link to the video is added after it. Mailchimp does not allow you to add a part of the embedded code directly in the HTML code, removing it automatically. Video embedding does not work on the Smaily platform because it is not supported by the Smaily fonts (unfortunately, there is no video element). The HTML element allows you to insert arbitrary code into the text base, but it is removed either by Smaily or by the email client, as mentioned above, for security reasons.
As annoying as all this is, adding a video directly to an email may not be as useful as you initially thought, and in fact it may have some disadvantages.
Why You Should Avoid Embedded Videos
Adding a video to an email is a bad idea because if the video is in the email, it doesn’t leave much room for further user engagement. This means that people don’t have to go to a useful landing page or social media page to see the video. If you add a video to these pages, you can encourage people to take additional actions, such as signing up for a campaign or following a social media page. Also, depending on the placement in the email, it can happen that even if the video works in the recipient’s inbox, it overshadows the actual message of your email, other existing images, and more importantly, your call to action, which may go unnoticed by subscribers.
Typography: Try to Use Only Supported Fonts
Another element that needs a little more attention is the font. Unfortunately, email fonts are more limited than those for websites. Email clients like Gmail and Outlook have limited support for rendering fonts. As a result, you can only use basic, cross-platform fonts for your newsletters.
- Sans-serif fonts: Arial, Helvetica, Verdana, Geneva, Lucida.
- Serif fonts: Times New Roman, Georgia.
- Monospace fonts: Courier, Courier New.
How Email Forwarding Can “Break the Code”
In addition to what was described earlier, we will touch on forwarding messages from Outlook and other mailboxes as a separate topic. As expected, all email programs present emails differently, and when a subscriber decides to forward your email, some email programs change the code of the forwarded message.
So – How to Create a Successful HTML Email?
We've covered a few things that can go wrong with an HTML email. But what can you do to make sure your email is functional and enjoyable to look at for every subscriber using an email client? We'll give you some recommendations.
- Images in emails: Be sure to add width and height attributes to the image in your email to avoid potential image rendering issues.
- Image to text ratio. Remember not to overload your email with too many images and similar content. This not only strains the viewer's eyes, but also increases the likelihood of technical problems, such as ending up in the spam folder. So be sure to adhere to the recommended text-to-image ratio in your emails.
- Email code. Keep your HTML email code clean and simple. Use inline CSS styles instead of external style sheets or embedded style tags, as some email clients may simply remove them. Also, use tables for layout to ensure consistent rendering across email clients. Check your HTML code to make sure it is free of errors and follows best practices for email coding.
- Email videos. Due to compatibility issues with email programs, do not embed videos directly into the email. Instead, use a thumbnail image that links to the video, such as one hosted on YouTube or Vimeo. This way, subscribers can click on the thumbnail and watch the video in their browser, avoiding potential display issues. You can also add a link to the video on your Facebook page – this can also help you gain more followers on your social media accounts.
- Email fonts. Stick to trusted fonts to ensure that your text displays properly in all email clients. If you still want to use a custom font, include a fallback safe font in your CSS to ensure that your email remains readable even if your custom font fails to load.
- Have a copy. Always include a plain text copy of the email to accommodate subscribers who can't view HTML emails or who only want to read plain text emails. Also, make sure your email is mobile-friendly, as a significant portion of recipients open emails on their mobile devices.
- Choosing the right platform. There are different types of email marketing programs, and each one helps you structure your email differently. Even though some providers’ emails may look good, there may be some compromises made, such as limited font size, poor email client support, or font “lightness.” Smaily takes a general approach – to be as flexible as possible while still fully working with as many different desktop, web, and phone email clients as possible (including older ones).
- Test it! Remember to always test your email on different email clients and devices before sending it to your subscribers to spot potential issues and make any necessary changes.
To sum it all up
When creating a successful HTML email, you need to pay attention to various aspects such as graphics, images, code, videos, fonts, and other elements. By following best practices, optimizing emails for different email programs and devices, and choosing a platform that allows you to do this successfully, you can ensure a positive user experience and increase the likelihood of success for your email campaign. Good luck with your HTML codes!