HTML Email Boilerplate for Coding Responsive Marketing Campaigns
In the world of email marketing, time is of the essence, and efficiency can make all the difference between a successful campaign and a missed opportunity. While crafting compelling content and engaging visuals is essential, the foundation upon which your email campaigns are built is equally critical. This is where our HTML email boilerplate comes into play.
Starting from scratch with email coding every time you create a new campaign can be a cumbersome and time-consuming task. It's like reinventing the wheel with each email you send. But what if you had a tried-and-true boilerplate at your disposal, one that not only saves you precious time but also ensures consistent rendering across various email clients? That's precisely why we’ve produced this HTML email boilerplate.
Table of content
-
01
What makes a good HTML email boilerplate? - Doctypes, HTML tags and meta tags set up and ready to go.
- Different ways to achieve mobile greatness
- Accessibility starting point
- Email Client Specific Resets
- Google Fonts, ready to roll!
- Clearly documented
-
02
The HTML email boilerplate -
03
Other resources for faster email coding -
04
Email Dev Showdown: Different ways to code emails -
05
See how email code renders before you hit send
What makes a good HTML email boilerplate?
A good HTML email boilerplate serves as a foundational template for creating email campaigns, offering several key features to make it effective and user-friendly. Here are some essential elements that we’ve included in our boilerplate:
Doctypes, HTML tags and meta tags set up and ready to go.
The boilerplate includes the universally accepted “best” doctype, HTML tags and meta tags to ensure consistent rendering across different email clients.
Different ways to achieve mobile greatness
We’ve included example stacking columns for both Responsive and Hybrid methods.
Accessibility starting point
We’re always talking about how important Email Accessibility is, so it would be a crime if we didn’t include semantic HTML and other accessible email starting points in our boilerplate.
Email Client Specific Resets
We’ve got your Outlook fixes built in, random Apple device blue links defeated and your randomly styled phone numbers covered!
Google Fonts, ready to roll!
Using the best method for using Google Fonts, we’re utilizing the @Font-face method of adding web fonts to our email, you’ll be able to add your font of choice and get rolling.
Clearly documented
Each part of our boilerplate is doing something, so we’ve included comments to let you know exactly why certain pieces of code are there and what they’re achieving.
The HTML email boilerplate
<!DOCTYPE html>
<!-- We use the HTML5 doctype as it's the most widely supported and our recommended doctype, for more on this visit https://www.emailonacid.com/blog/article/email-development/doctype_-_the_black_sheep_of_html_email_design/
In our HTML tag we include a language for accessibility purposes and VML namespace declaration, for if we need to add specific Outlook VML code.-->
<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>
<!-- This Outlook specific code helps alleviate the issues caused by high DPI versions of Outlook. -->
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!-- We always want to include a relevant title in our email, for if users open in a browser. -->
<title>Your Message Subject or Title</title>
<!-- These two meta tags are extremely important, the first is encoding our characters so we don't have any funky symbols when using special characters
the second is telling the browser/email client to render the email in the device's native screen size
Read more: https://www.emailonacid.com/blog/article/email-development/the_importance_of_content-type_character_encoding_in_html_emails/ -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<!--Now we'll get into a few basic pieces of CSS we include in every email, for clients that do support CSS in the head -->
<style type="text/css">
/* color-scheme and supported-color-schemes enables dark mode control via the dark mode media query */
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
/* By default we turn off hover effects on links, your design may have it differently */
a:hover {
text-decoration: none !important;
}
/* This snippet removed random blue links on Apple Devices */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
/* This will stop email clients adding random styling to phone numbers */
a[href^="tel"]:hover {
text-decoration: none !important;
}
/* We want all our links and images to not have hidden borders, so they fit snugly in the design */
a img {
border: none;
}
/* Since we're using semantic HTML markup, we want to reset our paragraphs and headings to not have margins by default, if the design needs them we'll add them inline */
p {
margin: 0;
padding: 0;
margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
margin-bottom: 0;
}
/* Force Outlook to use our line-heights as an exact value rather than a minimum */
table td {
mso-line-height-rule: exactly;
}
/* Collapse borders on tables so there are no gaps in Outlook */
table {
border-collapse: collapse;
}
/* This snippet removed random blue links on Apple Devices */
#emailBody #emailWrapper [x-apple-data-detectors] {
color: inherit !important;
text-decoration: inherit !important;
}
/* This is the most reliable way of utilizing Google Fonts (or other web fonts) in your email code.
For a guide on how to find the URL of the webfont you want to use in this way, please visit: https://www.emailonacid.com/blog/article/email-development/web-fonts-google-fonts/ */
/* Here we are including a few basic Media Queries, these CSS rules will only be applied when the device width is 640px or below.
Feel free to adjust this value as your design permits/requires. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Simply setting our container tables to 100% width */
@media only screen and (max-width:640px) {
.wrapper {
width: 100% !important;
padding: 0 !important;
}
/* Here we use this to force our grid sections to expand out and stack on mobile devices */
.tflex {
display: block !important;
width: 100% !important;
}
/* We use this if we need to hide elements on mobile */
.hm {
display: none !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
}
}
</style>
</head>
<body id="emailBody" class="body" xml:lang="en" style="background:#EFEFEF; margin:0; padding:0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
<!-- Wrap your entire email in a div. For accessibility purposes, include a role, aria-roledescription, aria-label, lang, and dir attributes. -->
<div role="article" aria-roledescription="email" aria-label="email name" lang="en" dir="ltr" style="font-size:medium; font-size:max(16px, 1rem)">
<!-- Hidden Preheader Text.
This is our preview text that displays in email clients, but we hide it so it doesn't effect our design. -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family:sans-serif;">Get 10% off. Use offer code JUNE10 for 10% off or show this email in-restaurant.</div>
<!-- This is where we open the email content, we use a few basic resets on the body and add our desired background color. -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#EFEFEF" class="wrapper" role="presentation">
<tr>
<td align="center" valign="top" width="100%">
<!-- Responsive Grid:
Below is the example code for a Responsive 2 column section. We're simply using our Media Queries above to tell the email client to replace our 300px wide table cells
with 100% width, expanding and forcing a 2 column section.
For more on Hybrid vs Responsive please visit https://www.emailonacid.com/blog/article/email-development/whats-the-difference-between-responsive-mobile-friendly-and/
-->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper" role="presentation">
<!-- Notice how the tables have role="presentation", this is for accessibility purposes.
Read more about coding accessible emails: https://www.emailonacid.com/blog/article/email-development/how-to-code-accessible-emails -->
<tr>
<td width="300" class="tflex" align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">
<!-- Whenever we're adding copy, we're using semantic markup using paragraph and heading tags -->
<h1>Section One</h1>
<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
<!-- When adding images, we want to make sure we're forcing border:0 and display:block so that there's no white spaces around the images
It's also crucial for accessibility purposes to include a descriptive alt text. -->
<p>
This is our first section
</p>
</td>
<td width="300" class="tflex" align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">
<h1>Section Two</h1>
<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
<p>
This is our second section
</p>
</td>
</tr>
</table>
<!-- Hybrid Grid:
Below is the example code for a Hybrid 2 column section. We use conditional Outlook code to set maximum widths on our table and cells while having them at
100% width, this ensures that when you view this on a mobile device, the sections will expand out to create a stacking effect.
For more on Hybrid vs Responsive please visit https://www.emailonacid.com/blog/article/email-development/whats-the-difference-between-responsive-mobile-friendly-and/
-->
<!--[if true]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" role="presentation">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" role="presentation">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if true]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" role="presentation">
<tr>
<td align="left" valign="top" width="298">
<![endif]-->
<div style="display:inline-block; max-width:298px; vertical-align:top; width:100%;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:298px;" role="presentation">
<tr>
<td align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">
<h1>Section One</h1>
<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
<p>
This is our first section
</p>
</td>
</tr>
</table>
</div>
<!--[if true]>
</td>
<td align="left" valign="top" width="298">
<![endif]-->
<div style="display:inline-block; max-width:295px; vertical-align:top; width:100%;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:295px;" role="presentation">
<tr>
<td align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">
<h1>Section Two</h1>
<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
<p>
This is our second section.
</p>
</td>
</tr>
</table>
</div>
<!--[if true]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if true]>
</td>
</tr>
</table>
<![endif]-->
<!-- Ghost tables + DIV method:
Since tables are only needed for Outlook, you may choose to use ghost tables and divs to code your emails.
Stacking columns will require using a media query.
Example code can be found from Mark Robbins at Good Email Code: https://www.goodemailcode.com/email-code/columns.html
-->
<!--[if true]>
<table role="presentation" width="600" style="all:unset;opacity:0;">
<tr>
<![endif]-->
<!--[if false]></td>
</tr>
</table><![endif]-->
<div style="display:table;width:100%;max-width:600px;">
<!--[if true]>
<td width="50%">
<![endif]-->
<!--[if !true]><!-->
<div style="display:table-cell;width:50%;color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;" class="tflex">
<!--<![endif]-->
<h1>Section One</h1>
<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
<p>
This is our first section
</p>
<!--[if !true]><!-->
</div>
<!--<![endif]-->
<!--[if true]>
</td>
<![endif]-->
<!--[if true]>
<td width="50%">
<![endif]-->
<!--[if !true]><!-->
<div style="display:table-cell;width:50%;color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;" class="tflex">
<!--<![endif]-->
<h1>Section Two</h1>
<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
<p>
This is our second section.
</p>
<!--[if !true]><!-->
</div>
<!--<![endif]-->
<!--[if true]>
</td>
<![endif]-->
</div>
<!--[if true]>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</body>
</html>Other resources for faster email coding
While using an HTML email boilerplate is an excellent way to streamline your email coding process, we also have plenty of other valuable resources available that can further enhance your efficiency and creativity in crafting email campaigns.
Whether you're seeking inspiration, testing solutions, or looking to optimize your workflow, these resources have got you covered. Let's dive in and discover how to supercharge your email marketing game.
- HTML Email Development Best Practices: Rules to Code By - Our email basics coding series that cover some tips and tricks, including HTML email development best practices that will put you on the right track.
- Email Coding 101 - This article will provide everything you need to know about using HTML, CSS, and an email-specific coding language called Mailjet Markup Language (MJML).
- Six Code Generators to Help You Build HTML Emails Faster - Essential tools to help you quickly generate buttons, background images, and more!
- Best Email Frameworks - If you’re looking for something more built out than a boilerplate you should check out the best email frameworks.
- The Best Email Development Tools - From snippets to code editors to minifiers, we cover basically every tool you could ever need for HTML email development!
- Component-Driven Design Systems - If you’re ready to go beyond a boilerplate and turn this into an email design system, we’ve got you covered.
Email Dev Showdown: Different ways to code emails
They say there’s more than one way to skin a cat. We do not recommend you skin any cats (that’s mean). But we do know there’s more than one way to approach email development.
If you're looking to go beyond an HTML email boilerplate and explore different ways of coding emails, check this out...
In the video below from Parcel Unpacked 2024, Email on Acid’s Megan Boyshuzen joined veteran email developer Anne Tomlin to showcase their unique techniques. Get ideas from their email coding methods and decide what’s right for you.
See how email code renders before you hit send
Whether you use an HTML email boilerplate, email marketing templates, an email design system, or you code everything from scratch every time - you're going to want to test and preview campaigns before hitting that send button.
Email clients render HTML and CSS differently. So, even if you use a solid boilerplate, you need to see how it ends up displaying in different mailboxes. With Sinch Email on Acid, you can preview your code and designs on more than 100 clients and live devices. That's going to help you catch issues before it's too late. Plus, it gives you the confidence you need to launch your next big campaign.
With Sinch Email on Acid, you'll get unlimited testing with every plan. That means you never have to worry about hitting a ceiling. Preview away until you get it right.
