邮件设计最佳实践

电子邮件一直是我们团队的营销利器，但最近发现，原来我们的邮件订阅用户里已经有超过 20% 的用户会在手机端打开邮件了，而我们的推广邮件却不是响应式的！

于是赶紧把这件事儿提上了日程，并且整理了一份邮件设计的最佳实践，在这里也分享一下。

设计

• 注重内容，而不是样式！
• 宽度保持在 600px 内，最宽不要超过 800px
• 使用栅格系统
• 图片通常会被邮件客户端自动屏蔽（像 Outlook 2016 就自动屏蔽图片），因此，不妨给图片加上链接
• 不要设计全图片的邮件
• 不要使用背景图片
• 最好使用 .png 或其它无损格式
• 还要注意面向 Retina 屏幕或其它高清屏幕。这种情况下，将图片改为 2 倍像素（如原来 600×600px 的，则改为 1200×1200px）
• 使用安全字体（英文：Arial、Verdana、Georgia 和 Times New Roman 等；中文：微软雅黑、黑体、宋体等）
• 避免使用需要 Flash 或 JaveScript 的元素，如果需要动效，可以选择使用 .gif 图片（但也要注意 .gif 图片的大小）
• 注意按钮适合于拇指点击
• 按钮上的文案不要简单只写「点击查看」，用「在博客上阅读更多」「现在就购买」「对比一下价格」等等文案会更有说服力
• 单栏会比多栏的布局更适于阅读（尤其在手机端），而且，不要超过 3 栏
• 图片在左，文字在右
• 字号不宜小于 16px（当然，苹果推荐 17-22px，Google 推荐 18-22px）
• 提供在浏览器阅读的链接（通常置于邮件左/右上角）
• 也要考虑 Apple Watch 的适配问题了，特别是你的邮件订阅用户是一些较 Geek 的用户时
• 在邮件页脚提供必要的文案信息，如用户为什么会收到这个邮件、你的联系方式、核心产品、版权说明等
• 务必提供退订选项，并且应该让退订选项一目了然（通常置于邮件末端）
• 发往国外的邮件，要注意当地法律。比如美国就有 CAN-SPAM 承诺

开发

• 用 table 来搭建结构，即便是复杂的布局，也可以利用 table
• 避免使用 float 或 position
• 给 table 添加 cellpadding valign 和 width 值，以此强制结构化盒子模型
• 保持 CSS 简洁，避免：
  • 复杂的装饰，比如 “font:#000 12px Arial, Helvetica, sans-serif;”
  • 用 #000 替换 #000000
  • 复杂的 CSS 布局属性，比如 slot position clear visibility
  • 复杂的选择器，比如后代选择器、子元素选择器、相邻兄弟选择器、伪类元素等
• 发送邮件之前，将所有 CSS 都做成内部样式表（即放在 HTML 文档中，因为主流的 Webmail 客户端都不支持 link）
• 图片，只添加绝对路径链接（Absolute Links）
• 别折腾 JavaScript 或 Flash 了，当下的邮件客户端都不支持
• 使用媒体查询（Media Queries）来打造移动友好的邮件
• 适合拇指点击的链接区域：~46×46px
• 测试，一定要测试！
• 在这里看看 哪些邮件客户端支持哪些 CSS

寻找邮件设计灵感？看看这些网站吧

• Really Good Emails
• MailChimp 设计灵感地
• MailChimp 出品的邮件设计指南

---

嘿，我是 Dominic H，一个后知后觉的产品经理。这几天我还发了这几篇文章，你可能也会感兴趣：

• 《产品人必备的 12 个 Chrome 扩展程序》
• 《24 个高效率产品设计工具》
• 《 产品人进阶必看视频 #1》

题图选自 Unsplash.com，photo by Mathyas Kurmann。