В течение нескольких месяцев я пытался заставить свои шаблоны электронной почты работать на Android Gmail для учетной записи Hotmail. В ExactTarget я создал шаблоны электронной почты, и они работают 99% времени. Однако в данном конкретном случае я вижу, что размеры текста остаются слишком большими в моем приложении Gmail. Я не вижу, чтобы это происходило в другом месте, но у меня нет доступа к каким-либо устройствам IOS. Так что я не могу проверить там.
Я думал, что это безнадежное дело, пока не добавил таблицу для демонстрации событий (id = "seek"). Когда таблица добавлена, весь текст сокращается до правильного размера, и телефонный номер вверху кажется центрированным, что должно быть выровнено по правому краю, но я возьму то, что смогу получить.
Кроме того, мои кнопки, кажется, выровнены по левому краю в Android IMAP gmail, а также независимо от того, есть это или нет. Если вы можете найти проблему, вызывающую это тоже, я был бы признателен.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
ReadMsgBody{ width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;}
p { margin: 1em 0;}
table td { border-collapse: collapse;}
img {outline:0;}
a img {border:none;}
p {margin: 1em 0;}
@-ms-viewport{ width: device-width;}
</style>
<style type="text/css">
@media only screen and (max-width: 480px) {
.container {width: 100% !important;}
.footer { width:auto !important; margin-left:0; }
.content-padding{ padding:4px !important; }
.mobile-hidden { display:none !important; }
.logo { display:block !important; padding:0 !important; }
img { max-width:100% !important; height:auto !important; max-height:auto !important;}
.header img{max-width:100% !important;height:auto !important; max-height:auto !important;}
.photo img { width:100% !important; max-width:100% !important; height:auto !important;}
.drop { display:block !important; width: 100% !important; float:left; clear:both;}
.footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;}
.nav4, .nav5, .nav6 { display: none !important; }
.tableBlock {width:100% !important;}
.responsive-td {width:100% !important; display:block !important; padding:0 !important; }
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* MOBILE GLOBAL STYLES - DO NOT CHANGE */
body, .tb_properties{font-family: Arial !important; font-size: 12px !important; color: #808080 !important; line-height: 1.5 !important; padding: 0px !important; }.buttonstyles{font-family: arial, helvetica, sans-serif !important; font-size: 16px !important; color: #FFFFFF !important; padding: 10px 25px !important; }h1{font-family: Arial !important; font-size: 18px !important; color: #202020 !important; line-height: 1 !important; }h2{font-family: Arial !important; font-size: 16px !important; color: #202020 !important; line-height: 1 !important; }h3{font-family: Arial !important; font-size: 14px !important; color: #202020 !important; line-height: 1 !important; }a:not(.buttonstyles){line-height: 1 !important; }.mobile-hidden{display: none !important; }.responsive-td {width: 100% !important; display: block !important; padding: 0 !important;}
/* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
}
@media only screen and (max-width: 640px) {
.container { width:100% !important; }
.mobile-hidden { display:none !important; }
.logo { display:block !important; padding:0 !important; }
.photo img { width:100% !important; height:auto !important;}
.nav5, .nav6 { display: none !important;}
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
.centerEvent{
text-align: center !important;
}
.centerEventButton{
width: 100% !important;
}
.centerEventButton a{
text-align: center !important;
}
}
@media only screen and (max-width: 640px) {
#logo-center {
margin: 0 auto !important;
}
#phone-center {
text-align: center !important;
}
}
#seek {
background-color:pink !important;
}
</style>
<!--[if mso]>
<style type="text/css">
/* Begin Outlook Font Fix */
body, table, td {
font-family : arial, helvetica, sans-serif;
line-height : 100%;
font-size : 13px;
color : #808080;
}
/* End Outlook Font Fix */
</style>
<![endif]-->
</head>
<body bgcolor="#EFEFEF" text="#808080" style="margin: 0px; -webkit-text-size-adjust:none;background-color : #EFEFEF; font-family : arial, helvetica, sans-serif; line-height : 100%; font-size : 13px; color : #808080; padding : 20px; ">
<div style="font-size:0; line-height:0;"><custom name="opencounter" type="tracking"><custom name="usermatch" type="tracking" /></div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center" valign="top">
<custom type="header" />
</td>
</tr>
<tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0" width="600" class="container" align="center">
<tr >
<td >
<table style="font-size : 13px; font-family : arial, helvetica, sans-serif; line-height : 100%; color : #808080; " class="tb_properties border_style" cellspacing="0" cellpadding="0" bgcolor="#ffffff" width="100%">
<tr>
<td align="center" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content_padding" style="border:0px;padding : 10px; ">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" class="header" valign="top">
<table style="min-width: 100%; border-top: 0px; border-right: 0px; border-bottom: 1px solid #FFFFFF; border-left: 0px; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px 0px 10px; " class="slot-styling camarker-inner"><table style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 10px; " class="stylingblock-content-wrapper camarker-inner"><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td style="width: 50%; padding-right: 3px;" class="responsive-td" valign="top"><table style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tr><td align="left"><img id="logo-center" data-assetid="30088" src="http://image.info.acadiahealthcare.com/lib/fe8d13727261077973/m/1/5ae6629e-ab4e-4840-9f3e-a4bd81f5edd0.jpg" style="display: block; padding: 0px; text-align: left; height: 94px; width: 250px; border: 0px none transparent;" width="250" height="94"></td></tr></table></td></tr></table></td><td style="width: 50%; padding-left: 3px;" class="responsive-td" valign="top"><table style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 15px 0px 0px; " class="stylingblock-content-wrapper camarker-inner"><h1 id="phone-center" style="color:#202020;font-family:arial, helvetica, sans-serif;font-size:24px;font-style:normal;font-weight:bold;line-height:100%;text-align:right;">
(000) 000-0000</h1></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table>
</td>
</tr>
<tr>
<td align="left" class="" valign="top">
<table style="border: 0px dotted transparent; min-width: 100%; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px; " class="slot-styling camarker-inner"><table style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-right: 10px; padding-left: 10px; " class="stylingblock-content-wrapper camarker-inner"><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td class="responsive-td" style="width: 100%;" valign="top"><table style="background-color: #5D5D5D; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 5px 0px; " class="stylingblock-content-wrapper camarker-inner"><h1 style="color:#202020;font-family:arial, helvetica, sans-serif;font-size:24px;font-style:normal;font-weight:bold;line-height:100%;text-align:center;">
<span style="color:#FFFFFF;">TITLE</span></h1></td></tr></table><table style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><img data-assetid="30087" src="http://image.info.acadiahealthcare.com/lib/fe8d13727261077973/m/1/830947df-d058-40d2-b02a-51e8bb135a02.jpg" style="display: block; height: auto; width: 100%; padding: 0px; text-align: center;" width="600" height="140"></td></tr></table></td></tr></table><table style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 10px 20px 0px; " class="stylingblock-content-wrapper camarker-inner"><h2 style="color:#202020;font-family:arial, helvetica, sans-serif;font-size:18px;font-style:normal;font-weight:bold;line-height:100%;text-align:center;">
Subtitle</h2><div style="text-align: center;">
<div id="lipsum">
<p style="text-align: left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae elit faucibus, interdum lacus sed, egestas enim. Proin ut dui sodales, condimentum neque ut, iaculis massa. Vivamus efficitur fringilla mauris ac posuere. Donec accumsan, mauris quis pretium ornare, justo sem consequat massa, quis dignissim massa ex tempor sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam volutpat id sem vel tempus. Morbi luctus quis metus at fermentum. Ut tincidunt sem lorem, id consectetur velit dictum sollicitudin. In in leo tempor, tempor quam ac, pellentesque massa. Vivamus dictum mauris pulvinar purus accumsan maximus. Maecenas metus urna, consequat sit amet laoreet eu, rhoncus posuere nulla. In pretium neque magna, vitae lobortis eros commodo ac. Vivamus eget purus vitae lectus rutrum scelerisque ac eget dui. Nullam dapibus fermentum congue.</p><p style="text-align: left;">
Vivamus vel tincidunt felis. Suspendisse id rhoncus diam. Praesent eget eros quam. Morbi tellus velit, faucibus consequat sollicitudin ut, pulvinar nec mauris. Fusce at turpis turpis. Curabitur feugiat at odio mattis feugiat. Curabitur condimentum, diam non fringilla vulputate, orci quam porttitor eros, in pulvinar sem lorem ut mauris. Pellentesque convallis varius lectus, dictum pretium nibh ullamcorper sed.</p></div></div></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table>
</td>
</tr>
<tr>
<!-- Fixing Code Starts -->
<td id="seek" align="left" class="" valign="top">
<table style="border: 0px solid transparent; min-width: 100%; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px; " class="slot-styling camarker-inner"><table style="background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 20px 20px 40px; " class="stylingblock-content-wrapper camarker-inner"><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td style="width: 30%; padding-right: 5px;" class="responsive-td" valign="top"><table style="background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 15px 10px 0px 0px; " class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><img data-assetid="30086" src="http://image.info.acadiahealthcare.com/lib/fe8d13727261077973/m/1/bb99a83a-64ad-4141-b16a-5cb378be6ac6.jpg" style="display: block; padding: 0px; text-align: center; height: 250px; width: 188px; border: 0px none transparent;" width="188" height="250"></td></tr></table></td></tr></table></td><td style="width: 70%; padding-left: 5px;" class="responsive-td" valign="top"><table style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-bottom: 10px; " class="stylingblock-content-wrapper camarker-inner"><h3 class="centerEvent" style="color:#202020;font-family:arial, helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:100%;">
Event Name</h3><p class="centerEvent">
<i>Date </i></p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur venenatis dui vitae laoreet. Etiam eleifend feugiat rutrum. Aenean vel mi lorem. Phasellus semper ornare enim eu tempus. In dignissim commodo diam, a venenatis nisi aliquet id. Duis convallis magna ac ante efficitur dictum.</p></td></tr></table><table style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-bottom: 10px; " class="stylingblock-content-wrapper camarker-inner"><table class="centered-button-container" width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td align="left"><table class="centerEventButton" cellspacing="0" cellpadding="0" border="0"><tr><td class="innertd buttonblock" style=" border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; color: #FFFFFF; background-color: #5D5D5D;" bgcolor="#5D5D5D"><a style=" font-size: 16px; font-family: arial, helvetica, sans-serif; color: #FFFFFF; text-align: left; text-decoration: none; display: block; line-height: 100%; background-color: #5D5D5D; border-radius: 0px; border: 0px none #009DDC; padding: 10px 40px; -moz-border-radius: 0px; -webkit-border-radius: 0px;" target="_blank" class="buttonstyles" href="https://www.blueridgemountainrecovery.com/" title="" alias="" conversion="false" data-linkto="https://">Button Text</a></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table>
</td>
<!-- Fixing Code Ends -->
</tr>
<tr>
<td align="left" class="" valign="top">
<table style="min-width: 100%; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px 20px 15px; " class="slot-styling camarker-inner"><table style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 15px 15px 10px; " class="stylingblock-content-wrapper camarker-inner"><div style="text-align: center;">
Call To Action: Click <b><a alias="" conversion="false" data-linkto="http://" href="http://#" style="color:#5D5D5D;text-decoration:none;" title="">HERE</a></b> for more information</div></td></tr></table><table style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 5px 10px 25px; " class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td align="center"><table cellspacing="0" cellpadding="0" border="0"><tr><td class="innertd buttonblock" style="border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;background-color:#5D5D5D;color:#FFFFFF;" bgcolor="#5D5D5D"><a target="_blank" class="buttonstyles" style="font-size:16px;font-family:arial, helvetica, sans-serif;color:#FFFFFF;text-align:center;text-decoration:none;display:block;background-color:#5D5D5D;padding:10px 40px;line-height:100%;border-radius:0px;border:0px none;" href="http://" title="" alias="" conversion="false" data-linkto="http://">Button Text</a></td></tr></table></td></tr></table></td></tr></table><table style="background-color: #939393; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 15px 20px; " class="stylingblock-content-wrapper camarker-inner"><div style="text-align: center;">
<span style="color:#FFFFFF;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel porttitor dolor. Nunc a mi erat. Nam fringilla metus nulla, quis volutpat lacus feugiat sed. Nunc vestibulum est eget ante pulvinar, tincidunt bibendum velit laoreet. Aliquam volutpat orci vitae ipsum faucibus pulvinar. Suspendisse potenti. </span></div><h3 style="color:#202020;font-family:arial, helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:100%;text-align:center;">
<span style="color:#FFFFFF;">www.website.com</span></h3><div style="text-align: center;">
<span style="color:#FFFFFF;">(Location)</span></div><div style="text-align: center;">
</div></td></tr></table><table style="background-color: #565656; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px; " class="stylingblock-content-wrapper camarker-inner"><h1 style="color:#202020;font-family:arial, helvetica, sans-serif;font-size:24px;font-style:normal;font-weight:bold;line-height:100%;text-align:center;">
<span style="color:#FFFFFF;">Call 24/7: (000) 000-000</span></h1></td></tr></table></td></tr></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<custom type="footer" />
</td>
</tr>
</table>