Last active
June 16, 2017 15:40
-
-
Save kvann/d74d3cb98c283f100661a5b4e6730560 to your computer and use it in GitHub Desktop.
Simple email template for Gmail app, iPhone, Android, Outlook desktop and other popular email services.
This file contains 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 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"> </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"> </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"> </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"> </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"> </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;"> </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;"> </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;"> </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"> </td> | |
| </tr> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
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
The redundancy of the Gmail app fixes in the head tag is intended. This is to ensure the template is responsive in the Gmail app for Android and iOS.