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

【问题标题】：Formatting e-mails for optimal notification appearance格式化电子邮件以获得最佳通知外观
【发布时间】：2019-04-19 18:38:37
【问题描述】：

所以我们有一些用户订阅和发送的电子邮件。它们是 HTML 电子邮件，在（大多数）电子邮件客户端中看起来不错。但是一个问题是，如果您在手机上收到电子邮件，您会收到弹出通知，这些看起来有点垃圾。例如，电子邮件顶部有一个公司徽标，它出现在 iOS 上，它会在通知中包含“公司徽标”替代文本（至少在 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 和“单击此处登录！”当用户收到我们的电子邮件时，应该是弹出通知中显示的内容的一部分吗？

【问题讨论】：

标签： android html ios css email

【解决方案1】：

您可以创建类和@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>

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

有一些警告。创建后，此消息将向 414 像素宽的 iPad 显示“这是一个桌面设备”。你可以微调，但我懒得定制。它不适用于 Android 设备，因为它们不使用@media 查询，而且你不能像 IOS 或 Outlook 那样定位它们。最后，如果您在 IOS 设备上使用 Gmail，您可能需要进一步微调。

这至少为您提供了一种使用一封电子邮件来定位设备的方法，如果指导用户了解特定于设备的更新，这可能会很有用。

JsFiddle：http://jsfiddle.net/wallyglenn/0mokhayq/

祝你好运。

【讨论】：

明确地说，这不是关于为手机屏幕格式化电子邮件。这是关于为您在手机上收到的弹出通知格式化它。那个微小的 sn-p 似乎让你知道你刚刚收到了一封电子邮件。默认情况下，它只抓取电子邮件中的前几行文本，这通常不是最佳选择，尤其是在有一些标题内容的情况下。
@MattBurland，您问这个问题：“是否有任何标签、属性或 CSS 可以控制 iOS 和 Android 通知中将显示或不显示的内容？”我刚刚概述了你将如何做到这一点。你可以针对 IOS、Outlook 和 Android 变得通用。您可以为徽标执行此操作。祝你好运。

【解决方案2】：

所以先说出来

例如，电子邮件顶部有一个公司徽标，它出现在 iOS 上，它会在通知中包含“公司徽标”替代文本（至少在 Gmail 中是这样）。

要解决此问题，您需要一个预标头。前标头是隐藏在 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]-->

在上面的预标头示例中，您可以看到许多不同的事情正在发生。首先我们有 sn-p。这将确保包含在该语句和  语句之间的任何内容都不会在 Microsoft 客户端中呈现。这样做是因为 Outlook 对 CSS 的支持有限。

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

对于出现在移动设备上的登录链接的问题 - 您需要使用 CSS Media queries。这些可以检测电子邮件将在其上查看的设备的宽度，您可以相应地应用样式。这是我用来隐藏您的登录链接的示例。这不会阻止客户端阅读链接，因此仍然建议使用预标题。

<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 支持进行更多研究，因为与 Web 不同的是，我们确实没有标准，而且有点不稳定。 Campain 监视器确实为各种电子邮件客户端提供了一个很好的CSS support guide。

【讨论】：

预标题是完美的。感谢您的提示。