Skip to content

Instantly share code, notes, and snippets.

@kvann

kvann/responsive-email-template.html

Last active June 16, 2017 15:40
Show Gist options
  • Save kvann/d74d3cb98c283f100661a5b4e6730560 to your computer and use it in GitHub Desktop.
Save kvann/d74d3cb98c283f100661a5b4e6730560 to your computer and use it in GitHub Desktop.
Download ZIP
Simple email template for Gmail app, iPhone, Android, Outlook desktop and other popular email services.
Raw
responsive-email-template.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" style="margin: 0; outline: none; padding: 0;">
<head>
<!--[if !mso]><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">
<style data-ac-keep="true">
.ExternalClass {
width: 100%;
background: inherit;
background-color: inherit;
}
.ExternalClass p,
.ExternalClass ul,
.ExternalClass ol {
Margin: 0;
}
.undoreset div p,
.undoreset p {
margin-bottom: 20px;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
</style>
<style>
@media only screen and (max-width: 600px) {
body {
padding: 0!important;
font-size: 1em!important;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* a:link,
* a:hover,
* a:visited,
* a:active {
word-wrap: break-word;
}
*[class].divbody {
-webkit-text-size-adjust: none !important;
width: auto !important;
}
*[class].td_picture img {
width: auto !important;
}
*[class].td_text {
line-height: 110%;
}
*[class].td_button {
width: auto;
}
/* Collapse all block elements */
:not(.body) table {
display: block!important;
float: none!important;
border-collapse: collapse !important;
width: 100% !important;
min-width: 100% !important;
clear: both!important;
}
:not(.body) thead,
:not(.body) tbody,
:not(.body) tr {
display: block!important;
float: none!important;
width: 100% !important;
}
:not(.body) th,
:not(.body) td,
:not(.body) p {
display: block!important;
float: none!important;
width: 100% !important;
clear: both!important;
}
/* Remove browser default styling for elements */
ul,
ol {
margin-left: 20px;
margin-bottom: 10px;
margin-top: 10px;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-padding-start: 0;
}
/* Set default height for spacer once collapse */
*[class].spacer {
height: auto!important;
}
a[href^=date] {
color: inherit !important;
text-decoration: none !important;
}
a[href^=telephone] {
color: inherit !important;
text-decoration: none !important;
}
a[href^=address] {
color: inherit !important;
text-decoration: none !important;
}
a[href^=email] {
color: inherit !important;
text-decoration: none !important;
}
}
</style>
<style>
@media only screen and (max-width: 667px) {
/* Gmail app fixes */
u + .body {
display: table !important;
width: 100vw !important;
min-width: 100vw !important;
}
u + .body table {
display: table !important;
width: 100% !important;
min-width: 100% !important;
}
u + .body td {
display: block !important;
width: 100% !important;
min-width: 100% !important;
}
u + .body img {
display: inline-block !important;
margin: auto !important;
width: auto !important;
vertical-align: bottom !important;
}
u + .body center {
display: block !important;
margin: auto !important;
width: 100% !important;
min-width: 100% !important;
text-align: center !important;
}
u + .body table._ac_social_table,
u + .body table._ac_social_table td,
u + .body table._ac_social_table div,
u + .body table._ac_social_table a {
display: inline-block !important;
margin: auto !important;
width: auto !important;
min-width: auto !important;
text-align: center !important;
}
u + .body table._ac_social_table img {
display: inline-block !important;
margin: auto !important;
width: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
}
}
@media only screen and (max-width: 600px) {
/* Gmail app fixes */
u + .body {
display: table !important;
width: 100vw !important;
min-width: 100vw !important;
}
u + .body table {
display: table !important;
width: 100% !important;
min-width: 100% !important;
}
u + .body td {
display: block !important;
width: 100% !important;
min-width: 100% !important;
}
u + .body img {
display: inline-block !important;
margin: auto !important;
width: auto !important;
vertical-align: bottom !important;
}
u + .body center {
display: block !important;
margin: auto !important;
width: 100% !important;
min-width: 100% !important;
text-align: center !important;
}
u + .body table._ac_social_table,
u + .body table._ac_social_table td,
u + .body table._ac_social_table div,
u + .body table._ac_social_table a {
display: inline-block !important;
margin: auto !important;
width: auto !important;
min-width: auto !important;
text-align: center !important;
}
u + .body table._ac_social_table img {
display: inline-block !important;
margin: auto !important;
width: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
}
}
@media only screen and (max-width: 414) {
/* Gmail app fixes */
u + .body {
display: table !important;
width: 100vw !important;
min-width: 100vw !important;
}
u + .body table {
display: table !important;
width: 100% !important;
min-width: 100% !important;
}
u + .body td {
display: block !important;
width: 100% !important;
min-width: 100% !important;
}
u + .body img {
display: inline-block !important;
margin: auto !important;
width: auto !important;
vertical-align: bottom !important;
}
u + .body center {
display: block !important;
margin: auto !important;
width: 100% !important;
min-width: 100% !important;
text-align: center !important;
}
u + .body table._ac_social_table,
u + .body table._ac_social_table td,
u + .body table._ac_social_table div,
u + .body table._ac_social_table a {
display: inline-block !important;
margin: auto !important;
width: auto !important;
min-width: auto !important;
text-align: center !important;
}
u + .body table._ac_social_table img {
display: inline-block !important;
margin: auto !important;
width: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
}
}
@media only screen and (max-width: 375px) {
/* Gmail app fixes */
u + .body {
display: table !important;
width: 100vw !important;
min-width: 100vw !important;
}
u + .body table {
display: table !important;
width: 100% !important;
min-width: 100% !important;
}
u + .body td {
display: block !important;
width: 100% !important;
min-width: 100% !important;
}
u + .body img {
display: inline-block !important;
margin: auto !important;
width: auto !important;
vertical-align: bottom !important;
}
u + .body center {
display: block !important;
margin: auto !important;
width: 100% !important;
min-width: 100% !important;
text-align: center !important;
}
u + .body table._ac_social_table,
u + .body table._ac_social_table td,
u + .body table._ac_social_table div,
u + .body table._ac_social_table a {
display: inline-block !important;
margin: auto !important;
width: auto !important;
min-width: auto !important;
text-align: center !important;
}
u + .body table._ac_social_table img {
display: inline-block !important;
margin: auto !important;
width: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
}
}
@media only screen and (max-width: 320px) {
/* Gmail app fixes */
u + .body {
display: table !important;
width: 100vw !important;
min-width: 100vw !important;
}
u + .body table {
display: table !important;
width: 100% !important;
min-width: 100% !important;
}
u + .body td {
display: block !important;
width: 100% !important;
min-width: 100% !important;
}
u + .body img {
display: inline-block !important;
margin: auto !important;
width: auto !important;
vertical-align: bottom !important;
}
u + .body center {
display: block !important;
margin: auto !important;
width: 100% !important;
min-width: 100% !important;
text-align: center !important;
}
u + .body table._ac_social_table,
u + .body table._ac_social_table td,
u + .body table._ac_social_table div,
u + .body table._ac_social_table a {
display: inline-block !important;
margin: auto !important;
width: auto !important;
min-width: auto !important;
text-align: center !important;
}
u + .body table._ac_social_table img {
display: inline-block !important;
margin: auto !important;
width: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
}
}
</style>
</head>
<body class="body" style="font-family: Arial; line-height: 1.1; margin: 0px; background-color: #ffffff; width: 100%; text-align: center;">
<div style="margin: 0px; outline: none; padding: 0px; color: #696969; font-family: arial; line-height: 1.1; width: 100%; background-color: #ffffff; background: #ffffff; text-align: center;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="left" style="font-size: 13px; min-width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff; background: #ffffff;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="font-size: 13px; min-width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; max-width: 600px;">
<tr>
<td valign="top" align="center" width="600" style="padding:20px;">
<a href="%WEBCOPY%" style="font-family:arial,sans-serif;font-size:12px;color:#696969;line-height:1.3;line-height:150%;text-decoration:underline;"><span style="font-size:12px;color:#696969;text-decoration:underline;">View this email in your browser</span></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="font-size: 13px; min-width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; max-width: 600px;">
<tr>
<td valign="top" align="center" width="600">
<img src="http://kosal.img-us10.com/public/75bc2f927f0445255e6a25ca20c02d37.jpg" width="600" style="max-width:100%;display:block;border:0;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="font-size: 13px; min-width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; max-width: 600px;">
<tr>
<td valign="top" align="left" width="600" style="font-family:arial,sans-serif;font-size:18px;color:#333333;line-height:1.2;line-height:120%;">
Simple template with some light (2-level deep) table nesting
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="font-size: 13px; min-width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; max-width: 600px;">
<tr>
<td valign="top" align="left" width="600" style="font-family:arial,sans-serif;font-size:14px;color:#696969;line-height:1.5;line-height:150%;">
The purpose of this template is to demonstrate that it is very important to keep the nesting of table cells to a minimum and ensure your HTML code is as lean as possible. This ensure your template render correctly as intended in all major popular email services such as Gmail and Gmail phone app, iPhone mail app, Android and Outlook among some of them.
<br><br>
Do not include unnecessary div, paragraph or span tags unless those are an absolute need. To begin a new paragraph, simply set two breaking tags. Be sure to set your styling attributes on the table cell tag. Only set styling attributes to a block element if a certain text or link need a different styling than what is already set on the containing table cell.
<br><br>
Please note that some of the links are using <a href="https://activecampaign.com/" style="font-family:arial,sans-serif;font-size:14px;color:#696969;"><span style="font-family:arial,sans-serif;font-size:14px;color:#696969;">ActiveCampaign</span></a> custom link variables.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="font-size: 13px; min-width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; max-width: 600px;">
<tr>
<td valign="top" align="center" width="600">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff" style="font-size: 13px; min-width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tr>
<td valign="top" align="center" width="290">
<img src="http://kosal.img-us10.com/public/e5905d36dccde8a26cef5f31e8c1b41e.jpg" width="290" style="width:290px;max-width:100%;display:block;border:0;">
</td>
<td valign="top" align="center" width="20">&nbsp;</td>
<td valign="top" align="center" width="290">
<img src="http://kosal.img-us10.com/public/e5905d36dccde8a26cef5f31e8c1b41e.jpg" width="290" style="width:290px;max-width:100%;display:block;border:0;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="font-size: 13px; min-width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; max-width: 600px;">
<tr>
<td valign="top" align="center" width="600" style="padding:20px;font-family:arial,sans-serif;color:#696969;line-height:1.3;line-height:150%;">
<center style="margin:0;outline:none;padding:0;font-size:0px;">
<table class="_ac_social_table" cellspacing="0" cellpadding="0" align="center" style="font-size:0;min-width:auto!important;mso-table-lspace:0pt;mso-table-rspace:0pt;margin:auto!important;display:inline-block!important;text-align:center!important;">
<tr>
<td align="center" valign="middle" width="24" style="display:inline-block!important;font-size:0;width:24px!important;">
<div style="margin:0;outline:none;padding:0;">
<a href="https://www.facebook.com/" style="margin:0;outline:none;padding:0;"><img src="http://kosal.img-us3.com/_social_/flat-color-round-facebook.png" border="0" width="24" style="max-width:24px;display:block;border:none;"></a>
</div>
</td>
<td width="20" style="display:inline-block!important;font-size:0;width:20px!important;">&nbsp;</td>
<td align="center" valign="middle" width="24" style="display:inline-block!important;font-size:0;width:24px!important;">
<div style="margin:0;outline:none;padding:0;">
<a href="https://twitter.com/" style="margin:0;outline:none;padding:0;"><img src="http://kosal.img-us3.com/_social_/flat-color-round-twitter.png" border="0" width="24" style="max-width:24px;display:block;border:none;"></a>
</div>
</td>
<td width="20" style="display:inline-block!important;font-size:0;width:20px!important;">&nbsp;</td>
<td align="center" valign="middle" width="24" style="display:inline-block!important;font-size:0;width:24px!important;">
<div style="margin:0;outline:none;padding:0;">
<a href="https://www.linkedin.com/" style="margin:0;outline:none;padding:0;"><img src="http://kosal.img-us3.com/_social_/flat-color-round-linkedin.png" border="0" width="24" style="max-width:24px;display:block;border:none;"></a>
</div>
</td>
<td width="20" style="display:inline-block!important;font-size:0;width:20px!important;">&nbsp;</td>
<td align="center" valign="middle" width="24" style="display:inline-block!important;font-size:0;width:24px!important;">
<div style="margin:0;outline:none;padding:0;">
<a href="https://plus.google.com/" style="margin:0;outline:none;padding:0;"><img src="http://kosal.img-us3.com/_social_/flat-color-round-googleplus.png" border="0" width="24" style="max-width:24px;display:block;border:none;"></a>
</div>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="font-size: 13px; min-width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; max-width: 600px;">
<tr>
<td valign="top" align="center" width="600" style="padding-left:20px;padding-right:20px;font-family:arial,sans-serif;color:#696969;line-height:1.3;line-height:150%;">
%SENDER-INFO-SINGLELINE%
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="font-size: 13px; min-width: auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; max-width: 600px;">
<tr>
<td valign="top" align="center" width="600" style="padding:20px;font-family:arial,sans-serif;color:#696969;line-height:1.3;line-height:150%;">
© 2017 Company XYZ by Kosal Vann
<br><br>
<a href="%UPDATELINK%" style="font-family:arial,sans-serif;color:#696969;line-height:1.3;line-height:150%;text-decoration:underline;"><span style="font-family:arial,sans-serif;color:#696969;line-height:1.3;line-height:150%;text-decoration:underline;">Update Subscription</span></a> | <a href="%UNSUBSCRIBELINK%" style="font-family:arial,sans-serif;color:#696969;line-height:1.3;line-height:150%;text-decoration:underline;"><span style="font-family:arial,sans-serif;color:#696969;line-height:1.3;line-height:150%;text-decoration:underline;">Unsubscribe</span></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40">&nbsp;</td>
</tr>
</table>
</div>
</body>
</html>
@kvann
Copy link
Author

kvann commented Jun 16, 2017

Added support to remove iOS styling for email and address.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment