大约一半的电子邮件现在在像苹果 iPhone 或运行 Android 系统的三星 Galaxy S4 这样的移动设备上被打开。有大量研究表明，70% 到 80% 的用户会直接删除那些在移动设备上显示效果不佳的邮件。
如果电子商务营销人员希望将信息传达给智能手机用户，甚至平板电脑用户，他们就需要针对移动端进行设计。
当然，另一半电子邮件营销信息是在笔记本电脑和台式机上被打开的，这些设备通常具有较宽的视口和性能更强大的邮件客户端。营销人员也不应忽视这些用户。
电子邮件的响应式设计
为智能手机、平板电脑、笔记本电脑和台式机进行设计的解决方案，可能与网站移动端优化所采用的方法相同，即响应式设计。
一般来说，响应式设计旨在以既实用又具吸引力的方式向用户呈现内容，无论用户设备的大小或移动性如何。响应式设计专注于提供良好的客户体验，要求营销人员和设计师为用户多做些额外工作。
在针对移动端优化的电子邮件中，响应式设计通常依赖于三种技术或能力：媒体查询（Media Queries）、移动优先设计（Mobile First Design）和流式布局（Fluidity）。
用于响应式电子邮件的 CSS 媒体查询
CSS 媒体查询允许设计师根据用户屏幕的宽度指定不同的样式。例如，可以为具有大视口的设备将 HTML 表格的宽度设置为 600 像素，而为移动设备将同一 HTML 表格的宽度设置为 300 像素。
媒体查询放置在样式表中。在 HTML 电子邮件的上下文中，这通常意味着媒体查询将位于文档头部的 <style> 标签内。
<style type=”text/css”> @media only screen and (min-width: 481px;){ table { width: 600px; } } </style>
请注意，媒体查询以 @media 这个 at-rule 开头，并继续指定一些参数。“only screen”部分表示包含的样式仅适用于屏幕，而不适用于例如打印机等设备。
请注意，这里还设置了最小宽度，因此本示例中的样式仅适用于大于 481 像素的屏幕。
在媒体查询中，电子邮件设计师可以添加任何所需的样式，以确保电子邮件在不同设备上都能呈现良好的效果。
值得注意的是，样式声明通常在HTML电子邮件中以行内方式设置，这意味着习惯上会将样式直接放在HTML标签中，MailChimp在其关于响应式电子邮件设计的简要说明中也指出了这一点。
<table cellpadding=0 cellspacing=0 style=”width: 300px;” >
以这种方式添加样式通常被认为在网站设计中是不规范的做法，但在 HTML 电子邮件设计中却有其合理性，因为并非所有邮件客户端都能或愿意读取样式表。另外值得注意的是，内联样式会覆盖样式表声明，因此即使邮件客户端能够理解媒体查询，如果我们的“默认”样式是以内联方式添加的，它也不会使用媒体查询中的样式。
为了解决这个问题，你可以将媒体查询中的样式标记为重要（important），这样即使存在内联样式声明，邮件客户端也会优先使用这些样式。
<style type=”text/css”> @media only screen and (min-width: 481px;){ table { width: 600px !important; } } </style>
移动优先设计
并非所有移动端邮件客户端都能读取和理解媒体查询。因此，建议采用移动优先的设计方法，并使用媒体查询将 HTML 电子邮件适配到笔记本电脑等更大尺寸的设备上，因为这些设备更有可能配备支持 CSS 媒体查询的邮件客户端。
在实践中，这意味着使用内联样式来创建移动端布局，而 style 标签中的媒体查询则用于在其他设备上放大布局，从而可能消除需要猜测哪些移动端邮件客户端是否支持媒体查询的问题。
流式布局或流式宽度
在设计响应式 HTML 电子邮件布局时，采用不具体声明宽度、而是让设计流动并填充可用空间的流式设计原则也会有所帮助。
在大多数情况下，这只需使用百分比来表示宽度，而不是指定具体的像素值。流式布局可能稍难控制，因此在向客户发送电子邮件之前，务必测试您的电子邮件模板。
响应式电子邮件的布局和设计中应做出哪些更改
电子商务营销人员或设计师可以利用媒体查询、移动优先设计方法以及合理的流式设计，来控制 HTML 电子邮件外观的几乎所有方面。
考虑到这一点，以下是一些应根据用户设备进行调整的元素：
- 电子邮件布局：一般而言，针对移动端优化的HTML电子邮件应采用单栏设计，而面向桌面端的HTML电子邮件采用双栏设计时通常最易阅读。
- 按钮和链接：在移动设备上，链接和按钮的触控目标区域应不小于44像素见方；但对于面向桌面电脑和笔记本电脑的HTML电子邮件，由于鼠标指针可以轻松地选中它们，因此列出链接列表是可以接受的。
- 字体大小：移动设备上的字体必须比在大显示器上显示的字体大得多。
- 图片尺寸：图片应调整大小以匹配查看区域。
- 内边距和外边距：由于移动设备通常会充分利用每个像素，使文字紧贴屏幕边缘，因此务必包含适当的内边距和外边距。
并非所有电子邮件服务提供商都同等对待样式和 HTML 模板
不同的电子邮件服务提供商对样式和 HTML 模板的处理方式各不相同。因此，在着手进行响应式 HTML 电子邮件设计之前，了解其限制和功能至关重要。
响应式电子邮件资源
以下链接将带您访问其他响应式电子邮件资源：
- 万维网联盟媒体查询推荐标准
- Mozilla 开发者网络 CSS 媒体查询
- CSS-Tricks 标准设备的媒体查询
- Treehouse 的固定、流体、自适应与响应式布局
- MailChimp 的响应式电子邮件
- Campaign Monitor 的响应式电子邮件设计指南
- Litmus 的响应式电子邮件设计入门指南
- STYLECampaign 的响应式电子邮件支持表
- GetResponse 的 PDF 响应式电子邮件设计指南
- Jack Filose 的如何设计响应式 HTML 电子邮件