Which Code Should I Include in Every Email?
We know email development can be a tough nut to crack. With so many different email clients and a lack of email development standards, one of the most important things you can do is ensure your email has a solid foundation. Once you have this foundation in place, your email is more likely to display correctly in different devices, browsers and clients.
Table of content
-
01
The Basic Structure of an Email -
02
Breaking Down the Head of the Email - What Is the DOCTYPE?
- What Is the HTML Tag?
- How to Add Meta Tags
- How to Solve DPI Scaling Issues in Outlook
- Adding Styles and Media Queries
-
03
The Body of the Email - Setting Up the <body> Tag
- Adding a Preheader
- The Container Table
-
04
The Most Important Part of All
The Basic Structure of an Email
Unlike developing for the web, developing for email has no real standards. Email clients choose (seemingly at random) what and where to support certain HTML or CSS elements.
This lack of structure allows email developers a certain amount of freedom over their code and how they choose to craft it. Developers often have to decide between using <div> tags instead of tables to structure their emails. They also must decide whether to use empty table cells, padding or margins to create space in the email.
With that in mind, let’s look at the basic structure of an email, why we include certain pieces of code, and what those pieces of code do. Below you’ll see the entire code snippet for our email foundation. We’ll explain what each piece does.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" 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.0">
<title>Our page title</title>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style>
@media only screen and (max-width: 580px) {
{code here}
}
</style>
</head>
<body style="margin:0;padding:0;min-width:100%;background-color:#ffffff;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"></div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width: 100%;" role="presentation">
<tr>
<td align="center">
{your email code}
</td>
</tr>
</table>
</body>
</html>
Breaking Down the Head of the Email
The head of the code is where we set the email up. We tell the browser or device what to expect by setting doctypes, metadata and styles for the document. Sound confusing? Relax, we’ll make it simple.
What Is the DOCTYPE?
Developers use the DOCTYPE to tell the browser to expect an HTML document. This prevents the browser or email client from rendering the document (in this case, the email) in quirks mode. When the client renders the email in quirks mode, the email may not render properly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The DOCTYPE you use depends on which email clients you need to support. Some email clients will respect our DOCTYPE, others will enforce their own, and others will not allow us to use a DOCTYPE and strip it entirely.
It’s important to know which DOCTYPES work in different clients, so we recommend reading through this article on DOCTYPES and HTML email.
What Is the HTML Tag?
The HTML tag lets the system know we’re going to be writing an HTML document. We also include a few extra pieces of information in this section of code.
First off, we set a language of “en” for accessibility purposes, which means the email is in English. These two letters tell screen readers, and other non-human systems such as search engines, to expect a certain language and pronounce or display the words a specific way. If the email was written in Spanish, for example, we would use “es.” You can also refer to this handy list of HTML language codes.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">We’re also including a Vector Markup Language (VML) namespace declaration, to ensure our email will render any VML we decide to add. VML is used specifically for Microsoft Outlook clients and gives us more control over some elements of the email. It also allows us to use code that is not supported, such as backgrounds, in those older Outlook clients.
How to Add Meta Tags
The <meta> tags we include provide metadata to the browsers and email clients. Metadata, which is not visible to the reader, helps give context and information about the content of the email.
It’s worth noting that there are a lot of different <meta> tags, but we want to focus on the ones which give us that solid foundation.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
The content meta you see first is the most important one. This tells the client what type of content to set. For most emails, this will be UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This meta tag will tell the browser or device to render the page width to the native width of the device’s screen. This helps with your responsive code, but if you have a non-responsive email, you should leave this tag off.
How to Solve DPI Scaling Issues in Outlook
We all know Outlook email clients have their quirks (we outline a few of them in this free coding guide). Arguably, the worst of the bunch is the notorious DPI scaling issues.
<!--[if gte mso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]-->
This piece of code in the head targets all Outlook clients and allows us to force a lower DPI rate inside the code. Lowering the DPI rate helps prevent image scaling, which causes rendering issues. It’s worth noting that you must include the VML declaration we covered above or this code will not work.
Adding Styles and Media Queries
The final section included in our head is the <style> block. After Gmail added support for embedded styles and media queries in 2016, we saw a large increase in the use of embedded styles. This meant we didn’t need to inline our CSS as often.
Historically, email developers have needed to inline CSS code (writing your CSS styles on your HTML elements, rather than externally in an embedded or external stylesheet). However, there’s some debate over whether this is needed now. Before you decide whether to inline CSS code, we recommend that you look at your subscriber list and see what clients and devices people use; some clients, such as international email clients, still do not support <style> tags.
<style>
@media only screen and (max-width: 480px) {
{code here}
}
</style>
In this block, we are using an embedded style sheet to include media queries in our email. Media queries allow us to create a responsive email by detecting the width of the display. For this purpose, the most commonly used query is max-width. When the media query detects any width that is less than the max-width specified, all the CSS within the query will take effect. This allows us, for example, to resize our headings to fit better on a mobile device.
The Body of the Email
The body of the email code is where we get into the nitty-gritty and start really coding our email. The body is where we put code that will translate to content on the page.
Although the body code will vary greatly for each email, there are a few elements to set and include in every email.
Setting Up the <body> Tag
<body style="margin:0;padding:0;min-width:100%;background-color:#ffffff;">
Above is a simple <body> tag, but we include a few email-specific resets to help our email render. We want to get rid of any rogue padding or margin issues, so we reset them to zero. We also include a background color, which will be changed depending on the design of your email, and a min-width of 100% to ensure our email renders at its full size.
Adding a Preheader
The next piece of code we include is a hidden preheader. Preheader text is the text that appears in the preview pane of email clients, helping you to provide context alongside your subject line.
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Preheader goes here</div>
We’re choosing to hide our preheader text, so we’re using a combination of setting the font, max and line heights to zero, the color of the font to the background color of our body, and setting opacity to zero and display:none. If your design has a visible preheader, we have a guide for coding that.
The Container Table
The final piece of code we’re going to cover is our container table. This is the name we give to the table that will house our entire email.
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width: 100%;" role="presentation">
<tr>
<td align="center">
{your email code}
</td>
</tr>
</table>
We want this table to be 100% width, so we set that in both HTML and CSS. This will help the email render at its full size. We also set our border, cellpadding and cellspacing to zero, to prevent any rogue spacing issues.
Finally, we add role=”presentation” for accessibility purposes; it tells screen readers to read the table as a presentation table, rather than a data table. When role=”presentation”, the screen readers will not read the row and cell number of a <table>
You’ll also notice we set an align=”center” on the <td> (table cell), this is so your beautifully crafted email code will sit nicely in the middle of our 100% width table, regardless of the device width we view it on.
The Most Important Part of All
Even if you’re using a solid foundation for an email, the most important part of any email process is testing. There’s no point spending the time making sure your emails look great on different devices if you don’t test them. When you use Email on Acid you can see how your email looks in more than 70 devices, giving you the confidence to hit “send.”
