（本文最初发表于2022年6月7日。更新于2024年8月5日。）
您的企业邮箱是否仅针对触摸交互进行了优化？
越来越多的企业邮箱在移动设备和连接的对象上打开。 屏幕尺寸缩小。 因此，您希望订阅者能够从您的企业邮箱中看到最重要的信息。 一旦他们打开它们。
这意味着当您的企业邮箱在移动设备和可穿戴设备上打开时，您需要隐藏不太相关的信息。
否则，您的打开率和转化率之间的差距将会扩大，最终导致您的打开率停滞不前，因为订阅者失去了打开您的企业邮箱的兴趣。
在本文中，我们将向您展示如何隐藏在移动设备上查看的企业邮箱中的不相关内容。 让我们开始吧。
如何在 Outlook 中隐藏企业邮箱内容？
使用显示：无
手风琴的实施
具体应用：按客户类型
按设备类型
隐藏企业邮箱内容的好处
如何在 Outlook 中隐藏企业邮箱内容？
display:none CSS 规则适用于 Outlook 2007/10/13，但如果要隐藏的元素中有表格，则该表格的内容仍然可见。
要隐藏 Outlook 中的内容，请使用 mso-hide:all 标签。 这可确保在 Outlook 中查看时 div 中的任何内容都保持隐藏状态。
使用显示：无
Gmail 支持“display:none”的消息给世界各地的企业邮箱开发者带来了欢乐。
以前，企业邮箱开发人员必须使用“display!important”或设置 height=0 来隐藏元素，而 Gmail 的集成商不会剥离代码。
现在，随着 Gmail 支持“display:none”并承诺未来支持媒体查询，可以使用“display:none”以及适合屏幕宽度的媒体查询来隐藏内容块。 我们以下面的代码片段为例。
手风琴的实施
display:none CSS 规则适用于 Outlook 2007/10/13，除非您要隐藏的元素中有表格。 在这种情况下，即使其他所有内容都被隐藏，表的内容也将可见。 所以要隐藏任何内容
通过在企业邮箱中使用手风琴效果，内容会被组织成多个片段，订阅者可以点击这些片段来扩展和进一步阅读。
这实际上并没有隐藏内容，而是将其组织成多个部分，使订阅者可以轻松阅读他们感兴趣的部分，而忽略其余部分。
“由于互联对象和语音界面的兴起，响应式设计将呈现出全新的维度。 »
查德·S·怀特， 企业邮箱营销规则
具体应用：按客户类型
通过在企业邮箱中实施手风琴效果，企业邮箱内容会被仔细组织成我们通过在企业邮箱中嵌入表单进行测试的片段。 这些表单与 Mac 上的 Apple Mail、Gmail Desktop、Yahoo Desktop、AOL 和 Outlook 兼容。 使用这些企业邮箱客户端的订阅者看到了以下企业邮箱。
使用不兼容企业邮箱客户端的订阅者收到以下消息而不是表单。
按设备类型
需要回答的关键问题之一是：您应该在移动企业邮箱中显示/隐藏哪些内容？ 以下是一些可以帮助您的示例。
| 仅适用于桌面 | 仅适用于移动设备 |
| 电子书下载 长视频 教程 白皮书 多列 复杂的设计 |
应用程序下载 让 CTA 脱颖而出 带有静态第一图像的嵌入式视频 二维码/条形码 定期交易 基于位置的优惠 |
隐藏企业邮箱内容的好处
- 想象一下您需要向订阅者推广您的移动应用程序的场景。 根据他们用来查看企业邮箱的设备，内容会有所不同。 桌面用户将看到突出显示应用程序功能的内容。 移动用户将看到 CTA，以从相应的 App Store 下载应用程序。
- Outlook 不显示 GIF，仅显示第一张图像作为备用图像。 这可能会发送错误的消息。 使用 mso-hide:all 您可以隐藏 Outlook 的 GIF 并显示后备图像。
- 某些企业邮箱客户端不支持交互元素。 为了防止这些客户端显示错误的布局，您可以隐藏这些企业邮箱客户端的内容。
- 减少或隐藏视觉或文本内容还可以提高连接速度较慢的移动设备上的加载速度，从而改善客户体验。
“如今，加载时间是比图像阻塞更大的问题”
Kristina Huffman，Salesforce 体验设计师
裹！
创建响应式企业邮箱并非易事。 企业邮箱渲染的复杂性源于需要确保企业邮箱在通过不同的 ESP、企业邮箱客户端、操作系统、Web 浏览器以及多种设备和屏幕尺寸时保持功能和视觉一致。
互联对象的日益普及对响应式设计提出了重大挑战。 目前，遵循良好的编码实践仍然是我们最可靠的方法。
有关更多信息，请查看我们的企业邮箱客户端黑客攻击详细指南。
