邮件设计最佳实践

2016-11-03 11:18:00

超级产品经理

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

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

设计

注重内容，而不是样式！
宽度保持在 600px 内，最宽不要超过 800px
使用栅格系统
避免使用 float 或 position
图片通常会被邮件客户端自动屏蔽（像 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 承诺](https://zh.wikipedia.org/wiki/%E9%9B%BB%E5%AD%90%E9%83%B5%E4%BB%B6%E8%A1%8C%E9%8A%B7# CAN-SPAM_.E7.9A.84.E6.89.BF.E8.AB.BE)

开发

用 table 来搭建结构，即便是复杂的布局，也可以利用 table
给 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 设计灵感地](http://inspiration.mailchimp.com/# all)
MailChimp 出品的邮件设计指南

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

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

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

[
Email Design Reference
— Coding an HTML email isn't much different than coding a website was back in the late '90s. The same design tools are used to produce your final result. And the same general design principles are still in play: contrast, repetition, proximity, and alignmen](http://templates.mailchimp.com/?_ga=1.217963614.939978030.1439358277))
Dominic_H・ templates.mailchimp.com →)
[
28 Tips for Designing Effective HTML Emails
— We’ve created a fair number of emails in our time, here at dt. After countless product updates, newsletters, special offer announcements and multiple other](http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-html-emails))
Dominic_H・ www.dtelepathy.com →)
[
7 Design Tips For Building Successful Emails in 2016
— Want email inspiration to last throughout the year? Follow these 7 design tips for building successful emails in 2016, based on our State of Email Report.](https://litmus.com/blog/7-design-tips-for-building-successful-emails-in-2016))
Dominic_H・ litmus.com →)
[
Page not found - Comm100
— Copyright © document.write((new Date()).getFullYear()); Comm100 Network Corporation. All Rights Reserved. Site Map | Privacy Poli](https://www.comm100.com/pagenotfound.aspx)
Dominic_H・ www.comm100.com →
[
【信息图】邮件设计最佳实践方法 - www.Comm100.cn
— Comm100邮件营销博客传播实用的邮件营销知识、典型的邮件营销案例和最新的邮件营销动态。](http://www.comm100.cn/blog/infographic/email-design-best-practices.html)
Dominic_H・ www.comm100.cn →