Skip to content

Instantly share code, notes, and snippets.

@jefffis

jefffis/gist:806f4082eb00004cf191

Created October 22, 2014 17:44
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jefffis/806f4082eb00004cf191 to your computer and use it in GitHub Desktop.
Save jefffis/806f4082eb00004cf191 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive email template -- works in Outlook, Gmail, pretty much everywhere but Lotus Notes. Also, works great on mobile in Gmail =)
Raw
gistfile1.txt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Single-Column Responsive Email Template</title>
<style type="text/css">
body, div, table {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
td { -webkit-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0,0,0,0); margin: 0; padding: 0; border: 0; }
#ForceOutlook2010BrowserLink span { padding:0px; }
a.btn {
background: #2d6cbe;
border-radius: 4px;
color: white;
display: inline-block;
font-size: 20px;
font-weight: normal;
mso-hide:all;
padding: 15px 20px;
text-decoration: none;
mso-hide:all;
}
.body {
color: #888;
font-family: sans-serif;
font-size: 16px;
line-height: 23px;
}
.subtle {
color: #ccc;
}
.mouse {
font-size: 12px;
}
/*** enter your styles ***/
@media screen and (max-width: 621px) {
#wrapper {
padding: 20px !important;
}
.hide {
display: none !important;
}
/*** enter your styles ***/
}
</style>
</head>
<body marginwidth="0" marginheight="0" bgcolor="#ffffff" leftmargin="0" topmargin="0" offset="0">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<table width="100%" cellspacing="0" cellpadding="0" class="hide"><tr><td height="20">&nbsp;</td></tr></table>
<table style="margin:auto;max-width:600px;" id="wrapper" cellpadding="0" cellspacing="0"><tr><td>
<table class="content" width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="body">
<span class="h1">{title content}</span>
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique neque dolore omnis magnam, commodi, earum sapiente corporis delectus quo eos molestias accusantium pariatur perferendis dolorem animi nostrum nam vel vitae?
<br /><br />
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:50px;v-text-anchor:middle;width:300px;" arcsize="8%" strokecolor="#2d6cbe" fillcolor="#2d6cbe">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">{linkText}</center>
</v:roundrect>
<![endif]-->
<a href="${invoiceURI}" class="btn">{linkText}</a>
<br /><br />
<span class="subtle">------------</span>
<br /><br />
<span class="mouse">{mouseCopy}</span>
</td>
</tr>
</table>
</td></tr></table>
<table width="100%" cellspacing="0" cellpadding="0" class="hide"><tr><td height="20">&nbsp;</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment