HTML email boilerplate: What it is and how to use it for faster email development
Summarize
Let’s start with the most important thing: if you work with Stripo, you don’t need HTML email boilerplates because Stripo already has all of this built in. And even if you need a custom template, you don’t have to create it from scratch using your own code; you can build it using ready-made elements.
You can code emails from scratch or start in the drag-n-drop builder and then add custom HTML elements. You can use both the drag-n-drop email template builder and the HTML code editor at the same time without switching between tools.
But if you still want to understand what an HTML email boilerplate is, why it exists, and how to build a responsive email template, let’s dive into the article.
Key takeaways
- An HTML email boilerplate is a foundational code structure that contains the core technical setup and helps prevent common styling issues that occur due to differences in how various mail clients interpret HTML and CSS.
- The core components of a boilerplate are DOCTYPE, meta tags, CSS resets, structural containers, MSO-specific styles, and client-specific fixes.
- You need to choose wisely whether email boilerplates are sufficient for your email marketing goals or it’s better to invest in custom templates.
What is an HTML email boilerplate, and why does every marketer need it?
If the term HTML email boilerplate sounds intimidating to you, let’s start with the basics. A boilerplate is simply a standard starting template (a reusable foundation that’s used again and again, with only minimal changes). That already sounds much less scary and far more understandable.
An HTML email boilerplate is a specially prepared piece of HTML code written using old but reliable techniques, such as tables and styles, so that the same email works consistently across dozens of different mail clients. This is very different from regular website HTML, which is designed for modern browsers.
In other words, it’s a code “skeleton” that includes all the essential technical settings needed to display an email correctly and avoid major styling pitfalls in HTML email design.
The main benefits of using such a boilerplate include:
- time savings;
- fewer layout and rendering errors;
- a more stable email structure;
- better compatibility across email clients.
So why do teams use these boilerplates? To avoid issues caused by inconsistent rendering across different mail apps.
Essential elements of an HTML email boilerplate (explained clearly)
So, what elements are included in an email boilerplate, and why are they needed in an email template?
- DOCTYPE and meta tags. These are service lines placed at the beginning of the HTML code. They work like instructions for mail clients, telling them how to display the email correctly.
For example, the X-UA-Compatible meta tag is a special tag for Outlook. It “forces” Outlook to use a better rendering mode instead of outdated ones.
The viewport tag is used for responsiveness in mobile devices. Because of it, email content adapts to the device width instead of shrinking text and images.
The DOCTYPE declaration tells mail apps that this is an HTML email, helping prevent layout issues and broken rendering; - CSS resets. These are rules that “reset” the default styles added by email clients. Each email client (Gmail, Outlook, Yahoo Mail, and others) has its own default settings for fonts, spacing, and margins. For example, using margin: 0; padding: 0; ensures your email won’t have extra spacing that you didn’t intentionally add;
- Structural containers. In email development, tables (<table>) are the foundation of an email’s structure. Tables are supported by all email clients: they don’t break in Outlook (which is critical), and they allow you to control width, alignment, and spacing;
- MSO-specific styles. These are special styles that work only in Outlook (MSO = Microsoft Office). Email marketers face the most issues with Outlook because it uses Microsoft Word to render emails, handles fonts and line height poorly, and ignores much of modern CSS. This is why Outlook-specific settings are used to ensure text remains readable in this client;
- Client-specific fixes. These are additional rules created for specific mail apps. For example, Apple Mail handles fonts and spacing differently, while Gmail removes parts of CSS and treats responsiveness in its own way. As a result, boilerplates include separate “adjustments” for these clients as well.
So all these elements are needed for your emails to render perfectly in major email clients.
Email layout boilerplate
Key features of email layout are the header, body, and footer. The header usually contains the logo and preheader text, as well as specifying global styles.
Code example for the header of an email template:
<td align="center" class="esd-stripe">
<table cellspacing="0" cellpadding="0" width="600" bgcolor="#ffffff" align="center" class="es-header-body" style="background-color:#ffffff">
<tbody>
<tr>
<td bgcolor="#ffffff" align="left" class="esd-structure es-p10" style="background-color:#ffffff">
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td width="580" valign="top" align="center" class="esd-container-frame">
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="center" class="esd-block-image" style="font-size:0">
<a href="" target="_blank">
<img src="https://ejshsqi.stripocdn.email/content/guids/cab_pub_6364d3f0f495b6ab9dcf8d3b5c6e0b01/images/6791493239462422.png" alt="" width="84">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
HTML tags explain different elements of an email and how they should be displayed:
- <p> defines a text paragraph;
- <h1> defines the main heading;
- <img> defines an image;
- <a> defines a clickable link, while the href attribute specifies the destination (a website, landing page, or unsubscribe page).
The next layout element is the body section. The body tag is the main part of an HTML document where all content is placed: text, images, buttons, and links.
Code example for the body section of an email template:
<td align="center" class="esd-stripe">
<table cellspacing="0" cellpadding="0" width="600" bgcolor="#ffffff" align="center" class="es-content-body">
<tbody>
<tr>
<td align="left" class="esd-structure es-p20">
<!--[if mso]><table width="560" cellpadding="0" cellspacing="0"><tr><td width="270" valign="top"><![endif]-->
<table cellspacing="0" cellpadding="0" align="left" class="es-left">
<tbody>
<tr>
<td width="270" align="left" class="es-m-p20b esd-container-frame">
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="center" class="esd-block-image" style="font-size:0">
<a target="_blank">
<img src="https://stripo.email/static//assets/img/default-img.png" alt="" width="100%" height="200" class="adapt-img">
</a>
</td>
</tr>
<tr>
<td align="left" class="esd-block-text es-p15t">
<h2>
Lorem ipsum text
</h2>
</td>
</tr>
<tr>
<td align="left" class="esd-block-text es-p10t es-p10b">
<p>
Unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</td>
</tr>
<tr>
<td align="left" class="esd-block-text">
<p>
<a href="http://#" target="_blank">Read More +</a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="20"></td><td width="270" valign="top"><![endif]-->
<table cellspacing="0" cellpadding="0" align="right" class="es-right">
<tbody>
<tr>
<td width="270" align="left" class="es-m-p20b esd-container-frame">
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="center" class="esd-block-image" style="font-size:0">
<a target="_blank">
<img src="https://stripo.email/static//assets/img/default-img.png" alt="" width="100%" height="200" class="adapt-img">
</a>
</td>
</tr>
<tr>
<td align="left" class="esd-block-text es-p15t">
<h2>
Lorem ipsum text
</h2>
</td>
</tr>
<tr>
<td align="left" class="esd-block-text es-p10t es-p10b">
<p>
Unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</td>
</tr>
<tr>
<td align="left" class="esd-block-text">
<p>
<a href="http://#" target="_blank">Read More +</a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
And the last major part of the layout is the footer. The footer typically contains contact information, company phone numbers, and an unsubscribe link, which is mandatory if you don't want to risk spam box banishment.
Code example for a footer:
<td align="center" class="esd-stripe">
<table cellspacing="0" cellpadding="0" width="600" align="center" class="es-footer-body">
<tbody>
<tr>
<td align="left" class="esd-structure es-p25t es-p25b es-p40r es-p40l">
<!--[if mso]><table width="520" cellpadding="0" cellspacing="0"><tr><td width="180"><![endif]-->
<table cellspacing="0" cellpadding="0" align="left" class="es-left">
<tbody>
<tr>
<td width="160" align="center" class="es-m-p0r es-m-p20b esd-container-frame">
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="left" class="esd-block-text es-p10b">
<h3 class="es-m-txt-c" style="color:#ffffff">
Contact Us
</h3>
</td>
</tr>
<tr>
<td align="left" class="esd-block-text">
<p class="es-m-txt-c">
Address: 1
</p>
<p class="es-m-txt-c">
Address: 2
</p>
<p class="es-m-txt-c">
<br>
</p>
</td>
</tr>
</tbody>
</table>
</td>
<td width="20" class="es-hidden"></td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="160"><![endif]-->
<table cellspacing="0" cellpadding="0" align="left" class="es-left">
<tbody>
<tr>
<td width="160" align="center" class="es-m-p0r es-m-p20b esd-container-frame">
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="center" class="esd-block-text es-p10b">
<h3 class="es-m-txt-c" style="color:#ffffff">
Recommended
</h3>
</td>
</tr>
<tr>
<td align="center" class="esd-block-text">
<p class="es-m-txt-c">
<a href="http://#" target="_blank">New Release</a><br><a href="http://#" target="_blank">Best Seller</a><br><a href="http://#" target="_blank">Promotional</a><br><a href="http://#" target="_blank">Pre Order</a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="20"></td><td width="160"><![endif]-->
<table cellspacing="0" cellpadding="0" align="right" class="es-right">
<tbody>
<tr>
<td width="160" align="center" class="es-m-p0r es-m-p20b esd-container-frame">
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="right" class="esd-block-text es-p10b">
<h3 class="es-m-txt-c" style="color:#ffffff">
Newsletter
</h3>
</td>
</tr>
<tr>
<td align="right" class="esd-block-text">
<p class="es-m-txt-c">
<a href="http://#" target="_blank">Forward</a><br><a href="http://#" target="_blank">Unsubscribe</a><br><a href="http://#" target="_blank">Home</a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
If you decide to code emails on your own, here is the minimum set of things you can (and should) start with when building an email.
Code example of an empty template:
<html dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<title></title>
<!--[if (mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]-->
<!--[if gte mso 9]>
<style>sup { font-size: 100% !important; }</style>
<![endif]-->
<!--[if gte mso 9]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG></o:AllowPNG>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if mso]><xml>
<w:WordDocument xmlns:w="urn:schemas-microsoft-com:office:word">
<w:DontUseAdvancedTypographyReadingMail/>
</w:WordDocument>
</xml><![endif]-->
</head>
<body class="body">
<div dir="ltr" class="es-wrapper-color">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#f6f6f6"></v:fill>
</v:background>
<![endif]-->
<table width="100%" cellspacing="0" cellpadding="0" class="es-wrapper">
<tbody>
<tr>
<td valign="top" class="esd-email-paddings">
<table cellspacing="0" cellpadding="0" align="center" class="esd-header-popover es-header">
<tbody>
<tr>
<td align="center" class="esd-stripe">
<table align="center" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" class="es-header-body">
<tbody>
<tr>
<td align="left" class="es-p20t es-p20r es-p20l esd-structure">
<!--[if mso]>
<table width="560" cellpadding="0"
cellspacing="0">
<tr>
<td width="180" valign="top">
<![endif]-->
<table align="left" cellspacing="0" cellpadding="0" class="es-left">
<tbody>
<tr>
<td width="180" valign="top" align="center" class="es-m-p20b esd-container-frame">
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="center" class="esd-empty-container" style="display:none"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
<td width="20"></td>
<td width="360" valign="top">
<![endif]-->
<table align="right" cellspacing="0" cellpadding="0" class="es-right">
<tbody>
<tr>
<td width="360" align="left" class="esd-container-frame">
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" class="esd-empty-container" style="display:none"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" align="center" class="es-content">
<tbody>
<tr>
<td align="center" class="esd-stripe">
<table bgcolor="#ffffff" align="center" width="600" cellspacing="0" cellpadding="0" class="es-content-body">
<tbody>
<tr>
<td align="left" class="es-p20t es-p20r es-p20l esd-structure">
<table cellpadding="0" width="100%" cellspacing="0">
<tbody>
<tr>
<td width="560" valign="top" align="center" class="esd-container-frame">
<table cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="center" class="esd-empty-container" style="display:none"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" align="center" class="esd-footer-popover es-footer">
<tbody>
<tr>
<td align="center" class="esd-stripe">
<table width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" class="es-footer-body">
<tbody>
<tr>
<td align="left" class="esd-structure es-p20t es-p20b es-p20r es-p20l">
<!--[if mso]>
<table width="560" cellpadding="0"
cellspacing="0">
<tr>
<td width="270" valign="top">
<![endif]-->
<table align="left" cellspacing="0" cellpadding="0" class="es-left">
<tbody>
<tr>
<td width="270" align="left" class="es-m-p20b esd-container-frame">
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" class="esd-empty-container" style="display:none"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
<td width="20"></td>
<td width="270" valign="top">
<![endif]-->
<table cellspacing="0" cellpadding="0" align="right" class="es-right">
<tbody>
<tr>
<td align="left" width="270" class="esd-container-frame">
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" class="esd-empty-container" style="display:none"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
CSS example of an empty template:
/* CONFIG STYLES Please do not delete and edit CSS styles below */
/* IMPORTANT THIS STYLES MUST BE ON FINAL EMAIL */
.rollover:hover .rollover-first {
max-height: 0px !important;
display: none !important;
}
.rollover:hover .rollover-second {
max-height: none !important;
display: block !important;
}
.rollover span {
font-size: 0px;
}
u + .body img ~ div div {
display: none;
}
#outlook a {
padding: 0;
}
span.MsoHyperlink,
span.MsoHyperlinkFollowed {
color: inherit;
mso-style-priority: 99;
}
a.es-button {
mso-style-priority: 100 !important;
text-decoration: none !important;
}
a[x-apple-data-detectors],
#MessageViewBody a {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.es-desk-hidden {
display: none;
float: left;
overflow: hidden;
width: 0;
max-height: 0;
line-height: 0;
mso-hide: all;
}
/*
END OF IMPORTANT
*/
body {
width: 100%;
height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
border-spacing: 0px;
}
table td,
body,
.es-wrapper {
padding: 0;
Margin: 0;
}
.es-content,
.es-header,
.es-footer {
width: 100%;
table-layout: fixed !important;
}
img {
display: block;
font-size: 14px;
border: 0;
outline: none;
text-decoration: none;
margin: 0;
}
p,
hr {
Margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
Margin: 0;
font-family: arial, 'helvetica neue', helvetica, sans-serif;
mso-line-height-rule: exactly;
letter-spacing: 0;
}
p,
a {
mso-line-height-rule: exactly;
}
.es-left {
float: left;
}
.es-right {
float: right;
}
.es-menu td {
border: 0;
}
.es-menu div {
vertical-align: middle;
display: block;
}
.es-menu td a img {
display: inline !important;
vertical-align: middle;
}
sub,
sup {
display: inline-block;
font-size: 75% !important;
line-height: 1 !important;
}
sub {
vertical-align: bottom;
mso-text-raise: -30%;
}
sup {
mso-text-raise: 30%;
vertical-align: top;
}
strong {
font-weight: 700 !important;
}
/*
END CONFIG STYLES
*/
s {
text-decoration: line-through;
}
ul, ol {
font-family: arial, 'helvetica neue', helvetica, sans-serif;
padding: 0px 0px 0px 40px;
margin-top: 15px;
margin-bottom: 15px;
}
ul li {
color: #333333;
}
ol li {
color: #333333;
}
li {
margin: 0px 0px 15px;
font-size: 14px;
}
li p {
mso-margin-bottom-alt: 15px;
}
a {
text-decoration: underline;
}
.es-menu td a {
font-family: arial, 'helvetica neue', helvetica, sans-serif;
text-decoration: none;
display: block;
}
.es-wrapper {
width: 100%;
height: 100%;
}
.es-wrapper-color,
.es-wrapper {
background-color: #f6f6f6;
}
.es-content-body p,
.es-footer-body p,
.es-header-body p,
.es-infoblock p {
font-family: arial, 'helvetica neue', helvetica, sans-serif;
line-height: 150%;
letter-spacing: 0;
}
.es-header {
background-color: transparent;
}
.es-header-body {
background-color: #ffffff;
}
.es-header-body p {
color: #333333;
font-size: 14px;
}
.es-header-body a {
color: #1376c8;
font-size: 14px;
}
.es-footer {
background-color: transparent;
}
.es-footer-body {
background-color: #ffffff;
}
.es-footer-body p {
color: #333333;
font-size: 14px;
}
.es-footer-body a {
color: #1376c8;
font-size: 14px;
}
.es-content-body {
background-color: #ffffff;
}
.es-content-body p {
color: #333333;
font-size: 14px;
}
.es-content-body a {
color: #1376c8;
font-size: 14px;
}
.es-infoblock p {
font-size: 12px;
color: #cccccc;
}
.es-infoblock a {
font-size: 12px;
color: #cccccc;
}
h1 {
font-size: 40px;
font-style: normal;
font-weight: normal;
line-height: 120%;
color: #333333;
}
h2 {
font-size: 32px;
font-style: normal;
font-weight: normal;
line-height: 120%;
color: #333333;
}
h3 {
font-size: 28px;
font-style: normal;
font-weight: normal;
line-height: 120%;
color: #333333;
}
h4 {
font-size: 24px;
font-style: normal;
font-weight: normal;
line-height: 120%;
color: #333333;
}
h5 {
font-size: 20px;
font-style: normal;
font-weight: normal;
line-height: 120%;
color: #333333;
}
h6 {
font-size: 16px;
font-style: normal;
font-weight: normal;
line-height: 120%;
color: #333333;
}
.es-header-body h1 a,
.es-content-body h1 a,
.es-footer-body h1 a {
font-size: 40px;
}
.es-header-body h2 a,
.es-content-body h2 a,
.es-footer-body h2 a {
font-size: 32px;
}
.es-header-body h3 a,
.es-content-body h3 a,
.es-footer-body h3 a {
font-size: 28px;
}
.es-header-body h4 a,
.es-content-body h4 a,
.es-footer-body h4 a {
font-size: 24px;
}
.es-header-body h5 a,
.es-content-body h5 a,
.es-footer-body h5 a {
font-size: 20px;
}
.es-header-body h6 a,
.es-content-body h6 a,
.es-footer-body h6 a {
font-size: 16px;
}
a.es-button, button.es-button {
padding: 10px 20px 10px 20px;
display: inline-block;
background: #31cb4b;
border-radius: 15px 15px 15px 15px;
font-size: 14px;
font-family: arial, 'helvetica neue', helvetica, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 120%;
color: #ffffff;
text-decoration: none !important;
width: auto;
text-align: center;
letter-spacing: 0;
mso-padding-alt: 0;
mso-border-alt: 10px solid #31cb4b;
}
.es-button-border {
border-style: solid;
border-color: #2cb543 #2cb543 #2cb543 #2cb543;
background: #31cb4b;
border-width: 0px 0px 2px 0px;
display: inline-block;
border-radius: 15px 15px 15px 15px;
width: auto;
}
.es-button img {
display: inline-block;
vertical-align: middle;
}
.es-fw,
.es-fw .es-button {
display: block;
}
.es-il,
.es-il .es-button {
display: inline-block;
}
.es-text-rtl h1,
.es-text-rtl h2,
.es-text-rtl h3,
.es-text-rtl h4,
.es-text-rtl h5,
.es-text-rtl h6,
.es-text-rtl input,
.es-text-rtl label,
.es-text-rtl textarea,
.es-text-rtl p,
.es-text-rtl ol,
.es-text-rtl ul,
.es-text-rtl .es-menu a,
.es-text-rtl .es-table {
direction: rtl;
}
.es-text-ltr h1,
.es-text-ltr h2,
.es-text-ltr h3,
.es-text-ltr h4,
.es-text-ltr h5,
.es-text-ltr h6,
.es-text-ltr input,
.es-text-ltr label,
.es-text-ltr textarea,
.es-text-ltr p,
.es-text-ltr ol,
.es-text-ltr ul,
.es-text-ltr .es-menu a,
.es-text-ltr .es-table {
direction: ltr;
}
.es-text-rtl ol, .es-text-rtl ul {
padding: 0px 40px 0px 0px;
}
.es-text-ltr ul, .es-text-ltr ol {
padding: 0px 0px 0px 40px;
}
/*
RESPONSIVE STYLES
Please do not delete and edit CSS styles below.
If you don't need responsive layout, please delete this section.
*/
@media only screen and (max-width: 600px) {
*[class="gmail-fix"] {
display: none !important;
}
p,
a {
line-height: 150% !important;
}
h1,
h1 a {
line-height: 120% !important;
}
h2,
h2 a {
line-height: 120% !important;
}
h3,
h3 a {
line-height: 120% !important;
}
h4,
h4 a {
line-height: 120% !important;
}
h5,
h5 a {
line-height: 120% !important;
}
h6,
h6 a {
line-height: 120% !important;
}
.es-header-body p {
}
.es-content-body p {
}
.es-footer-body p {
}
.es-infoblock p {
}
h1 {
font-size: 40px !important;
text-align: left;
}
h2 {
font-size: 32px !important;
text-align: left;
}
h3 {
font-size: 28px !important;
text-align: left;
}
h4 {
font-size: 24px !important;
text-align: left;
}
h5 {
font-size: 20px !important;
text-align: left;
}
h6 {
font-size: 16px !important;
text-align: left;
}
.es-header-body h1 a,
.es-content-body h1 a,
.es-footer-body h1 a {
font-size: 40px !important;
}
.es-header-body h2 a,
.es-content-body h2 a,
.es-footer-body h2 a {
font-size: 32px !important;
}
.es-header-body h3 a,
.es-content-body h3 a,
.es-footer-body h3 a {
font-size: 28px !important;
}
.es-header-body h4 a,
.es-content-body h4 a,
.es-footer-body h4 a {
font-size: 24px !important;
}
.es-header-body h5 a,
.es-content-body h5 a,
.es-footer-body h5 a {
font-size: 20px !important;
}
.es-header-body h6 a,
.es-content-body h6 a,
.es-footer-body h6 a {
font-size: 16px !important;
}
.es-menu td a {
font-size: 14px !important;
}
.es-header-body p,
.es-header-body a {
font-size: 14px !important;
}
.es-content-body p,
.es-content-body a {
font-size: 14px !important;
}
.es-footer-body p,
.es-footer-body a {
font-size: 14px !important;
}
.es-infoblock p,
.es-infoblock a {
font-size: 12px !important;
}
.es-m-txt-c,
.es-m-txt-c h1,
.es-m-txt-c h2,
.es-m-txt-c h3,
.es-m-txt-c h4,
.es-m-txt-c h5,
.es-m-txt-c h6 {
text-align: center !important;
}
.es-m-txt-r,
.es-m-txt-r h1,
.es-m-txt-r h2,
.es-m-txt-r h3,
.es-m-txt-r h4,
.es-m-txt-r h5,
.es-m-txt-r h6 {
text-align: right !important;
}
.es-m-txt-j,
.es-m-txt-j h1,
.es-m-txt-j h2,
.es-m-txt-j h3,
.es-m-txt-j h4,
.es-m-txt-j h5,
.es-m-txt-j h6 {
text-align: justify !important;
}
.es-m-txt-l,
.es-m-txt-l h1,
.es-m-txt-l h2,
.es-m-txt-l h3,
.es-m-txt-l h4,
.es-m-txt-l h5,
.es-m-txt-l h6 {
text-align: left !important;
}
.es-m-txt-r img,
.es-m-txt-c img,
.es-m-txt-l img {
display: inline !important;
}
.es-m-txt-r .rollover:hover .rollover-second,
.es-m-txt-c .rollover:hover .rollover-second,
.es-m-txt-l .rollover:hover .rollover-second {
display: inline !important;
}
.es-m-txt-r .rollover span,
.es-m-txt-c .rollover span,
.es-m-txt-l .rollover span {
line-height: 0 !important;
font-size: 0 !important;
display: block;
}
.es-spacer {
display: inline-table;
}
a.es-button,
button.es-button {
font-size: 14px !important;
padding: 10px 20px 10px 20px !important;
line-height: 120% !important;
}
a.es-button,
button.es-button,
.es-button-border {
display: inline-block !important;
}
.es-m-fw,
.es-m-fw.es-fw,
.es-m-fw .es-button {
display: block !important;
}
.es-m-il,
.es-m-il .es-button,
.es-social,
.es-social td,
.es-menu.es-table-not-adapt {
display: inline-block !important;
}
.es-adaptive table,
.es-left,
.es-right {
width: 100% !important;
}
.es-content table,
.es-header table,
.es-footer table,
.es-content,
.es-footer,
.es-header {
width: 100% !important;
max-width: 600px !important;
}
.adapt-img {
width: 100% !important;
height: auto !important;
}
.es-adapt-td {
display: block !important;
width: 100% !important;
}
.es-mobile-hidden,
.es-hidden {
display: none !important;
}
.es-container-hidden {
display: none !important;
}
.es-desk-hidden {
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
line-height: inherit !important;
}
tr.es-desk-hidden {
display: table-row !important;
}
table.es-desk-hidden {
display: table !important;
}
td.es-desk-hidden {
display: table-cell !important;
}
td.es-desk-menu-hidden {
display: table-cell !important;
}
.es-menu td {
width: 1% !important;
}
table.es-table-not-adapt,
.esd-block-html table {
width: auto !important;
}
.h-auto {
height: auto !important;
}
}
/*
END RESPONSIVE STYLES
*/
How to use a boilerplate and customize an HTML email template for your brand
So, how can you use an HTML email template in practice?
- You can use a ready-made boilerplate almost without changes if its structure already fits your email marketing needs and aligns with your brand requirements.
- You can take this “code skeleton” as a reliable foundation that is known to render well across various email clients and adapt it to your own needs. For example, you can customize your brand colors and fonts, add your logo, create branded headers and footers, and adjust the structure depending on the type of email you’re building: a newsletter, a promotional email, a transactional email, and more.
- You can build your own template for your brand on top of this boilerplate. In this case, you can be confident that your HTML template will work correctly across mail apps and have a much lower risk of rendering issues or unexpected errors.
Let’s not forget that Stripo offers real-time co-editing, allowing developers, designers, and marketers to work on the same email campaign simultaneously. This saves time and makes the workflow more efficient.
Remember that you need to test email templates across the mail clients your subscribers use. After customization, proper testing becomes even more important.
How to build your own HTML email boilerplate from scratch
In this section, we’ll explain the logic behind building an HTML email template: what comes first, what follows, and why each step matters.
1. Set up basic email structure
This is a basic HTML file that includes the DOCTYPE, essential meta tags, and a main table that holds the entire email layout. If everything is set up correctly at this stage, the email will function properly in Outlook, Gmail, and other major email clients, and it will be much easier to extend and build on later.
2. Add email-safe typographic defaults
In this step, you define the basic text settings, such as font size, text color, fonts, and line height. In a boilerplate, it’s recommended to use email-safe fonts that are available across all systems, such as Arial or sans-serif. Without these defaults, text may look different in Gmail and Outlook, which can negatively affect readability.
For example, here is a code example that disables Apple Mail’s automatic formatting of links and makes them appear the same as the body of the email:
a[x-apple-data-detectors],
#MessageViewBody a {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
3. Add fallback styles and a simple grid-based layout
Here, the layout is built using tables, and fallback elements are added in case something doesn’t work as expected. This includes a backup font if the primary font isn’t supported, or alt text if images fail to load. Email clients sometimes block images, handle widths and spacing differently, or ignore parts of CSS. Fallbacks ensure that the email remains clear and understandable under any conditions.
4. Add mobile responsiveness
Stats show that about 64% of people open their emails primarily on mobile devices, so it’s important to make sure your email is fully optimized for smartphones. Mobile-friendly emails are about more than font size: content blocks stack vertically, images resize to fit the screen, multi-column layouts turn into single-column ones, and buttons get more spacing for easy tapping.
These adjustments are handled with media queries, conditional rules that allow you to control layout, spacing, alignment, image sizes, and typography based on screen width.
There are other ways to define mobile styles, but we rely on media queries, which is why we recommend them to others.
Code examples for media queries:
@media only screen and (max-width: 600px) {
*[class="gmail-fix"] {
display: none !important;
}
p,
a {
line-height: 150% !important;
}
h1,
h1 a {
line-height: 120% !important;
}
h2,
h2 a {
line-height: 120% !important;
}
h3,
h3 a {
line-height: 120% !important;
}
h4,
h4 a {
line-height: 120% !important;
}
h5,
h5 a {
line-height: 120% !important;
}
h6,
h6 a {
line-height: 120% !important;
}
.es-header-body p {
}
.es-content-body p {
}
.es-footer-body p {
}
.es-infoblock p {
}
h1 {
font-size: 30px !important;
text-align: left;
}
h2 {
font-size: 24px !important;
text-align: left;
}
h3 {
font-size: 20px !important;
text-align: left;
}
h4 {
font-size: 24px !important;
text-align: left;
}
h5 {
font-size: 20px !important;
text-align: left;
}
h6 {
font-size: 16px !important;
text-align: left;
}
.es-header-body h1 a,
.es-content-body h1 a,
.es-footer-body h1 a {
font-size: 30px !important;
}
.es-header-body h2 a,
.es-content-body h2 a,
.es-footer-body h2 a {
font-size: 24px !important;
}
.es-header-body h3 a,
.es-content-body h3 a,
.es-footer-body h3 a {
font-size: 20px !important;
}
.es-header-body h4 a,
.es-content-body h4 a,
.es-footer-body h4 a {
font-size: 24px !important;
}
.es-header-body h5 a,
.es-content-body h5 a,
.es-footer-body h5 a {
font-size: 20px !important;
}
.es-header-body h6 a,
.es-content-body h6 a,
.es-footer-body h6 a {
font-size: 16px !important;
}
.es-menu td a {
font-size: 14px !important;
}
.es-header-body p,
.es-header-body a {
font-size: 14px !important;
}
.es-content-body p,
.es-content-body a {
font-size: 14px !important;
}
.es-footer-body p,
.es-footer-body a {
font-size: 16px !important;
}
.es-infoblock p,
.es-infoblock a {
font-size: 12px !important;
}
.es-m-txt-c,
.es-m-txt-c h1,
.es-m-txt-c h2,
.es-m-txt-c h3,
.es-m-txt-c h4,
.es-m-txt-c h5,
.es-m-txt-c h6 {
text-align: center !important;
}
.es-m-txt-r,
.es-m-txt-r h1,
.es-m-txt-r h2,
.es-m-txt-r h3,
.es-m-txt-r h4,
.es-m-txt-r h5,
.es-m-txt-r h6 {
text-align: right !important;
}
.es-m-txt-j,
.es-m-txt-j h1,
.es-m-txt-j h2,
.es-m-txt-j h3,
.es-m-txt-j h4,
.es-m-txt-j h5,
.es-m-txt-j h6 {
text-align: justify !important;
}
.es-m-txt-l,
.es-m-txt-l h1,
.es-m-txt-l h2,
.es-m-txt-l h3,
.es-m-txt-l h4,
.es-m-txt-l h5,
.es-m-txt-l h6 {
text-align: left !important;
}
.es-m-txt-r img,
.es-m-txt-c img,
.es-m-txt-l img {
display: inline !important;
}
.es-m-txt-r .rollover:hover .rollover-second,
.es-m-txt-c .rollover:hover .rollover-second,
.es-m-txt-l .rollover:hover .rollover-second {
display: inline !important;
}
.es-m-txt-r .rollover span,
.es-m-txt-c .rollover span,
.es-m-txt-l .rollover span {
line-height: 0 !important;
font-size: 0 !important;
display: block;
}
.es-spacer {
display: inline-table;
}
a.es-button,
button.es-button {
font-size: 18px !important;
padding: 10px 20px 10px 20px !important;
line-height: 120% !important;
}
a.es-button,
button.es-button,
.es-button-border {
display: inline-block !important;
}
.es-m-fw,
.es-m-fw.es-fw,
.es-m-fw .es-button {
display: block !important;
}
.es-m-il,
.es-m-il .es-button,
.es-social,
.es-social td,
.es-menu.es-table-not-adapt {
display: inline-block !important;
}
.es-adaptive table,
.es-left,
.es-right {
width: 100% !important;
}
.es-content table,
.es-header table,
.es-footer table,
.es-content,
.es-footer,
.es-header {
width: 100% !important;
max-width: 600px !important;
}
.adapt-img {
width: 100% !important;
height: auto !important;
}
.es-adapt-td {
display: block !important;
width: 100% !important;
}
.es-mobile-hidden,
.es-hidden {
display: none !important;
}
.es-container-hidden {
display: none !important;
}
.es-desk-hidden {
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
line-height: inherit !important;
}
tr.es-desk-hidden {
display: table-row !important;
}
table.es-desk-hidden {
display: table !important;
}
td.es-desk-hidden {
display: table-cell !important;
}
td.es-desk-menu-hidden {
display: table-cell !important;
}
.es-menu td {
width: 1% !important;
}
table.es-table-not-adapt,
.esd-block-html table {
width: auto !important;
}
.h-auto {
height: auto !important;
}
}
All the codes provided here work in Stripo. You can build emails even on the free plan.
5. Test manually in major email clients
Rigorous testing is the final step in checking whether your email looks the way you expect for real subscribers. Emails that look great in Yahoo Mail can break in Gmail. That’s why it’s essential to test emails manually by sending them to different mail clients or by using dedicated testing tools, such as Email on Acid.
Best practices for maintaining a clean and fully responsive email code
Here are a few simple rules and practical tips to follow:
- Use email-safe fonts. Clear typography improves readability across all devices. Stick to safe font stacks and consistent text styles to ensure your email campaigns remain accessible and visually polished.
- Use semantic HTML. Structure your content logically using appropriate headings, paragraph tags, and other elements.
- Always keep mobile recipients in mind and make sure font sizes are adjusted to smaller screens.
- Check dark mode color inversion. Make sure text and images remain readable, and consider using the prefers-color-scheme media query to automatically adjust styles, where supported.
- Use prebuilt components such as button blocks or a header area. These elements are already tested across mail clients, reduce the risk of layout issues, and help keep your email code clean and consistent.
- Always include alt text and fallback background colors to ensure emails remain accessible for recipients with visual impairments and still make sense when images are turned off.
- Test every template version in at least three major email clients before sending.
HTML email templates vs. custom email marketing templates
As mentioned earlier, HTML email templates are fast to develop and offer strong responsive compatibility across mail clients. Custom templates, on the other hand, act as brand extension in email marketing: they use distinctive typography, structure, and visual patterns, and are generally more memorable for subscribers who already have an established communication history with the brand.
That’s why boilerplates are not really about individuality or uniqueness.
Custom email marketing templates serve as a direct brand touchpoint with the audience. They reflect a brand color scheme, tone of voice, and overall visual identity, mirroring the look and feel of the website or product. Precise design ensures instant brand recognition. Custom templates also allow for emails of any level of complexity, whereas boilerplates deliberately sacrifice complexity in favor of stability and responsiveness.
At the same time, it’s important to understand that custom design requires more time and resources. It often involves manual bug fixes and may lead to issues such as slow loading times, Gmail clipping, or rendering problems caused by complex code or heavy emails with advanced interactivity.
That’s why it’s worth defining when it makes sense to invest time and effort into building custom email marketing templates and when boilerplates are a more practical choice.
You can simplify the development process even for custom templates in Stripo. With Module management, you can save previously created template sections and reuse them later. These modules can include code created by your developer, while you make updates through the UI without touching the code. This approach saves significant time and helps maintain brand consistency.
Wrapping up
An HTML email boilerplate is a universal, practical tool that ensures your emails render consistently across different inboxes. It is designed specifically to avoid the most common bugs and compatibility issues caused by inbox providers. You can use a boilerplate as a ready-made foundation for your emails or further customize it to fit your specific needs.
At the same time, you can use Stripo to simplify your workflow and speed up email creation. The code in Stripo templates already includes everything covered by boilerplates and accounts for the limitations of mail clients. On top of this, a large library of pre-built templates helps you quickly find what you need, or you can use them as inspiration.