What Every Email Developer Needs to Know
All you have to know about HTML email in one article.
You may love it, you may hate it, but given that you're on the Email2Go site, I'm sure you're working with HTML emails. Historically, email has been one of the most valuable and important communication channels for companies.
When it comes to email marketing, every dollar spent can turn into 30 to 40 dollars, provided that your campaign was made and implemented correctly.
Transactional emails that require a response to some action, such as purchases, delivery notifications, or account actions are even more valuable. They generate huge revenue for companies, and it is very important for email developers to understand this business and be aware of the basics of HTML email.
That's what I'm going to talk about today.
Email Types
Email can be divided into two main types: marketing and transactional.
Marketing newsletters are the first thing that comes to mind when you think of HTML email. They are sent to the database of recipients that your ad campaign is targeting. These can be newsletters, coupons, or perhaps invitations to a webinar.
Transactional emails are more personalized and are sent in response to some event such as a response to a password change request, a notification about sending an item, or responses to various other requests.
When developing an email newsletter, it is important to try to decide which of the two types your message is. And it’s important to note that the rights of subscribers are important and need to be respected.
Authentication
So, you've created an email template—whether marketing or transactional—and it's time to send it. The first step is to configure the sending environment. Many people choose ESP services, such as Mailchimp or SendGrid. It's easier. But it is very important to understand how this works along with the basic infrastructure and authentication processes when sending emails. Of course, ESPs will do a lot for you, but we will need to set up records to get a guarantee that all your emails will be delivered to subscribers.
Email works through the Simple Message Transfer Protocol (SMTP). It relies on a series of checks made by the Internet service provider to make sure that you are who you say you are when you send the email. These are things like IP address and reverse DNS lookup.
While this is a good starting point, don't forget about other authentication methods, which also need to be properly configured to ensure good performance.
The Sender Policy Framework (SPF) is a record stored in your domain that provides additional authentication. Basically, you add SPF and TXT records to the DNS settings on the domain from which you send emails, which include the IP address of your mail server. Internet service providers can then verify your IP address as legitimate, which increases the likelihood of your email being delivered. The SPF record looks something like this:
v=spf1 ip4:128.0.0.1 -allDomainKeys Identified Mail (DKIM) is another mechanism for authenticating your message. With DKIM, you essentially set up keys that you use to take responsibility for the email you send. DKIM signs the email with a private key, which is then decoded using the public key. The public key is another DNS record for your sending domain, which looks something like this:
DKIM-Signature a=rsa-sha1; q=dns;
d=example.com;
i=user@eng.example.com;
s=jun2005.eng; c=relaxed/simple;
t=1117574938; x=1118006938;
h=from:to:subject:date;
b=dzdVyOfAKCdLXdJOc9G2q8LoXSlEniSb
av+yuU4zGeeruD00lszZVoG4ZHRNiYzRFinally, there is Domain Message Authentication, Reporting, and Compliance (DMARC). Although DMARC is not technically an authentication mechanism in itself, it informs the recipient that the message is protected by other mechanisms, such as SPF and DKIM. I recommend to not forget about it.
Multipurpose Internet Mail Extensions (MIME)
Any email consists of the message itself and the headers that carry information about this message. During email delivery, key/value pairs in the header (for example, return path, sender name, message subject) tell the post clients who is sending the message.
But don't forget about the value/key pair that builds the message itself. This is a Content-Type key that takes a multipart/alternative type value to notify the recipient that there are multiple parts in the message and display the corresponding part to the subscriber based on their preferences. When multiple parts are included in a message, it is called Multipurpose Internet Mail Extensions (MIME).
There are two main types of content used in all HTML emails: text/plain and text/html. For ease of delivery, you should always include a text version of your email that exactly matches or is related to the HTML version of your email.
Building a complete email message and accounting for various MIME headers and parts can be tricky. Fortunately, most ESPs do all the heavy lifting for you, allowing you to download only your HTML and text versions of the message. However, it is important to know how these messages are constructed.
and test them on dozens of different devises and mail apps START NOW
HTML and CSS
As an email developer it's no secret for you that most popular email clients only support a subset of HTML and CSS. Due to security concerns and aggressive (and often outdated) rendering engines, email clients will delete, modify, or ignore a lot of HTML and CSS (more on this here). This is why most email companies today rely on spreadsheets to structure content and built-in CSS to style that content. If you're creating simple single-column emails, you can get away with div-based emails, but for anything that requires multiple columns, you're stuck with using tables in some capacity.
The structure and content of your emails will mostly live inside HTML tables. Although this is painful, you don't have to worry about all the tags associated with the table, just only three: the table (table), the table row (tr), and the table cell (td). The table will be the container of your email, and the row and cell will be separate modules inside that email.
When it comes to styling content, you can make things relatively simple. For maximum compatibility, you should apply inline styles to the specific HTML elements you are trying to style. Although approximately 90% of the major email clients now support inline styles, you'll still get a few clients that won't display inline styles, resulting in poorly formatted emails. In order to avoid any shame in having your newsletter recipients receive absolutely different emails than what you intended and created, always test your templates on all possible devices and email applications.
For text, the basic CSS properties color, font-family, font-size, font-style, font-weight, and line-height will work wonders, as they are universally supported in all major email clients. For block-level elements such as headings and paragraphs, you can override the margin property to remove additional empty space. It is often more reliable to include spaces as indents in individual table cells, as some older clients do not like the margin property.
You can even use web fonts in many email clients just as you would on the web. Use the @font-face CSS rule or link it to an external style sheet and call them in the font stack. Just enable reliable backup fonts for clients that don't support web fonts.
Buttons are a bit more complicated in emails. While I generally recommend that you turn links into block-level elements and use a combination of background color, color, border, border radius, and padding to create buttons—just like you do on the web—some email clients don't display all these properties properly. Read more about this in Sergei Crawford's article here.
HTML email may not be your first choice for a project, but it's an incredibly powerful tool for every company. Both marketing and transactional emails provide a great return on investment, allowing you to use your development skills to directly impact your business.
Moreover, as popular as email is among consumers, many companies leave email as an afterthought. Email standards are absurdly low, so if you design emails that are even just slightly better than the competition, you have the opportunity to achieve great results that affect not only your business but also the lives of your subscribers.
