Skip to content

Instantly share code, notes, and snippets.

@OutThisLife
Last active December 25, 2015 06:58
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 OutThisLife/6935557 to your computer and use it in GitHub Desktop.
Save OutThisLife/6935557 to your computer and use it in GitHub Desktop.
HTML Email Boilerplate (Refactored)
<!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"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>REPLACE_ME</title>
<style>
/* HTML Email Reset */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
#container {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; max-width: 600px !important;}
a img {border:none;}
.image_fix {display:block;}
h1, h2, h3, h4, h5, h6 {color: #292929 }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: blue !important;}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active { color: purple !important; }
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; }
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; table-layout: fixed; }
a {color: blue;}
/**
* This will only work on iOS, and Windows Phone 8
*/
@media only screen and (max-width: 600px) {
table { width: 100% !important; }
}
</style>
</head>
<body bgcolor="#FFFFFF" style="background-color: #FFFFFF; color: #222222; font-size: 13px; font-family: Arial, sans-serif; -webkit-text-size-adjust: none;">
<!-- Container -->
<table width="600" style="width: 600px" cellpadding="20px" cellspacing="0" border="0" id="container" bgcolor="#FFFFFF">
<tr>
<td>
<!-- Content wrapper -->
<table width="600" cellpadding="30px" cellspacing="0" border="1" align="center" style="border-color: #DDDDDD">
<!-- EDIT BELOW -->
<!-- EDIT BELOW -->
<!-- EDIT BELOW -->
<!-- HEADER -->
<tr><td>
<table width="600" style="width: 630px" cellpadding="0" align="center">
<tr>
<td>
</td>
</tr>
</table>
</td></tr>
<!-- IGNORE BELOW -->
<!-- IGNORE BELOW -->
<!-- IGNORE BELOW -->
</table>
<!-- End example table -->
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment