Email on Acid’s Boilerplate for HTML Emails
16
Are you looking for a head start on fixing all the client quirks that emails encounter in the wild?
Try our boilerplate, and hit the ground running.
Email coding is a complex business. The code you’ll find below is not an email template. Instead the boilerplate is like a “foundation” for an email to render well in most clients. We’ve included tips, tricks and advice on how to code for every client from the get-go. You can copy the full text from the bottom of the code sample, or you can use the download button below to get both versions in a .Zip file.
If your screen isn’t wide enough to accomodate this code sample, feel free to download it and open it in your own text editor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--This is a great DOCTYPE to test with because it is used by Gmail and Outlook.com. It is very important to test with and without
a DOCTYPE because many clients strip it entirely - this effects paragraph margins & padding, centering, and box model padding.
For more information on how the DOCTYPE effects your email, check out the following resources:
Email on Acid - https://www.emailonacid.com/blog/details/C18/doctype_-_the_black_sheep_of_html_email_design
Campaign Monitor - http://www.campaignmonitor.com/blog/post/3317/correct-doctype-to-use-in-html-email/
***** BOILERPLATE USE *************************
This template is merely a guildline for writing HTML code that will render correctly across each of the most popular email clients.
Please download the min. version of this code and as a general rule, avoid using comments in your final email campaign or else
you may get blocked by spam filters. Also, including a single quote in your CSS comments will cause your email to appear blank
in Entourage 08.
Some of the embedded CSS used in this template can be adjusted based on your design but others need to be overwritten inline.
You will find those instructions below.
The CSS style block has been placed just above the closing body tag for Yahoo in IE7 & 8. This fix actually requires a DOCTYPE.
https://www.emailonacid.com/blog/details/C13/yahoo_mail_does_not_support_the_style_block_in_internet_explorer_7_8 -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--This content type tells a web browser how to interperet your special characters. However:
EVERY EMAIL CLIENT WILL IGNORE THIS META TAG. Instead the content-type will be set in the header of your email. The
header is created based on the server configuration which is controlled by your email service provider. Here is more info:
https://www.emailonacid.com/blog/details/C18/the_importance_of_content-type_character_encoding_in_html_emails
Solution: to avoid jumbled characters in your email, always use HTML entities. Here's a free tool for quickly converting all
of your characters: https://www.emailonacid.com/character_converter/
When testing, it's a good idea to try both:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
and
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8895-1" />
This will help you catch jumbled characters so that you don't forget to convert them to HTML entities. -->
<title>Your Message Subject or Title</title>
<style type="text/css">
/****** EMAIL CLIENT BUG FIXES - BEST NOT TO CHANGE THESE ********/
.ExternalClass {width:100%;} /* Forces Outlook.com to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
} /* Forces Outlook.com to display normal line spacing, here is more on that:
https://www.emailonacid.com/forum/viewthread/43/
*/
body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;} /* Prevents Webkit and Windows Mobile
platforms from changing default font sizes. */
body {margin:0; padding:0;} /* Resets all body margins and padding to 0 for good measure */
table td {border-collapse:collapse;}
/*This resolves the Outlook 07, 10, and Gmail td padding issue. Heres more info:
http://www.ianhoar.com/2008/04/29/outlook-2007-borders-and-1px-padding-on-table-cells
http://www.campaignmonitor.com/blog/post/3392/1px-borders-padding-on-table-cells-in-outlook-07
*/
/****** END BUG FIXES ********/
/****** RESETTING DEFAULTS, IT IS BEST TO OVERWRITE THESE STYLES INLINE ********/
p {margin:0; padding:0; margin-bottom:0;}
/* This sets a clean slate for all clients EXCEPT Gmail.
From there it forces you to do all of your spacing inline during the development process.
Be sure to stick to margins because paragraph padding is not supported by Outlook 2007/2010
Remember: Outlook.com does not support "margin" nor the "margin-top" properties.
Stick to "margin-bottom", "margin-left", "margin-right" in order to control spacing
It also doesnt hurt to set the inline top-margin to "0" for consistancy in Gmail for every instance of a
paragraph tag (see our paragraph example within the body of this template)
Another option: Use double BRs instead... of paragraphs */
h1, h2, h3, h4, h5, h6 {
color: black;
line-height: 100%;
} /* This CSS will overwrite Outlook.com's default css and make your headings appear consistant with Gmail.
From there, you can overwrite your styles inline if needed. */
a, a:link {
color:#2A5DB0;
text-decoration: underline;
} /* This is the embedded CSS link color for Gmail. This will overwrite Outlook.com and Yahoo Beta's
embedded link colors and make it consistent with Gmail. You must overwrite this color inline */
/****** END RESETTING DEFAULTS ********/
/****** EDITABLE STYLES - FOR YOUR TEMPLATE ********/
body, #body_style {
background:#000;
min-height:1000px;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
} /*The "body" is defined here for Yahoo Beta because it does not support your body tag. Instead, it will create a
wrapper div around your email and that div will inherit your embedded body styles.
The "#body_style" is defined for AOL because it does not support your embedded body definition nor your body
tag, we will use this class in our wrapper div.
The "min-height" attribute is used for AOL so that your background does not get cut off if your email is short.
We are using universal styles for Outlook 2007, including them in the wrapper will not effect nested tables*/
span.yshortcuts { color:#000; background-color:none; border:none;}
span.yshortcuts:hover,
span.yshortcuts:active,
span.yshortcuts:focus {color:#000; background-color:none; border:none;}
/*When Yahoo! Beta came out, we thought we could put those days behind us but we might have celebrated a little
too soon. Here's more: https://www.emailonacid.com/blog/details/C13/yahoo_shortcuts_are_baaaaaaaack */
/*Optional:*/
a:visited { color: #3c96e2; text-decoration: none}
a:focus { color: #3c96e2; text-decoration: underline}
a:hover { color: #3c96e2; text-decoration: underline}
/* There is no way to set these inline so you have the option of adding pseudo class definitions here. They won't
work for Gmail nor older versions of Lotus Notes but its a nice addition for all other clients. */
/*Optimizing for mobil devices - (optional)*/
@media only screen and (max-device-width: 480px) {
/* Here you can include rules for the Android and iPhone native email clients.
Device viewport dimensions are as follows:
Iphone: 320px X 480px - portrait, 480px X 320px - landscape
Android: 350px X 480px - portrait, 480 X 350 - landscape
(These are average dimensions, the Android OS runs on several different devices)*/
body[yahoo] #container1 {display:block !important} /*example style */
body[yahoo] p {font-size: 10px} /*example style*/
/* You must use attribute selectors in your media queries to prevent Yahoo from rendering these styles.
We added a yahoo attribute in the body tag to complete this fix.
http://www.campaignmonitor.com/blog/post/3457/media-query-issues-in-yahoo-mail-mobile-email/
https://www.emailonacid.com/blog/details/C13/stop_yahoo_mail_from_rendering_your_media_queries
To learn more about media queries for mobile email, check out the following:
https://www.emailonacid.com/blog/details/C13/designing_html_emails_for_mobile_devices
https://www.emailonacid.com/blog/details/C13/media_queries_in_html_emails*/
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* Here you can include rules for the iPad native email client.
Device viewport dimensions in pixels:
768 x 1024 - portrait
1024 x 768 - landscape
*/
body[yahoo] #container1 {display:block !important} /*example style*/
body[yahoo] p {font-size: 10px} /*example style*/
}
/*** END EDITABLE STYLES ***/
/*** EMBEDDED CSS NOTES ***
1.) Be aware that Gmail will not read any of your embedded CSS
2.) Although I have seen the !important priority used in other examples, it is not necessary.
If you use "!important" you can no longer overwrite your styles inline which is required for Gmail.
3.) The Android does not support "class" declarations outside of the media query. Here is more info on that:
https://www.emailonacid.com/blog/the_android_mail_app_and_css_class_declarations/
4.) You might want to consider duplicating your embedded CSS after the closing body tag for Yahoo! Mail in
IE7 & 8.
*** END EMBEDDED CSS NOTES ***/
</style>
</head>
<body style="background:#000; min-height:1000px; color:#fff;font-family:Arial, Helvetica, sans-serif; font-size:12px"
alink="#FF0000" link="#FF0000" bgcolor="#000000" text="#FFFFFF" yahoo="fix">
<!-- You may adjust each of the values above for your template as needed.
We've included the style attribute for Gmail because it does not support embedded CSS and it will convert this body tag to
a div. Since it gets converted to a div, the other body attributes like bgcolor are ignored.
We included body attributes (alink, link, bgcolor and text) for Lotus Notes 6.5 and 7, as these clients do not offer much
support for embedded nor inline CSS.
The "min-height" attribute is set for Gmail and AOL since they will be converting this body tag to a div and we want our
background color to reach the bottom of the page.
The yahoo attribute is added if you are using media queries for mobile devices. For an explanation, check out the media
queries example in the style block below. -->
<!--PAGE WRAPPER-->
<div id="body_style" style="padding:15px">
<!--This div is working as a wrapper and the body_style is picking up our CSS properties for AOL. The padding has been
included for Gmail, you can adjust this to your liking.
If your email exceeds 23 inches in height, you might end up with unwanted horizontal spacing halfway down your email in
Outlook 2007 and 2010:
The reason: https://www.emailonacid.com/blog/details/C13/horizontal_spacing_issues_in_outlook_2007_and_2010
The fix: Just change this wrapper from a div to a span and add style="display:block" - don't forget to change the closing tag
as well. From there, stack your tables within your email so that no table exeeds 23 inches.
Here is another example: https://www.emailonacid.com/blog/details/C13/background_colors_in_html_emails
-->
<!-- PAGE LAYOUT -->
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" width="600" align="center">
<tr>
<td width="200">Content</td>
<td width="200">Content</td>
<td width="200">Content</td>
</tr>
</table>
<!-- Tables are the most common way to format your email consistently. Set your table widths inside cells and in most
cases reset cellpadding, cellspacing, and border to zero. Use nested tables as a way to space effectively in your message.
The bgcolor and width attributes for the Android Gmail application. Gmail converts your body to a div, even on mobile apps.
Since there is no width set in your body, the Android sets the width of your converted body tag to that of the device viewport.
To make a long story short, your background color will get cut off as the viewer scrolls horizontally unless you add it to each
of your tables as well.
In this example, we are using the align="center" attribute to center the final email, if you want it left aligned, just remove
that. Using align attribute will ensure consistant results in all clients even after your doctype is stripped.
-->
<!-- PARAGRAPHS -->
<p style="margin-top:0"></p>
<!--As stated above, paragraph tags are optional. Do not allow yourself to change the margin-top because it is not supported
in Outlook.com. Paragraph padding is hit or miss in Outlook 2007/2010. You will have to stick to margin-left, margin-right, and
margin-bottom and avoid the generic "margin" property -->
<!-- TEXT LINKS -->
<a href="http://www.emailonacid.html" style="color:#F00" target ="_blank" title="Email on Acid">Text Link Here</a>
<!-- Here, we've used inline css to overwrite Gmail's default link color. -->
<!-- EMBEDDING FILES -->
<a href="http://www.emailonacid.pdf" style="color:#F00" target ="_blank" title="Email on Acid">External File</a>
<!--If you have a client who asks you to include an attachement like a pdf, always recommend linking to an external file.
Attachements will often cause an email to be blocked by SPAM.-->
<!--INSERTING IMAGES-->
<img src="https://www.emailonacid.com/images/EOA_logo.gif" alt="Info Here" title="Info Here" width="308" height="58"
style="display:block" border="0"/>
<!-- Gmail, Yahoo and Outlook.com add in an extra space below images when using non IE browsers. This is especially noticeable
when stacking images on top of each other.
A common fix is to add style="display: block". Here are some more possible work-arounds:
https://www.emailonacid.com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails
It's best to use the "align" attribute vs a CSS float if you are placing them inline with text - this is for Lotus Notes 6.5 and 7.
Image widths and heights need to be explicitly set and actual dimensions must be correct for Outlook 2007 and 2010.
The alt and title tags are equally important because a majority of email clients block images by default and instead display
either the title or alt text.
Use border="0" to avoid unwanted outlines around your images in various clients - especially when wrapping a link around
the image.
Last but not least, you must always use absolute references to images in HTML emails:
https://www.emailonacid.com/blog/details/C18/css-html-email
-->
<!--ORDERED AND UNORDERED LISTS-->
<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td valign="top">•</td>
<td>Test</td>
</tr>
<tr>
<td valign="top">1.)</td>
<td>Test</td>
</tr>
</table>
<!--Outlook 2007/2010 converts your list items into paragraphs and spans (particularly if you use inline styles) so although
using tables is rather frustrating, it might save you time and hassle when testing lists. -->
<!-- BACKGROUND IMAGES -->
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" background="https://www.emailonacid.com/images/EOA_logo.gif" bgcolor="#006600"> </td>
</tr>
</table>
<!--The "background" attribute within the TABLE, TH, or TD tag is the safest way to use background images. This is supported
by all clients except Outlook 07, 2010, Lotus Notes 6.5, and 7. For those, I added a "bgcolor" because Notes 6.5 and 7 have
limited support for inline CSS.
If you want to display a background image in the body of your email, create a wrapper table, width 100%. Again, this is
because Gmail does not support embedded css and if it finds a background image in your inline CSS, it will ignore the entire
style declaration.To get background images working in Outlook 07 and 2010, check out this article couresy of Campaign
Monitor and Brian Thies:
http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/
Just Beware: On some occasions the use of VML will completely lock up Outlook 07 and 2010 and we cannot make any claims
as to its SPAM implications. We do plan to look into this further and we will update this template with our findings. -->
<!-- EMBEDDING VIDEO -->
<a href="https://www.emailonacid.com/email-preview/online_demo/C7" target="_blank">
<img src="https://www.emailonacid.com/images/widget_demo.jpg" alt="Online Demo" title="Online Demo" width="308"
height="106" style="display:block;" border="0" />
</a>
<!--In our experience, the best way to embed video is not to! It is not supported by most email clients and it is highly likely to
get blocked by SPAM. Instead, use an image with play button and link it to the actual video.-->
<!--STYLING A CALL TO ACTION BUTTON-->
<table width="150" cellspacing="3" cellpadding="0" border="0">
<tr>
<td width="150" height="35" align="center" background="https://www.emailonacid.com/emails/response_emails/
button_back.gif" style="background-repeat:repeat-x; background-position:top left; background-color:#3c96e2;
border:1px solid #666666; color:#FFFFFF; font-weight:bold; white-space:nowrap; height:35px;">
<a href="https://www.emailonacid.com/email-preview/online_demo/C7" target="_blank" style="color:#FFFFFF;
cursor:pointer; font-size:13px; text-align:center; text-decoration:none; vertical-align:baseline; font-weight:bold;">
<span style="padding:10px 10px; color:#FFF">Online Demo ››</span></a></td>
</tr>
</table>
<!--This button looks good with and without images, here's more on that:
https://www.emailonacid.com/blog/details/C13/email_design_for_mobile_and_blocked_images-->
</div> <!--end wrapper-->
<!--As mentioned above, you might want to consider duplicating your embedded CSS after the closing body tag for Yahoo!
Mail in IE7 & 8-->
<!-- Never include anything after your ending html tag because Comcast won't render it.
ONE FINAL NOTE: Your email will be opened across a variety of different platforms and web browsers. Save yourself some
time, test in all web browsers first. Then be sure to preview your email in the most popular email clients using Email on Acid! -->
</body>
</html>
Happy coding!
Author: Kyle Lapaglia
Author: Kyle Lapaglia
16 thoughts on “Email on Acid’s Boilerplate for HTML Emails”
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?