You’ve written and designed your email, and now, for it to be fit for purpose, you’re going to need to turn this design into HTML.
The Limits of HTML Code for Emails
Just like websites, emails use HTML (HyperText Markup Language). The history of HTML for email is full of challenges and obstacles. One such obstacle appeared in 2007 when Microsoft updated its Outlook application, frustrating email coders.
With Outlook 2007, Microsoft decided to choose Word as its HTML rendering engine (the software that translates HTML code into graphic content) rather than the Internet Explorer engine used up to that point. Things as basic as GIFs were no longer readable, and various bugs blocked the rendering of valid code.
Cyber Security in HTML
HTML coding can be difficult for any company. When you’re online, you voluntarily visit a website. With email, it’s the opposite – the message comes to you. That poses a serious security issue. (Which explains why Microsoft chose Word to render HTML in Outlook) Hackers might try to send malicious code messages to install a virus on your machines or spy on you, among many other such nefarious activities.
Inboxes need to limit risks. That is why it’s impossible to run JavaScript in an email. But it goes further than that. There’s often a difference between the code you send in your email and that received by the recipient. Sometimes, some of the code is ignored, if not deleted altogether.
Coding For Specific Users
Obviously, each company codes in its own special way. Whether it’s Gmail, Yahoo!, Apple, or Microsoft, almost all HTML tags over almost all inbox providers have specific features.
That’s why it is necessary to create an email in HTML using tables, even though this technique started falling out of use in the early 2000s!
When you add this to the fact that these days it’s not acceptable to send an email that won’t display responsively on a mobile phone, you’re starting to understand how complicated the task is.
Luckily, various resources can tell you how different HTML functionalities are supported in different environments.
To mention a few:
Caniemail.com: Can I email brings together all HTML tags and CSS properties, giving you a percentage compatibility for each according to the market share of the email clients and details of the support. Check them out at their site.
Campaign Monitor: This Australian email service provider, ESP, maintains a guide to the different CSS properties and the support for each email client. Check them out here at their site.
HTML coders who are not used to coding for email often struggle to work within these limitations. It may sometimes be good to work with specialized email agencies or use an email builder (see next section).
In any case, knowing your audience will help you to target the HTML coding techniques that you’ll need.
Use an Email Builder or Industrialize Your Production
As you’ve just seen, HTML coding for emails is no easy task, and not everyone has the skills to do it. Good news: loads of tools exist, so you don’t have to get your hands dirty.
The advantage of these tools is that they’re often straightforward to handle and will save you lots of time. On the other hand, you might find your creativity limited or risk sending out emails that look like everyone else’s. It’s not always easy to stand out from the crowd.
These tools are known as email builders. Let’s take a look at your options.
Your ESP’s Email Builder
Many ESPs have designed internal email builders. Often, the platforms aimed at SMEs have the most complete solutions.
More specialized solutions, typically used by large companies, rarely have a user-friendly, high-performance email builder. Their clients tend to prefer using specialized agencies or solutions.
Some common ESPs that have an easy-to-use email builder are:
Sendinblue
Mailchimp
Mailjet
Mailify
Business Messages
Dedicated Services – Often Free
In addition to ESPs, many start-ups have created email builders that are even simpler, better performing, and contain more options. They are aimed at companies and email marketers that need to create emails either from scratch or using templates.
Here are a few such solutions:
Professional Solutions for Industrialization
For companies with more specific design needs such as their look and feel, production automation, template translation, etc., you can find professional email builder solutions, such as Layout.
Hand-Code Your HTML for Full Control
The other – and most traditional – solution is to code the HTML by hand. That means taking (or creating) a design, breaking it down, and coding it in HTML from start to finish. Hand-coding is a mix of art and science and can take many years to master. Unfortunately, we won’t be able to tackle this approach here – it would require a separate course!
To do this, you’ll need to know the basics of HTML coding and some solid email-specific skills. Luckily, there are lots of resources online that you can learn from.
Otherwise, some agencies and freelancers specialize in hand-coding HTML for email. If your company can afford it, this is a good way of getting high-quality work that will be compatible with most email clients.
Test an Email’s HTML Code
Once you have your email’s HTML code, you need to check that it renders appropriately in different environments. The term rendering describes what the finished HTML code looks like when it’s loaded into an email client like Gmail or Outlook, whether on a mobile, a tablet, or a computer.
How the email renders will be affected by a wide range of factors, including:
Device (phone/tablet/computer, etc.)
Operating system (iOS, Android, Windows, Mac, Linux, etc.)
Email client (Gmail, MS Outlook, Yahoo! Mail, etc.)
Version of each of the above
Language
Window size
Whether images are turned on or not
It’s easy to get overwhelmed by the range of possible environments in which your recipient might be experiencing your email, so testing isn’t just a nice idea; it’s a vital step.
One approach is to send test emails to different mailboxes, testing as many settings as possible. As you can imagine, this is tedious work, and it’s hard to test all possible environments.
In response to this, perhaps an unsurprisingly number of companies specialize in automating email rendering tests. Two of the most-used tools on the market include:
The idea is simple. You upload your HTML code to the platform, and it generates screenshots from approximately 40 email clients. You can also send a test email from your email router directly to one of these platforms, which will again produce screenshots for you.
There is no excuse for ever having an email display incorrectly in Gmail or Outlook… most of the time!
Let’s Recap!
Emails are not websites.
Email coding is not held in high regard by web developers.
Various email-building solutions exist so you can avoid HTML coding.
You’ll need to learn specific skills if you want to do HTML coding for emails.
You must test your code in different email environments.
There are email rendering solutions to automatically test rendering.
In the next part of this course, we’ll tackle the mail-out phase of your campaign. But before that, let’s take a look at the different campaign-management solutions on offer.
