代码之家 › 专栏 › 技术社区 › Matt Burland

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

email css ios html android

Matt Burland · 技术社区 · 7 年前

所以我们有一些用户订阅和接收的电子邮件。它们是HTML电子邮件,在(大多数)电子邮件客户机中看起来不错。但有一个问题是,如果你在手机上收到电子邮件,你会收到弹出式通知,这些看起来有点垃圾。例如,电子邮件顶部有一个公司徽标,它出现在iOS上,它将在通知中包含“公司徽标”alt文本(至少在Gmail中是这样)。

另一个问题是,靠近电子邮件顶部的是一个登录链接,这很重要,因为我们希望鼓励人们登录,但当它出现在您手机的弹出通知上时会浪费空间。你也不能从那里点击它!

在iOS和Android上,是否有任何标签、属性或CSS可以控制通知中会出现或不会出现的内容?例如,如果您有如下内容:

<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和“单击此处登录!”当用户收到我们的电子邮件时,是否应该是弹出通知中显示的内容的一部分?

2 回复 | 直到 7 年前

JGreatorex 7 年前

所以首先你说

例如,电子邮件顶部有一个公司徽标,它出现在iOS上,它将在通知中包含“公司徽标”alt文本(至少在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]-->

在上面的preheader示例中,您可以看到许多不同的情况。首先我们有  片断。这将确保在它和  语句将不会在Microsoft客户端中呈现。这是因为outlooks对CSS的支持有限。

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

对于手机上出现的登录链接问题-您将要使用 CSS Media queries . 这些可以检测到电子邮件将在其上查看的设备的宽度,您可以相应地应用样式。下面是一个我用来隐藏你的登录链接的例子。但这不会停止客户端读取链接,因此仍然建议使用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支持进行更多的研究,因为与Web不同,我们确实没有标准,而且有点不稳定。Campain监视器确实有一个很好的 CSS support guide 对于各种电子邮件客户。

gwally 7 年前

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

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

有一些警告。创建后,此消息将显示“这是一个桌面设备”,iPad的宽度将达到414px。你可以微调,但我太懒了,无法定制。它将在Android设备上笨拙地工作,因为它们不使用@media查询,而且您不能像iOS或Outlook那样瞄准它们。最后,如果您在iOS设备上使用Gmail,可能需要进一步微调。

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

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

祝你好运。