制作简单的响应式HTML邮件

刺骨的言语ヽ痛彻心扉 2021-06-26 16:06 681阅读 0赞

在这次教程中，我将为你展示怎么制作简单的响应式`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标签的属性选择在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`放在条件语句中：

<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td>
                            Hello!
                        </td>
                    </tr>
                </table>

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

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

## 创建`Header` ##

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

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

然后在`CSS`里给`header`加`padding`：

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

### 加入第一行响应式内容 ###

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

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

我们创建一个`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`下面。

<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>

这里你会看到我把宽为`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>
        
        <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>
        
      </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`。

在CSS里：

img { height: auto;}

## 创建最后一行纯文本 ##

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

<tr>
        
        <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">
                        &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`。

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

[Final-Product-Both]: /images/20210626/0f109f292c484aa4a76029da9e67661a.png
[Responsive-AlignedTables]: /images/20210626/03d39aac4f864b25bc00817f03b559a3.png
[Allow at least 25px of breathing room to stop Outlook from stacking your tables]: /images/20210626/29015c3b508f4d919b60a7949817fa7f.png
[01-header]: /images/20210626/c5e58d1daf4849d3965d72b81dccec2a.png
[Bulletproof Button Generator]: http://www.buttons.cm/
[Email-TwoCol]: /images/20210626/d6a4a3dd0f1c4b6384939806ec761821.png
[Email-Footer-MQs]: /images/20210626/e591f86477f44a689ceb6ed70a914e40.png