格式化电子邮件以获得最佳的通知外观

因此，我们有一些用户订阅并发送的电子邮件。它们是HTML电子邮件，在(大多数(电子邮件客户端中看起来不错。但有一个问题是，如果你在手机上收到电子邮件，你会收到弹出通知，这些看起来有点垃圾。例如，电子邮件顶部有一个公司标志，它出现在iOS上，它会在通知中包含"公司标志"alt文本(至少在Gmail中是这样(。

另一个问题是，靠近电子邮件顶部的是一个登录链接，这很重要，因为我们想鼓励人们登录，但当它出现在你手机上的弹出通知上时，会浪费空间。无论如何，你都无法从那里点击它！

有没有任何标签、属性或CSS可以控制iOS和Android上的通知中会出现什么或不会出现什么？例如，如果你有这样的东西：

<div>
<img src="http://somedomain.com/mycompanylogo.png" alt="My Company"/>
</div>
<div>
<a href="http://somedomain.com/login">Click here to login!</a>
</div>
<div>
<h2>Important alert title</h2>
</div>
<div>
<!-- some important headline text that would be useful in the notification -->
</div>
<div>
<!-- some more detailed stuff which would be fine not appearing in the notification -->
</div>

当用户收到我们的电子邮件时，有没有办法至少提示图像alt和"点击此处登录！"应该是弹出通知中的一部分？

所以首先要声明

例如，电子邮件顶部有一个公司标志，它出现在iOS上，它会在通知中包含"公司标志"alt文本(至少在Gmail中是这样(。

要解决此问题，您需要一个预标头。pre-header是隐藏的一行，您可以将其放在HTML正文的最顶部。这意味着电子邮件客户端在获取其他内容(例如徽标上的alt标签(之前会阅读该内容。

<!--[if !mso]><!-->
<span style="display:none !important; visiblility:hidden; opacity:0px; color:transparent; height:0px; width:0px; mso-hide:all; max-height:0px; max-width:0px; line-height:0px; overflow:hidden;">Type your teaser content here.</span>
<!--<![endif]-->

在上面的preheader示例中，您可以看到许多不同的事情。首先，我们有片段。这将确保它和语句之间的任何内容都不会在Microsoft客户端中呈现。这是因为Outlooks有限的CSS支持。

接下来，我们有一个带有各种CSS元素的span stag来隐藏其中的内容。然后，包含在span标记中的是您希望在电子邮件客户端预览中显示的内容。

对于手机上出现的登录链接问题，您将希望使用CSS媒体查询。这些可以检测将在其上查看电子邮件的设备的宽度，并且您可以相应地应用样式。下面是一个我用来隐藏你的登录链接的例子。不过，这不会阻止客户端阅读链接，因此仍然建议使用preheader。

<head>
<style>
@media screen and (max-width: 630px) { //Selecting devices less than 630px
.hide_on_mobile {display: none !important;} //Hiding anything that has the hide_on_mobile class
}
</style>
</head>
<body>
...
<div class="hide_on_mobile"><!--Added the hide on mobile class-->
<a href="http://somedomain.com/login">Click here to login!</a>
</div> 
...
</body>

我确实建议对电子邮件CSS支持进行更多的研究，因为与网络不同，我们真的没有标准，而且有点不稳定。Campain monitor确实为各种电子邮件客户端提供了良好的CSS支持指南。

您可以创建类和@media查询来提供一些这种功能。这个概念是阻止一切，除非它满足你的媒体查询。

<style>
.outlook, .ios, .mobile, {
display: none !important;
}
.desktop {
display: block !important;
}
@media only screen and (max-width: 414px) {
.mobile {
display: block !important;
}
.outlook, .ios, .desktop, {
display: none !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.ios {
display: block !important;
}
.outlook, .desktop, .mobile, .ipad {
display: none !important;
}
.desktop {
display: none !important;
}
}
</style>
<!--[if mso]>
<style type="text/css">
.outlook {
display: block !important;
font-size; 16px;
}
.ios, .mobile {
display: none !important;
}
.desktop {
display: none !important;
}
</style>
<![endif]-->

从这里，您可以创建带有类的消息，以便向每个设备发送自定义消息。

<p class="desktop" style="display: none;">You're using a desktop device.</p>
<p class="mobile">You're using a mobile device.</p>
<p class="ios" style="display: none;">You're using an IOS device.</p>
<p class="outlook" style="display: none;">You're using Outlook.</p>

当收件人收到邮件时，他们会收到一条自定义邮件。

有一些注意事项。创建时，此消息将显示，"这是一个桌面设备"到宽度为414px的iPad。你可以微调，但我太懒了，无法自定义。它在安卓设备上工作会很笨拙，因为它们不使用@media查询，而且你不能像IOS或Outlook那样针对它们。最后，如果你在IOS设备上使用Gmail，你可能需要进一步调整。

这至少为您提供了一种通过一封电子邮件瞄准设备的方法，如果指导用户进行设备特定的更新，这可能会很有用。

Js报价：http://jsfiddle.net/wallyglenn/0mokhayq/

祝你好运。

相关内容

最新更新

热门标签：