Created
December 22, 2016 15:26
-
-
Save kvann/aec5ed485d16733427507bed273b5c46 to your computer and use it in GitHub Desktop.
This email template can be used as a starting point for email campaign targeting mobile. There is a small media query section that target the Gmail app for Android and iOS to force font scaling. Depending on your phone model and the Gmail app version you are running, the rendering of your email may slightly differ.
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> | |
| /* Resetting Outlook.com styling */ | |
| .ExternalClass { | |
| width: 100%; | |
| background: inherit; | |
| background-color: inherit; | |
| } | |
| .ExternalClass p, | |
| .ExternalClass ul, | |
| .ExternalClass ol { | |
| Margin: 0; | |
| } | |
| .undoreset div p, | |
| .undoreset p { | |
| margin-bottom: 20px; | |
| } | |
| @media only screen and(max-width: 600px) { | |
| body { padding: 0!important; font-size: 1e m!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) div, | |
| :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; | |
| } | |
| /* Gmail app fixes */ | |
| u + .body, u + .body * , u + .body a, u + .body a span { font-size: large!important; line-height: 150% !important; } | |
| u + .body img { margin: auto!important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: auto!important; } | |
| } | |
| </style> | |
| </head> | |
| <body class="body" style="font-family: arial; line-height: 1.1; margin: 0px; background-color: #FFFFFF; width: 100%; text-align: center;"> | |
| <!--[if (gte mso 9)|(IE)]> | |
| <div style="margin: 0px;outline: none;padding: 0px;width: 100%;background-color: #EFEFEF;background: #EFEFEF;font-family:arial,sans;font-size:15px;color:#555555;text-align: center;"> | |
| <table border="0" cellpadding="0" cellspacing="0" width="100%"> | |
| <tbody> | |
| <tr> | |
| <td align="center" valign="top" width="100%" style="font-family:arial,sans;font-size:15px;color:#555555;"> | |
| <table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#EFEFEF" style="min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;"> | |
| <tbody> | |
| <tr> | |
| <td valign="top" align="left" style="background-color: #ffffff;font-family:arial,sans;font-size:15px;color:#555555;text-align:left;line-height:150px;line-height:1.5;"> | |
| <![endif]--> | |
| <div style="max-width:100%;text-align:center;background-color:#FFFFFF;font-family:arial,sans;font-size:15px;color:#555555;text-align:left;line-height:150px;line-height:1.5;"> | |
| <div style="margin:auto;max-width:650px;padding:10px;background-color:#FFFFFF;font-family:arial,sans;font-size:15px;color:#555555;text-align:left;line-height:150px;line-height:1.5;"> | |
| <div style="font-family:arial,sans;font-family:arial,sans;font-size:21px;color:#333333;text-align:left;line-height:150px;line-height:1.5;">Email Campaign for Mobile</div> | |
| <div style="height:20px;line-height:20px;"> </div> | |
| <img src="http://d226aj4ao1t61q.cloudfront.net/sa6lflpet_harmony-650x300.jpg" width="100%" style="display:block; max-width:100%;"> | |
| <div style="height:20px;line-height:20px;"> </div> | |
| <div style="font-family:arial,sans;font-family:arial,sans;font-size:15px;color:#555555;text-align:left;line-height:150px;line-height:1.5;">Topping bonbon jelly-o bear claw. Chocolate cake cake cupcake ice cream sweet roll tootsie roll cake. Cookie sugar plum gummi bears chocolate tart biscuit. Oat cake pastry marzipan cheesecake carrot cake gummies lemon drops. Sweet gingerbread macaroon bear claw wafer gummi bears chocolate cake cheesecake sesame snaps. Toffee pudding donut. Macaroon soufflé jelly beans cheesecake chupa chups bear claw candy dessert. Icing sesame snaps cake marzipan marshmallow chocolate bear claw fruitcake marzipan. Jelly beans pastry ice cream. Tiramisu soufflé candy. Jujubes gummi bears bonbon cupcake. Marzipan macaroon tart brownie gummies sweet bear claw apple pie chocolate cake. Lollipop gummi bears halvah. Apple pie brownie sweet roll donut. Tart jelly lemon drops cupcake sugar plum cake pastry.</div> | |
| </div> | |
| </div> | |
| <div style="padding-top:40px;padding-right:20px;padding-bottom:40px;padding-left:20px;font-family:arial,sans;font-size:15px;color:#555555;line-height: 140%; outline: none; text-align: center; mso-line-height-rule: exactly; line-height: 1.4;"> | |
| <span style="color: #555555; font-size: inherit; font-weight: inherit; line-height: inherit; text-decoration: inherit;">%SENDER-INFO-SINGLELINE%</span> | |
| <br> | |
| <br> | |
| <!-- ActiveCampaign personalized content for sender details and unsubscribe link // this area is required --> | |
| <a href="%UNSUBSCRIBELINK%" style="margin: 0; outline: none; padding: 0; color: #555555; text-decoration: underline;"> | |
| <span style="color: #555555; font-size: inherit; font-weight: inherit; line-height: inherit; text-decoration: inherit;">Click here to unsubscribe</span> | |
| </a> | |
| </div> | |
| <!--[if (gte mso 9)|(IE)]> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <![endif]--> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment