Skip to content

Instantly share code, notes, and snippets.

@andyhoman

andyhoman/Email Boilerplate

Last active December 13, 2015 22:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andyhoman/4984934 to your computer and use it in GitHub Desktop.
Save andyhoman/4984934 to your computer and use it in GitHub Desktop.
Download ZIP
My HTML email boilerplate. Generated by combining the following boilerplates: http://www.emailology.org/ and http://htmlemailboilerplate.com/
Raw
Email Boilerplate
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Your Message Subject or Title</title>
<style type="text/css">
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
body, #body_style {
background:#FFFFFF;
min-height:1000px;
color:#333333;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size:13px;
margin-top:0;
margin-bottom:0;
margin-right:0;
margin-left:0;
padding: 0;
width:100% !important;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}
p {margin:0; padding:0; margin-bottom:0; margin-top: 0;}
h1, h2, h3, h4, h5, h6 {color: #333333 !important; line-height: 100%;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: #333333 !important; text-decoration: none;}
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
a, a:link {color: #f27a24; text-decoration: underline;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" bgcolor="#FFFFFF">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#FFFFFF">
<tr>
<td width="200" valign="top">test</td>
<td width="200" valign="top">test</td>
<td width="200" valign="top">test</td>
</tr>
</table>
<!-- Yahoo Link color fix updated: Simply bring your link styling inline.
<a href="http://htmlemailboilerplate.com" target ="_blank" title="Styling Links" style="color: orange; text-decoration: none; margin-top:0;">Coloring Links appropriately</a>
<img class="image_fix" style="display: block;" src="full path to image" alt="Your alt text" title="Your title text" border="0" width="x" height="x" />
<span class="mobile_link">123-456-7890</span>-->
</td>
</tr>
</table>
<!-- End of wrapper table -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment