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.
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.
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.
Author: Alex Ilhan
Alex Ilhan is a freelance email specialist and email developer based in the United Kingdom with experience working for both brands and agencies. He's also spoken on a variety of topics at email industry conferences. Find Alex on LinkedIn to connect.
Author: Alex Ilhan
Alex Ilhan is a freelance email specialist and email developer based in the United Kingdom with experience working for both brands and agencies. He's also spoken on a variety of topics at email industry conferences. Find Alex on LinkedIn to connect.
16 thoughts on “HTML Email Boilerplate for Coding Responsive Marketing Campaigns ”
Comments are closed.
Thanks Geoff, great work, I’ll be sure to use this to make sure I’ve not missed anything.
Two additions i’d suggest is that
1) Outlook 07+ will duplicate top and bottom padding across sibling table cells. It’s something thats given me a headache more than a few times.
2) Adding min width to an inner container table can prevent android Gmail from auto-sizing.
Thanks Sam!
We’ll take note of those for our next revision of the boilerplate. Happy coding!
I’m confused about one thing. Does the reset code, for instance for the headers, remain in the header, with the inline styles in the body. What I mean is I want my headers to be orange, but the reset sets them to black. If I use premailer, it will inline your reset styles, making the headers black, which I don’t want.
I know. Dumb question.
@Greg,
If you want your headers to be orange, you should replace the color we specified in the boilerplate with the orange you’d like. This boilderplate is only meant as a baseline, you start from there and then make changes based on your needs. Hope that helps!
Hi Geoff, any bug fix for the Outlook 2013 line-height issue? I’ve tried BThies’ solution here to no avail:
https://www.campaignmonitor.com/forums/topic/7376/view/page/2/
Basically, when I want to use a horizontal rule in the form of a 1px tall TD, Outlook 2013 makes it about 15px tall instead. Thanks in advance!
AJ,
I’m not sure exactly what issue you’re referring to. We do have a few related blogs, though, so I hope one of these helps:
https://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010
https://www.emailonacid.com/blog/details/C13/tips_and_tricks_outlook_07-13
https://www.emailonacid.com/blog/details/C13/fixing_image_gaps_in_outlook_2013
@AJ: In Outlook 2013 you need to add styles for font-size and line-height that match your target height.
So if for example you want a table row with a height of 5 pixels you just type your
Hope this helps!
Hi, is this the latest 2015 version – I see some attribute selectors in the media queries for yahoo but the following article states these are now longer required. https://www.emailonacid.com/blog/details/C4/yahoo_mail_now_supports_media_queries
Is there a more up to date / revised version?
Thanks
Chris,
Yes, this is the latest version. As stated in the article you linked to, attribute selectors are no longer needed, but they also won’t have a negative effect on your code. Hope that helps clear things up!
ZIP file has gone bye-bye. Any chance it’ll be back soon?
@Steve,
Our apologies for that! The zip file is back up and live. Let us know if you have any further questions.
– Mallory
When I send this email to mobile gmail client for the first time, it looks good. If I send this email second time, nested tables are not nested anymore and the layout is broken. Point to note is that I have a small part of text changing each time in email body (like first email saying “Test 1”, second email saying “Test 2”, etc.) so that the email is not considered “just the same email” by gmail and is not hidden fully. As far as I understand, gmail detects “duplicated” and “unique” content and puts “duplicated” one in a separate div no matter where that content was before. The only solution I’ve come up with for now is putting each line of text in it’s own table with inline style. Also workaround probably would be to change email subject so that they are not stacked in one conversation. Anybody has better solutions?
Howdy! Would you mind if I share your blog with my twitter group? Theres lots of people that I believe would really enjoy your content. Please let me know. Thanks egdbdegcggckddaa
@Smithe586 Absolutely! We’d love if your shared this to your audience.
This should be on Github 🙂
HI,
In the if statement for MSO, maybe i’m wrong but there is nothing inside the of it. What is supposed to go in the if so the html looks correct?