凭借一定的 HTML 和 CSS 经验，你只需一个周末就能学会设计自己的响应式电子邮件模板。利用这些新掌握的技能，你可以掌控你的电子邮件营销信息在几乎所有设备上的显示效果。
无论客户是在 MacBook Pro 上还是在 Samsung Galaxy S6 上阅读，电子邮件营销信息都应看起来美观。你的产品推荐和精炼有力的文案必须在 Gmail 或 Outlook 中都能良好呈现。
解决方案是采用对邮件客户端友好的响应式设计。当然，市面上有许多优质的响应式电子邮件模板可供选择。你可以在 Practical Ecommerce 找到 28 个建议。但到了某个阶段，你可能想自己做点什么：设计一个完美契合你品牌和业务需求的模板。
从现有模板中学习
学习设计响应式电子邮件模板的最佳方法之一是分析现有的模板。
以 Litmus Software 提供的 Slate 产品公告响应式电子邮件模板为例。如果你下载该模板并在台式电脑的浏览器中打开，你可能会注意到标题右侧有一些占位符文本，上面写着：“顶部加一点文字会很不错。”
在相对较大的屏幕上查看时，Slate 模板的标题中包含一个文本区域。
但是，当你在较小的移动设备上（如 iPhone 6）查看该模板时，那段文本就消失了。
在移动设备上，标题右侧的文本不会显示。
这种响应式行为在现代 Web 浏览器中很容易实现，但 Litmus 是如何在邮件客户端中做到这一点的呢？为了找出答案，可以尝试使用 Google Chrome 的开发者工具。在 Chrome 中打开 Slate 模板，右键或 Alt+点击任意位置，然后选择“检查元素”（Inspect Element）。
Chrome 的开发者工具应打开，占据屏幕约一半的区域。
Chrome 的开发者工具可帮助你拆解响应式电子邮件模板。
在屏幕上的开发者工具部分，查找左上角附近的移动设备图标。
Chrome 的移动模拟图标位于开发者工具面板的左上角。
此图标将打开一个模拟器，向你展示页面（在本例中为电子邮件模板）在各种设备上的显示效果。
Google Chrome 开发者工具中的模拟器会展示模板在各种设备上的外观。
现在，右键或 Alt+点击页眉，再次选择“检查元素”，以帮助在开发者工具中定位页眉代码。在本例中，你会发现文本最终位于一个 class 为 “mobile-hide” 的 td 元素内。
使用 Chrome，你可以找出导致文本消失的原因。
如果你查看模板顶部的样式声明，会发现 “mobile-hide” 位于一个媒体查询中，该查询仅在屏幕宽度低于 525 像素时激活。问题解决了，你也就知道了 Litmus 是如何实现的。
在你花一些时间拆解几个响应式电子邮件模板后，你将开始了解它们的工作原理，并有望构建一两个自己的模板。
从真实邮件中学习
使用上述描述的原则，你还可以从进入收件箱的真实邮件中学习。
Litmus 有一个名为 Scope 的免费工具，旨在简化邮件共享。Scope 包含代码检查功能，让你能够看到来自 Walmart、Amazon 或 Netflix 的邮件是如何开发的。
使用框架
响应式电子邮件框架能帮助你更快速地设计兼容移动端和桌面端的邮件。它们提供了一个基础，你可以在其上添加自己的内容。与完全从头开始相比，它们更容易使用，而且在某些情况下，比直接使用模板提供了更大的灵活性。
以下是一些值得尝试的响应式电子邮件框架：
Zurb 的 Ink 是几个流行的响应式电子邮件框架之一。
Ink：由产品设计咨询公司 Zurb 创建。这一点很重要，因为 Zurb 自 1998 年以来一直在开发 Web 工具，并且是 Foundation 背后的公司，Foundation 是最先进的 Web 开发响应式框架之一。Ink 为宽度 580 像素或更宽的显示器使用 12 列网格；在 580 像素以下，每列变为全宽并垂直堆叠。
Responsive Email Patterns：该框架于 2014 年 10 月发布，让你直接基于几种流体模板进行构建。与 Ink 一样，它适用于多种设备。
Cerberus 的诞生是因为如果没有框架，HTML 邮件设计会非常困难。
Cerberus：根据项目核心作者 Ted Goas 的说法，“在桌面端、移动端和 Outlook 之间，HTML 邮件就像地狱里的三头犬。”Goas 解决这一难题的方案是一系列带有或不带有媒体查询的邮件设计模式。
Email Framework：这个通用命名的解决方案提供了开发你自己模板的代码示例，并处理了许多常见情况。
跟随教程
有数百个关于响应式或流式电子邮件设计的优秀教程。考虑从头到尾跟随其中几个，最终你将拥有更多的模板，并且应该更好地理解它们为何以及如何构建。
以下是一些你应该尝试的电子邮件设计教程：
- 如何：从零开始编写响应式电子邮件代码，由 Alex Ilhan 撰写。本教程引导你完成构建 Crowder 响应式电子邮件模板的过程。你将学习 Ilhan 如何在不同设备间管理页面流程，还将获得一个 HTML 电子邮件骨架供使用。
- 创建简单的响应式 HTML 电子邮件，由 Nicole Merlin 撰写。在这篇 2013 年的教程中，Merlin 使用流式设计来管理布局。她像编写网页一样编写电子邮件，CSS 放在顶部，然后使用 Premailer 将 CSS 移至行内。
- 《无需媒体查询打造面向未来的响应式电子邮件》，作者为 Nicole Merlin。在这篇较新的教程中，Merlin 改进了相关技术，并解决了响应式电子邮件设计中的六大主要问题。
- 《使用 Ink 构建响应式电子邮件模板》，作者为 Nicholas Cerminara。如果你对前述“面向未来”的框架建议感兴趣，请阅读 Scotch.io 上的这篇教程，它堪称你所能找到的最佳教程之一。
参加在线课程
有许多专注于响应式电子邮件设计和开发的在线课程。大多数课程只需几个小时就能让你创建出流式和灵活的电子邮件。
- Zurb 大学：响应式电子邮件入门。对于 299 美元，你可以从 Zurb 工程师那里现场学习。这不是按需课程，而是一场直播活动。
- Udemy：创建响应式 HTML 电子邮件。设计师兼开发者 Chris Converse 教授这门两小时的课程。课程价格为 150 美元；你也可以在 Lynda.com 上找到相同的课程。
- Treehouse：HTML 电子邮件设计。Treehouse 会员可以访问由 MailChimp 用户体验设计师 Fabio Carneiro 主讲的这门课程。