如何在響應式電子郵件中堆疊列

已發表: 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>

查看所有不同版本的堆棧（包括這個版本）的操作代碼。

最後的想法

如您所見，當您組合這些不同的方法時，您可以想出各種有趣的方式來堆疊和排序內容。因此，請確保您的訂閱者擁有最佳的觀看體驗，並通過堆疊這些列以獲得最佳可讀性來確保您的設計在移動設備上脫穎而出。嘗試一下，讓我們知道您的想法！