Question

作为我工作的一部分，我需要创建电子邮件模板以将其发送给客户。具有挑战性的部分是所有邮件（gmail，yahoo，移动应用程序）工作正常，丰富，因为它将支持HTML格式。然而它应该支持前景同样丰富的外观。我正在使用表格格式。

如果我用作单张图片，outlook会要求下载它。我们希望在不下载的情况下向客户展示优惠。如果我使用css样式进行编码，那么在outlook中看起来非常糟糕。

请为我推荐任何适用于Outlook桌面的插件或替代解决方案。

这是我使用的示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>sample.com</title>
<style> @media screen {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
img{display:block;}
a{text-decoration:none;color:#fff;font-size:16px;}
span{color:#D24369;vertical-align:top;font-size:12px;}
</style>
</head>

<body>
<table width="750" border="0" cellspacing="0" cellpadding="0"style="background:#0f0708"align="center">
         <tbody>
         <!--corporate section-->
          <tr>
            <td height="10%" width="50%" align="right" style="padding-right:20px;padding-top:10px">
                <span style="color:#fff;font-size:8px;font-family: 'Open Sans', Arial, Helvetica, sans-serif ;">sample text</span>
            </td>
            <td width="5"></td>
          </tr>
          <tr>
            <td align="right" rowspan="1"style="padding-right:2px;padding-top:10px" >
                <img src="images/sample.jpg" width="150" height="87" style="display:block;"/>
            </td>
            <td width="50"></td>
          </tr>
          <!-- corporate logo end-->
            <tr>
              <td align="center"><a href="http://www.google.com" target="_blank" border="0" style="text-decoration:none;"><img src="images/header-1-1-image.jpg" width="750" height="906" style="display:block"/></a></td>
            </tr>

            <tr>
                 <td>
                    <table width="750" border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                    <tr>
                                <td width="4%"></td>
                                <td width="22%" align="center" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif ; color:#fff; font-size:10px;">Available on: <strong style="font-size:12px;"><a href="http://www.zigy.com/" target="_blank" style="text-decoration:none; color:#fff;">Zigy.com</a></strong></td>
                                <td width="1%" align=""><a href="http://www.google.com" target="_blank" border="0"><img src="{{media url="wysiwyg/app-icon_1_1.jpg"}}" width="33" height="34" alt=""/></a></td>
                                <td width="1%"><a href="http://www.google.com" target="_blank" border="0"><img src="{{media url="wysiwyg/app-icon_2_1.jpg"}}" width="31" height="34" alt=""/></a></td>
                                <td width="9%"></td>
                                <td style="color:#fff;font-size:8px;">*This offer is not applicable on Health Bonanza and similar special offers</td>

                    </tr>
                    </tbody>
                    </table>
                 </td>
                </tr>
            <tr>
                <td style="border-top:1px solid #fff;line-height:5px;">&nbsp;</td>
            </tr>
            <tr>
                <td width="90%" align="center" style="color:#fff;font-family: 'Open Sans', Arial, Helvetica, sans-serif ;font-size:10px">To order products, you can also email us at <a href="mailto:rx@sample.com" style="text-decoration:none;color:#fff;font-size:14px;">rx@sample.com</a></td>
                </tr>
            <tr>
                <td style="border-bottom:1px solid #fff;line-height:5px;">&nbsp;</td>
            </tr>
              </tbody>
            </table>
</body>
</html>

谢谢，帕瓦尼

Answer 1

我发现使用zurb电子邮件模板作为起点取得了一些成功。一个好处是他们也有回应。

http://zurb.com/playground/responsive-email-templates

Answer 2

如果您之前未接受发件人的图片，或将其添加到地址簿中，则Outlook会始终要求下载图片以用于安全目的。

我建议不要制作完全由图像组成的电子邮件模板，而是将文本和图像/颜色组合在一起，以防有些人决定不下载图像。

确保将alt txt添加到图像中！

Outlook电子邮件模板样式已损坏

2 个答案: