如何设计一个响应式的HTML电子邮件

如何设计一个响应式的HTML电子邮件

开始
如前所述，HTML电子邮件制作严重缺乏一个标准，对于外行来说，接下来将带你回到一个早期的Web开发时代。由于HTML电子邮件客户端渲染引擎所制，布局必须使用表格和CSS样式必须使用行内样式。几个电子邮件客户将完全无视内的


注意：视窗meta标记对黑莓有负面影响。
现在，我们可以插入媒体查询，有多少取决于你希望每个设备特性所需要。在这个示例中，我们将使用的媒体查询只有一个——大多数设备屏幕大小不大于600px是现代手机和触摸屏做出有利于移动设备优化样式。此外，我们我假设遵循通用移动最佳实践技术，早前也说过，手机用户浏览更大的布局会运到重大的可用性问题。
我们以机样的方式使用媒体查询构建一个网站时，如果视窗大小符合媒体查询条件时，将应用媒体查询里的样式。
@media only screen and (max-width: 600px) {
table[class="hide"], img[class="hide"], td[class="hide"] {
display:none!important;
}
}

在上面的例子中，屏幕小于600px时，通过给带有类名hidden的元素设置display:none来隐藏元素。!important可以确保覆盖任何内联样式。这是响应式电子邮件设计的基本原理：在头部样式中通过!important来覆盖HTML文档中的内联样式，并且根据媒体查询特定的屏幕尺寸来覆盖这些样式。有一个明显的例个是Gmail应用程序将会忽略内部的任何样式。然而，内容的居左会确保Gmail用户有一个更好的用户体验。显然这并不是一个理想的解决文案，目前，响应式电子邮件设计尽可能多的想法是对前沿技术的妥协。
值得注意的是，我们针对HTML元素的CSS属性选择器来克服Yahoo邮件的渲染问题。
所以我们可以看到，媒体查询选择性的显示内容是一个有用的工具，但我们也可以使用它们来让我空调其他功能的布局。或许最重要的是，我们可以约束我们电子邮件的列宽——移动体验最大的关键。
@media only screen and (max-width: 600px) {
table[class="content_block"] {
width: 92%!important;
}
}

我们已经在我们的媒体查询中设置了，当屏幕宽度小于600px，所有类名content_block元素宽度调整为92%。现在我们要做的就是把内联属性指定宽度(600px)和定义类content_block任何表格，我们有一个固定宽度的容器，然后在移动设备下指定一宽度的比例。
给这个容器的子元素的宽度属性都指定为百分比，这是一个基本响应式电子邮件模板。
作为一个经验法则，为了照顾Webkit自动调整标签文本大小，尽量保持字体大小最低在12px以上。
按钮
调用操作(CAT)通常是营销邮件最重要的部分。他们应该是引人注目的，良好的，最重要的是使用。一个强大的CAT标准是根据不同的动作有不同的光标或手指。响应式电子邮件强大功能是在小触屏设备上提供一个手指可操作的按钮，让手指操作不受图像阻碍。

不幸的是，这种按钮不能普遍显示，因为他们依赖于padding属性，但在一些桌面电子邮件客户端并不支持。
@media only screen and (max-width:600) {
a[class="button"]{
display: block;
padding: 7px 8px 6px 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff!important;
background: #f46f62;
text-align: center;
text-decoration: none!important;
}
}

上面的样式声明将改变带有类名button的标签，只要屏幕宽度不大于600px，按钮变大，好看，彩色的，而且跨越内容区域的宽度。CSS3支持不应该是一个问题，我们可以撰写我们的目标是合理的现代的移动技术。
Click me!

内联样式满足鼠标的用户可以点击和更大精度但覆盖这些样式链接，可以让触屏用户减少交互的错误。重要的是，这种方法不依赖于图像，因此避免了图像加载阻滞存在的可用性问题。
结论
响应电子邮件设计仍然是一个妥协方案。令人困惑的是一系列不同的设备，电子邮件客户端的渲染引擎给设计人员和开发人员带来一个艰巨的任务。但随着科技的进步变得更容易为用户提供适当的布局，他们可以毫不费力提供有效的交互。越来载多的电子邮件客户端支持媒体查询改变了移动电子邮件的外观和优化，并且为我们提供了一个平台，大大提高更多的用户体验。现在对我们来说，设计人员和开发人员，尝试有创意的方法来让更多的移动用户有更好的体验。
你设计过电子邮件吗？你使用响应式方法吗？请在评论中让我们知道。