制作简单的响应式HTML邮件

最新推荐文章于 2024-01-07 22:54:52 发布

.NET跨平台

最新推荐文章于 2024-01-07 22:54:52 发布

阅读量2.8k

点赞数 2

分类专栏： HTML5+CSS|CSS3

原文链接：https://blog.csdn.net/WuLex

版权

HTML5+CSS|CSS3 专栏收录该内容

153 篇文章 10 订阅

订阅专栏

在这次教程中，我将为你展示怎么制作简单的响应式HTML邮件，并且能适应各种邮件客户端，包括所有新的智能手机邮件客户端和邮件应用程序。我们将使用到尽可能少的media queries和流动式设计来取得最大的兼容性。

`Media Queries`：只能解决一半的问题

曾经有一段时间media queries足够解决iOS和Android的邮件应用中响应式分布的问题，因为这两者都支持media queries。

然后iOS和Android平台上新的邮件应用开始泛滥起来，每个应用对响应式邮件的支持各不相同。

最值得关注的时Android平台最近更新的Gmail应用，使用频率是原生系统邮件应用的两倍之多，（目前贡献11%的邮件点击率）。这个应用以前不支持media queries，现在也还不支持，但现在会通过压缩外部table来缩放邮件，使邮件缩小适应屏幕大小。当你的整个邮件的布局在手机中都依靠media queries时，情况就变得十分难控制，产生不理想的效果。

为什么流动式设计是新的潮流

庆幸的是你可以设计和制作适应各种邮件应用的布局，包括那些不支持media queries的。你可以使用流动式设计。

然而，在某些设计上你需要作出妥协。那些把多栏等分放在一栏的布局不适用于这种方法。如果你能尝试着不使用这种方式，有些其他的设计能够派上用场。

这就是我们今天要制作的邮件：

Final-Product-Both

开始准备

首先准备空白的文档。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>A Simple Responsive HTML Email</title>
        <style type="text/css">
        body {margin: 0; padding: 0; min-width: 100%!important;}
        .content {width: 100%; max-width: 600px;}  
        </style>
    </head>
    <body yahoo bgcolor="#f6f8f1">
        <table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td>
                                Hello!
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

我们现在要制作的页面包含header，doctype和作为容器有背景颜色的table（由于body标签样式没有兼容支持，这里使用body和table作为外层封装）。想了解更多关于这一步的信息，看这里从零开始制作HTML邮件模版。

我还加入了放主要内容的table标签，设置居中对齐，class为’content’。

注意

注意：你会发现在本教程中我将把CSS放在文档的head标签里面。通常我把样式放在head里是因为我将会重用样式，只用一次的样式放在行里。

重要：任何时候你把CSS放在head标签的时候，在差不多完成的时候你必须使用工具把所有样式放在一行。如果你使用MailChimp或者Campaign Monitor，当你导入你的设计时系统会自动帮你把样式改成一行。你必须进行这一步因为有些客户端，比如Gmail，会忽略或者去掉你的<style>标签里的内容。你可以使用像Premailer 这样的工具。使用Premailer或者类似的工具时要记住先要拿掉media queries（因为我们不希望这部分被改动），完了再重新嵌入。MailChimp和Campaign Monitor会自动会帮你处理好。

在Yahoo!中隐藏手机样式

你会注意到body标签有额外的属性。Yahoo邮箱会把你的media queries当作最重要的规则，你需要用属性选择来避免这种情况。我觉得最简单的方法是（像Email on Acid提倡的一样）在body标签里添加任意属性。我这里使用’yahoo’，但你可以使用其他你喜欢的属性。

<body yahoo>

你可以使用body标签的属性选择在CSS中定义样式。

body[yahoo] .class {}

掌握流动式设计的两个技巧

就像你看到的，我们的’content’ table设置了宽为100%，这样会流动而且占据整个手机和平板电脑屏幕的宽。我们还要把最大宽度设为600px，避免邮件在大屏幕中占据全屏。

要做到邮件可以响应所有的邮箱客户端需要用到两个比较巧妙的技巧。感谢Tina Ye提供了这两个技巧的教程，可以在FogCreek Blog上看到。

解决对`Max-Width`缺少支持的情况

不幸的是并不是所有邮箱客户端都支持max-width。为了让邮件兼容Outlook和Lotus Notes 8 & 8.5，我们要把每个table放在条件语句里，这样就会有一个固定宽度table。这种方法针对IE（Lotus Notes使用IE内核）和Microsoft Outlook。

下面把table放在条件语句中：

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <![endif]-->
            <table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                        Hello!
                    </td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->

解决苹果邮箱客户端的兼容性

奇怪的是，苹果邮箱客户端（通常非常先进）也不支持max-width属性。但它支持media queries，所以只要viewport是600px宽的屏幕，我们可以在’content'样式里添加固定宽度。

<style type="text/css">
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
}
</style>

创建`Header`

接下来我们加入table的第一行 — header。在我们已经创建好的行里加入以下样式：

<td class="header" bgcolor="#c7d8a7">
Hello!
</td>

然后在CSS里给header加padding：

.header {padding: 40px 30px 20px 30px;}

加入第一行响应式内容

接下来我们要加入第一行响应式内容。我们制作的方式是使用HTML的对齐属性创建两个并排的“浮动”的table。

Left Column
左栏
用下面的内容替换"Hello!"：

<table width="70" align="left" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td height="70" style="padding: 0 20px 20px 0;">
            <img src="images/icon.gif" width="70" height="70" border="0" alt="" / >
        </td>
    </tr>
</table>

我们创建一个70px宽的table，并加入padding作为两个table之间的空隙。在手机屏幕里，底部的padding会在垂直角度添加两栏之间的空隙。

右栏
我们将再次通过把table向左对齐的方法来创建右栏。这个table宽为445px，这样会在右边剩下25px。这一点非常重要，因为如果一行里没有至少25px的空隙，Outlook会自动把你的table堆叠起来。
Responsive-AlignedTables 只要你预留25px的空间，你的table就会达到预期效果。
Allow at least 25px of breathing room to stop Outlook from stacking your tables 预留25px的空间来防止Outlook堆叠你的table

在右边宽一点的table里，我们将使用跟container table一样的方法，加入class和加入条件语句。我们希望这个table在手机屏幕里的宽度为100%，且在左边的table下面。

<!--[if (gte mso 9)|(IE)]>
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
        <![endif]-->
        <!-- repeated style attributes -->
            <table class="col425" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;">style="width: 100%; max-width: 425px;">
                <tr>
                    <td height="70">
                    </td>
                </tr>
            </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->

这里你会看到我把宽为425px的table的class设为’col425’，并放在条件语句里。然后我们把这个class放在之前创建的Media Query里来兼容苹果邮箱客户端。

.col425 {width: 425px!important;}

接下来加入带样式的headding。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td class="subhead" style="padding: 0 0 0 3px;">
            CREATING
        </td>
    </tr>
    <tr>
        <td class="h1" style="padding: 5px 0 0 0;">
            Responsive Email Magic
        </td>
    </tr>
</table>

我还加入了每一格的样式，和一些稍后用到的字体样式：

.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}

现在header就已经完成了，你可以从下图中看到这两栏在手机屏幕上怎样的。（在你制作的时候如果需要预览，你要暂时把media queries的min-device-width设为批注，因为这个属性会让邮件在桌面具有固定宽度。）
01-header

创建单栏文字行

要创建一行单栏的文字，我们只需要在’.content’ table里新增一行。我们会在需要重用padding值的行里增加’innerpadding‘的class，还需要在用到边框的行里增加’borderbottom'的class。

<tr>
    <td class="innerpadding borderbottom">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td class="h2">
                    Welcome to our responsive email!
                </td>
            </tr>
            <tr>
                <td class="bodycopy">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
                </td>
            </tr>
        </table>
    </td>
</tr>

这部分的CSS：

.innerpadding {padding: 30px 30px 30px 30px;}
.borderbottom {border-bottom: 1px solid #f2eeed;}
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;}
.bodycopy {font-size: 16px; line-height: 22px;}

创建双栏文章

接下来我们将创建一行像header一样的响应式内容，但大小不同，这样可以放大一点的图片。

<tr>
  <td class="innerpadding borderbottom">
    <table width="115" align="left" border="0" cellpadding="0" cellspacing="0">  
      <tr>
        <td height="115" style="padding: 0 20px 20px 0;">
          <img src="images/article1.png" width="115" height="115" border="0" alt="" />
        </td>
      </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]>
      <table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>
    <![endif]-->
    <table class="col380" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 380px;">  
      <tr>
        <td>
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td class="bodycopy">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
              </td>
            </tr>
            <tr>
              <td style="padding: 20px 0 0 0;">
                <table class="buttonwrapper" bgcolor="#e05443" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td class="button" height="45">
                      <a href="#">Claim yours!</a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]>
          </td>
        </tr>
    </table>
    <![endif]-->
  </td>
</tr>

我们这里加入了class为’buttonwrapper'的按钮，外层设置了背景颜色，里层是文本链接。我倾向于使用这种方法因为这样可以让按钮具有流动宽度，当制作可重用的模版时这种方法十分有用，每次使用时按钮的宽度都不一样。如果你需要固定宽度的按钮，你可能更喜欢使用Bulletproof Button Generator，而不是Campaign Monitor。

按钮的样式：

.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}

为了兼容苹果邮件客户端，我们加入’col380'的class和设定宽度。

@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
.col425 {width: 425px!important;}
.col380 {width: 380px!important;}
}

Email-TwoCol

创建单栏图片

这一行十分简单，只要把图片宽度设置成100%和在CSS设置高为auto。

<tr>
    <td class="innerpadding borderbottom">
        <img src="images/wide.png" width="100%" border="0" alt="" />
    </td>
</tr>

在CSS里：

img {height: auto;}

创建最后一行纯文本

最后我们要加入一行不带底边框的文本：

<tr>
    <!-- without borderbottom then there should not be borderbottom in class -->
    <td class="innerpadding borderbottom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
    </td>
</tr>

创建`footer`

我们将在里面的table加入新的一行来创建footer。其中一行将包含另外一个table来放置我们的社交媒体图标。

<tr>
    <td class="footer" bgcolor="#44525f">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td align="center" class="footercopy">
                    &amp;reg; Someone, somewhere 2013<br/>
                    <a href="#"><font color="#ffffff">Unsubscribe</font></a> from this newsletter instantly
                </td>
            </tr>
            <tr>
                <td align="center" style="padding: 20px 0 0 0;">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="37" style="text-align: center; padding: 0 10px 0 10px;">
                                <a href="http://www.facebook.com/">
                                    <img src="images/facebook.png" width="37" height="37" alt="Facebook" border="0" />
                                </a>
                            </td>
                            <td width="37" style="text-align: center; padding: 0 10px 0 10px;">
                                <a href="http://www.twitter.com/">
                                    <img src="images/twitter.png" width="37" height="37" alt="Twitter" border="0" />
                                </a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>

我们需要给footer加些必要的CSS：

.footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;}
.footercopy a {color: #ffffff; text-decoration: underline;}

优化手机屏幕的按钮

在手机屏幕里，我们希望整个按钮都是链接，不仅仅是文字链接，因为手指很难按到小小的文字链接。由于这不能在所有客户端都做到（并不是所有客户端都支持<a>使用padding），我将会通过media queries来实现。

我们需要去掉<td>标签里的背景颜色，然后用在<a>标签里，还要加入padding。

我会在media query里用到max-width和max-device-width来避免在IE9里Outlook.com的bug。

@media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body[yahoo] .buttonwrapper {background-color: transparent!important;}
body[yahoo] .button a {background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;}
}

现在当你按按钮的彩色部分都是链接！

使用`Media Queries`进一步完善

如果你想的话，可以开始通过在你希望控制的标签里加入class名称来完善布局，然后在media query里加入新的规则。

举个栗子，我们会把unsubscribe的链接变成按钮，在链接里加入一个class：

<a href="#" class="unsubscribe">
    <font color="#ffffff">Unsubscribe</font>
</a>
<span class="hide">from this newsletter instantly</span>

然后在media query加入以下CSS：

body[yahoo] .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;}

body[yahoo] .hide {display: none!important;}

Email-Footer-MQs 你还可以在media queries里减小.innerpadding, .header和.footer的padding。

测试和完成！

最后，像平常一样，记得验证（使用W3C validator — 你应该只得到一个错误，body标签里的’yahoo'属性）和在设备和网页预览服务上进行测试，比如Litmus或Email on Acid。

希望你享受创建兼容各种客户端的响应式邮件的过程！