如何在响应式电子邮件中堆叠列

已发表: 2021-10-04

Sooooo，我要在这里和自己约会一会儿，但请坚持下去。

回到智能手机刚开始成为电子邮件营销人员必须处理的事情时，我从每个人那里看到的常见解决方案是单栏电子邮件。这是有道理的，因为没有多少移动电子邮件客户端支持媒体查询。最简单的选择是通过在桌面上坚持使用单列设计来完全避免这个问题，这些设计可以轻松地为移动设备调整大小。

但是现在有了更多的媒体查询支持，您可以创建更多有趣的设计，利用响应式编码让您的电子邮件设计响应订阅者正在查看的屏幕尺寸。

我会引导你完成：

正常与反向堆叠顺序
2 种对堆叠内容进行编码的方法
什么时候不应该堆叠移动内容

为什么你应该在移动设备上堆叠列

移动设备提供的查看屏幕非常有限，移动设备的理想设计是一列。但我们不想将自己局限于桌面上的单列设计，因为我们有大量空间。输入媒体查询，让您在移动设备上堆叠内容，以确保您的内容针对较小的屏幕进行了优化。

桌面	移动的

来源：非常好的电子邮件

将电子邮件内容保持在相同的桌面布局会导致文本和图像非常小，或者移动设备上的内容被压扁。这不是一个好的用户体验，因为您的订阅者很可能难以阅读您的内容，例如这封电子邮件与某些手机的屏幕一样宽：

帮您的订阅者一个忙，并确保您的电子邮件在每个阅读环境中看起来都是最好的。

电子邮件设计的堆叠方法

当您确实希望将列堆叠在一起时，内容可以通过两种不同的方式堆叠：左列在顶部（正常堆叠）或右列在顶部（反向堆叠）。

正常堆叠

正常堆叠是最常见的堆叠形式。它获取左列中的内容并将其堆叠在右列中的内容之上，如下所示：

正常堆叠

反向堆叠

反向堆叠是指左列中的内容堆叠在右列中的内容之下。如果您在桌面上有 Z 模式，但您希望这些行在移动设备上看起来都一样，那么它最常用于中间行。在这个例子中，第一行和最后一行是正常堆叠，但第二行是反向堆叠列：

反向堆叠

对移动设备上堆叠的列进行编码的 2 种方法

有几种不同的方法可以对堆叠列进行编码。我将引导您使用 CSS 媒体查询，然后使用混合编码方法。测试它们，看看什么最适合你。

使用 CSS 媒体查询

只需创建一个两列表，然后使用类将列堆叠起来，就可以创建两列。

CSS 看起来像这样：

 <style>
     @media screen and (max-width:600px) {
          .block { display: block !important; width: 100% !important; }
     }
  </style>

HTML 将如下所示：

 <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">
     <tr>
          <td class="block" align="left" valign="top" style="padding:10px 0;" width="50%">
                <img src="http://via.placeholder.com/300">
        </td>
          <td class="block" align="left" valign="top" style="padding:10px 0 10px 10px;" width="50%">
               <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">Somebody once told me the world is gonna roll me. I ain't the sharpest tool in the shed. She was looking kind of dumb with her finger and her thumb in the shape of an "L" on her forehead.</p>
        </td>
     </tr>
 </table>

块类在移动设备上将表格单元格变成块，内容会相应地在移动设备上自动堆叠。这导致正常堆栈。

如果要创建反向堆栈，可以在 CSS 中使用 table-header-group 和 table-footer-group 作为显示属性值，如下所示：

 <style>
     @media screen and (max-width:600px) {
          .top { display: table-header-group !important; width: 100% !important; }
          .bottom { display: table-footer-group !important; width: 100% !important; }
     }
  </style>

并且 HTML 变为：

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">
      <tr>
            <td class="bottom" align="left" valign="top" style="padding:10px 0;" width="50%">
                     <img src="http://via.placeholder.com/300">
            </td>
            <td class="top" align="left" valign="top" style="padding:10px 0 10px 10px;" width="50%">
                  <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">Well the years start coming and they don't stop coming. Fed to the rules and I hit the ground running. Didn't make sense not to live for fun. Your brain gets smart but your head gets dumb.</p>
            </td>
      </tr>
 </table>

混合编码

这是我使用的方法。它的代码繁重得多，但在电子邮件客户端不支持媒体查询的情况下，它已经多次救了我的屁股。（疯狂支持 Nicole Merlin 的教程，该教程首先向我介绍了混合编码。）

在这种情况下，您将两个 div 与display: inline-block 。这使您的内容在桌面上彼此相邻，并将它们推送到移动设备上。您的代码如下所示：

<div style="display:inline-block;vertical-align:top;">
      <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;">
            <tr>
                  <td align="left" valign="top">
                        <img src="http://via.placeholder.com/300">
                  </td>
            </tr>
      </table>
</div>
<div style="display:inline-block;vertical-align:top;">
      <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;">
            <tr>
                  <td align="left" valign="top" style="padding-left: 10px;">
                        <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                  </td>
            </tr>
      </table>
</div>

然后我们将所有这些都包裹在一个表格单元格中，并将字体大小设置为 0，这样就不会在 div 周围添加额外的空间，并将整个内容对齐表格单元格的中心：

     <tr>
          <td style="font-size:0;" align="center" valign="top">
               <div style="display:inline-block;vertical-align:top;">
                     <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;">
                           <tr>
                                 <td align="left" valign="top">
                                       <img src="http://via.placeholder.com/300">
                                 </td>
                           </tr>
                     </table>
               </div>
               <div style="display:inline-block;vertical-align:top;">
                     <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;">
                           <tr>
                                 <td align="left" valign="top" style="padding-left: 10px;">
                                       <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                                 </td>
                           </tr>
                     </table>
               </div>
          </td>
     </tr>

可是等等！由于 Outlook 不支持 div，因此您还需要在所有内容周围添加一些幻影表以使其在 Outlook 中工作：

     <tr>
          <td style="font-size:0;" align="center" valign="top">
               <!--[if (gte mso 9)|(IE)]>
               <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
               <tr>
               <td valign="top" style="width: 300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;">
                                <tr>
                                      <td align="left" valign="top">
                                            <img src="http://via.placeholder.com/300">
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td><td valign="top" style="width:300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;">
                                <tr>
                                      <td align="left" valign="top" style="padding-left: 10px;">
                                            <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td>
               </tr>
               </table>
               <![endif]-->
          </td>
     </tr>

如果您使用的列占包含表的 50%，则此代码在没有媒体查询的情况下运行良好。但是，如果您使用较小的列，则必须添加一些媒体查询以在移动设备上将宽度更新为 100%。更多关于下面的内容。

其反向堆叠版本利用 dir 属性以相反的顺序对 div 进行排序。我们在包含两列的单元格上添加 dir=”rtl”，然后每列都需要添加 dir=”ltr” 到表格中才能正确显示内容：

     <tr>
          <td style="font-size:0;" align="left" valign="top" dir="rtl">
               <!--[if (gte mso 9)|(IE)]>
               <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
               <tr>
               <td valign="top" style="width: 300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;" dir=”ltr”>
                                <tr>
                                      <td align="left" valign="top">
                                            <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">Hey now, you're an all-star, get your game on, go play. Hey now, you're a rock star, get the show on, get paid. And all that glitters is gold. Only shooting stars break the mold.</p>
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td><td valign="top" style="width:300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;" dir=”ltr”>
                                <tr>
                                      <td align="left" valign="top" style="padding-left: 10px;">
                                            <img src="http://via.placeholder.com/300">
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td>
               </tr>
               </table>
               <![endif]-->
          </td>
     </tr>

在使用反向堆叠混合版本编码时要记住：第一个 <div> 中的任何内容都将出现在右列中，这违反直觉并且需要一些时间来适应。它也并不总是可访问性的最佳选择。

两种不同列宽的编码

如上所述，如果您想使用不同大小的表格单元格，则必须添加媒体查询以更改这些表格单元格以用于移动设备。最常见的情况是使用 100% 的类，您可能已经在 CSS 中设置了该类。如果没有，它可能看起来像这样：

.w100p { width: 100% !important; }

然后将该类添加到 HTML 中的 div 和 table 中，如下所示（此示例有一列宽 100px，另一列宽 500px）：

     <tr>
          <td style="font-size:0;" align="center" valign="top">
               <!--[if (gte mso 9)|(IE)]>
               <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
               <tr>
               <td valign="top" style="width: 100px;">
               <![endif]-->
                    <div class=”w100p” style="display:inline-block;vertical-align:top;">
                          <table class=”w100p” cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100px;">
                                <tr>
                                      <td align="left" valign="top">
                                            <img src="http://via.placeholder.com/300">
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td><td valign="top" style="width:500px;">
               <![endif]-->
                    <div class=”w100p” style="display:inline-block;vertical-align:top;">
                          <table class=”w100p” cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:500px;">
                                <tr>
                                      <td align="left" valign="top" style="padding-left: 10px;">
                                            <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td>
               </tr>
               </table>
               <![endif]-->
          </td>
     </tr>

您无需担心更改条件代码中的宽度，因为这仅适用于桌面版 Outlook。

使用哪种方法？

由于移动电子邮件客户端支持媒体查询，这两种方法都运行良好。

	媒体查询方法	混合方法
优点	代码量少屏幕阅读器按顺序朗读内容	不太容易受到来自电子邮件客户端的更改和更新的干扰
缺点	更容易受到来自电子邮件客户端的更改和更新的干扰	更重的代码屏幕阅读器不按顺序读取内容

基于媒体查询的方法代码量较少，并且因为您可以将类放在任一列上，所以您可以按照屏幕阅读器有意义的顺序保留内容，同时仍然以视觉上有意义的方式显示它.

因此，如果可访问性是一个大问题，则媒体查询版本可能是您最好的选择。

但是，如果您担心拥有一个更万无一失且不易受到电子邮件客户端奇思妙想的影响的版本，则混合版本是您的最佳选择。

何时不在移动设备上堆叠内容

这并不是说所有东西都需要在移动设备上堆叠。不要疯狂堆栈。有些情况下不需要在移动设备上堆叠，比如这个电子邮件签名：

吉安娜电子邮件签名 — *我们在许多电子邮件中的签名是两列，不会在移动设备上堆叠。*

或者您想从桌面上堆叠到移动设备上非堆叠的情况。

我们 2021 年 1 月的时事通讯列出了我们所有的决议，每个部分都在三列中相互堆叠。在移动设备上堆叠这些时，我们希望更好地利用空间。因此，我们让图像、名称和标题变得“未堆叠”，而每一列都变成了一个新行：

桌面	移动的

如您所见，堆叠所有内容并不总是答案。确保在为移动设备设计时充分利用您的空间。在某些情况下，这包括不堆叠内容。

编写我有趣的堆栈变体

我通过使用混合堆叠代码的修改版本创建了上述效果。在这种情况下，我从混合三列开始：

<tr>
     <td align="center" valign="top" style="font-size:0; padding-bottom: 60px;">
     <!--[if (gte mso 9)|(IE)]>
     <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
     <tr>
     <td valign="top" style="width: 180px;">
     <![endif]-->
          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                     <tr>
                         <td align="center" valign="middle">
                              [--column 1 content  goes here--]
                         </td>
                     </tr>
               </table>
          </div>
     <!--[if (gte mso 9)|(IE)]>
     </td><td style="width: 30px;">
     </td><td valign="top" style="width: 180px;">
     <![endif]-->
          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                     <tr>
                         <td align="center" valign="middle">
                              [--column 2 content  goes here--]
                         </td>
                     </tr>
               </table>
          </div>
     <!--[if (gte mso 9)|(IE)]>
     </td><td style="width: 30px;">
     </td><td valign="top" style="width: 180px;">
     <![endif]-->
          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                     <tr>
                         <td align="center" valign="middle">
                              [--column 3 content  goes here--]
                         </td>
                     </tr>
               </table>
          </div>
     <!--[if (gte mso 9)|(IE)]>
     </td>
     </tr>
     </table>
     <![endif]-->
     </td>
</td>

然后，在每一列中，我添加了一个带有两列堆叠的行和第二个普通行作为引用。由于我不想在桌面上并排显示图像和名称，因此我省略了 div 之间的幽灵列分隔符。我将 div 中的表格设置为具有最大宽度，这将导致 div 在移动设备上内联。

列本身设置为 180px 宽度，这在移动设备上要小得多，因此 div 会堆叠，直到这些表格在移动设备上被媒体查询设置为 100%。所以每列现在看起来像这样：

          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                    <tr>
                         <td style="font-size:0; padding-top: 30px;" align="center" valign="middle">
                         <!--[if (gte mso 9)|(IE)]>
                         <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
                         <tr>
                         <td valign="top" align="center" style="width: 180px;">
                         <![endif]-->
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       <img src="https://via.placeholder/79" alt="" width="79" height="79" >
                                                  </td>
                                             </tr>
                                   </table>
                              </div>
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       [-- content that stacks on desktop, but not on mobile goes here--]
                                                  </td>
                                           </tr>
                                   </table>
                              </div>
                         <!--[if (gte mso 9)|(IE)]>
                         </td>
                         </tr>
                         </table>
                         <![endif]-->
                         </td>
               </tr>
               <tr>
                         <td align="left" valign="top">
                              [--content that stacks on both desktop and mobile goes here--]
                         </td>
                    </tr>
               </table>
          </div>

然后我将表格设置为具有最大宽度值，这将导致它们在移动设备上彼此相邻。但是在桌面上，包含的单元格太小，无法彼此相邻放置，从而导致桌面上的内容堆积。

          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                    <tr>
                         <td style="font-size:0; padding-top: 30px;" align="center" valign="middle">
                         <!--[if (gte mso 9)|(IE)]>
                         <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
                         <tr>
                         <td valign="top" align="center" style="width: 180px;">
                         <![endif]-->
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 79px;">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       <img src="https://via.placeholder/79" alt="" width="79" height="79" >
                                                  </td>
                                             </tr>
                                   </table>
                              </div>
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="max-width: 221px;">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       [-- content that stacks on desktop, but not on mobile goes here--]
                                                  </td>
                                           </tr>
                                   </table>
                              </div>
                         <!--[if (gte mso 9)|(IE)]>
                         </td>
                         </tr>
                         </table>
                         <![endif]-->
                         </td>
               </tr>
               <tr>
                         <td align="left" valign="top">
                              [--content that stacks on both desktop and mobile goes here--]
                         </td>
                    </tr>
               </table>
          </div>

查看所有不同版本的堆栈（包括这个版本）的操作代码。

最后的想法

如您所见，当您组合这些不同的方法时，您可以想出各种有趣的方式来堆叠和排序内容。因此，请确保您的订阅者拥有最佳的观看体验，并通过堆叠这些列以获得最佳可读性来确保您的设计在移动设备上脱颖而出。尝试一下，让我们知道您的想法！