Created
October 22, 2014 17:44
-
-
Save jefffis/806f4082eb00004cf191 to your computer and use it in GitHub Desktop.
Responsive email template -- works in Outlook, Gmail, pretty much everywhere but Lotus Notes. Also, works great on mobile in Gmail =)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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"> </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"> </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