Question

我为我们的电子邮件营销活动做了一个模板。但是在gmail上，msn（基于浏览器）很好，但前景不好。我该如何解决这个问题？

我的一段代码：

<td valign="top" width="194" class="rightColumnContent">

                                                <!-- // Begin Module: Top Image with Content \\ -->
                                                 <table border="0" cellpadding="10" cellspacing="0" width="194px" height="194px" style="background-color:#fafafa; margin-top:20px;">
                                                    <tr mc:repeatable>
                                                        <td valign="top">
                                                            <img src="http://cdn.popsbuy.com/emailing/y/images/arama.png" style="max-width:69px;float:left;margin-right:15px;" mc:label="image" mc:edit="tiwc200_image01" /><h4 class="h4" style="float: left;">ARAMA</h4>
                                                            <div mc:edit="tiwc200_content01" style="text-align:center; margin-top:10px;clear:both;"><br />

                                                             Aradığın ürüne, siteye, markaya doğrudan Popsbuy hesabınla erişebilirsin.

                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                                <!-- // End Module: Top Image with Content \\ -->

                                            </td>

On Outlook enter image description here

Answer 1

让所有客户看起来很棒的HTML电子邮件几乎每个尝试过电子邮件营销的人都会遇到这种情况。您的问题没有简单的答案，但我会首先关注some of this advice并使用litmus等工具测试您的电子邮件模板。

Answer 2

您需要在每个表格单元格中重新声明您的字体堆栈。

另外，请避免使用边距，而是在<td>标记中使用填充。

Float也没有得到广泛支持。如果你想浮动，你应该使用align="left"代替，但是对于你的例子，最好把它保存在表格中。

您的代码应如下所示：

<table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="60">
      <img src="http://cdn.popsbuy.com/emailing/y/images/arama.png" mc:label="image" mc:edit="tiwc200_image01" />
    </td>
    <td width="140" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; font-weight:bold; padding-left:15px; font">
      ARAMA
    </td>
  </tr>
  <tr>
    <td width="100%" colspan="2" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
      <div mc:edit="tiwc200_content01" style="text-align:center; margin-top:10px;clear:both;"><br />
       Aradığın ürüne, siteye, markaya doğrudan Popsbuy hesabınla erişebilirsin.
      </div>
    </td>
  </tr>
</table>

我将表格宽度设置为200，如果您愿意，可以将其更改为百分比。

Answer 3

Float在Outlook 2007+中无法正常工作。从2007年开始，Outlook for Windows的版本使用Office作为呈现引擎，因此无法正确呈现标准HTML。

对齐通常会起作用，但最安全的做法是创建一个双列表，左侧是图像，右侧是文本。图像列应具有明确设置的宽度。（不要试图使表格多行。在电子邮件HTML中，嵌套一系列简单表格比创建一个复杂表格更好。）

确保在表标记中使用适当的旧式HTML 4前标记属性。特别是，要获得布局，请确保表格单元格具有“valign ='middle'”。

如果您通过其中一个主要的电子邮件服务提供商发送邮件，例如Mailchimp或Campaign Monitor（您应该保护列表的完整性），它会为您列出所有样式代码 - 所以您实际上不需要为每个表格单元重新声明样式，您只需使用嵌入式样式表即可。

Outlook和Gmail电子邮件完全不同

3 个答案: