Как складывать столбцы в отзывчивых письмах

Опубликовано: 2021-10-04

Ооооо, я собираюсь немного встретить себя здесь, но оставайся со мной.

Когда смартфоны только начали становиться чем-то, с чем приходилось иметь дело маркетологам электронной почты, обычным решением, которое я видел у всех, были электронные письма в одну колонку. Это имеет смысл, поскольку не многие мобильные почтовые клиенты поддерживают медиа-запросы. Самый простой вариант - полностью избежать проблемы, придерживаясь дизайна с одной колонкой на рабочем столе, размер которой легко изменить для мобильных устройств.

Но с большей поддержкой медиа-запросов в наши дни вы можете создавать более интересные дизайны, которые используют преимущества адаптивного кодирования, чтобы ваш дизайн электронной почты реагировал на размер экрана, на котором ваши подписчики просматривают их.

Я проведу вас через:

Нормальный и обратный порядок наложения
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>

Класс блока превращает ячейки таблицы в блоки на мобильном устройстве, и содержимое ведет себя соответствующим образом и автоматически складывается в стек на мобильном устройстве. В результате получается нормальный стек.

Если вы хотите создать обратный стек, вы можете использовать table-header-group и table-footer-group в качестве значения свойства display в вашем CSS, например:

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

Гибридное кодирование

Я использую этот метод. Это гораздо более тяжелый код, но он несколько раз спасал меня, когда почтовые клиенты не поддерживали медиа-запросы. (Безумный реквизит Николь Мерлин за ее учебник, который впервые познакомил меня с гибридным кодированием.)

В этом случае вы используете два 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; }

А затем добавляем этот класс в div и таблицу в вашем HTML-коде (в этом примере есть столбец шириной 100 пикселей, а другой - 500 пикселей):

     <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 года все наши резолюции были выложены, и каждый раздел был уложен один поверх другого в три столбца. Размещая их на мобильном устройстве, мы хотели лучше использовать пространство. Итак, мы сделали изображения, имена и заголовки «разложенными», а каждый столбец стал новой строкой:

Рабочий стол	Мобильный

Итак, как видите, складывание всего не всегда является ответом. Создавая дизайн для мобильных устройств, убедитесь, что вы максимально эффективно используете пространство. В некоторых случаях это включает не складывание содержимого.

Написание моей интересной вариации стека

Я создал указанный выше эффект, используя модифицированные версии кода гибридного стекирования. В этом случае я начал с гибридной трехколонки:

<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 будут встроены на мобильном устройстве.

Сами столбцы были установлены на ширину 180 пикселей, что намного меньше на мобильных устройствах, поэтому блоки 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>

Посмотрите код в действии для всех различных версий стекирования, включая эту.

Последние мысли

Как видите, когда вы комбинируете эти разные методы, вы можете придумать всевозможные интересные способы объединения и сортировки контента. Поэтому убедитесь, что ваши подписчики получат наилучшие впечатления от просмотра и убедитесь, что ваши дизайны выделяются на мобильных устройствах, сгруппировав эти столбцы для оптимальной читаемости. Попробуйте и дайте нам знать, что вы придумали!

Поделись, спасибо!

Попадание в папку «Входящие», а не в папку для спама, с помощью лакмусовой бумаги для проверки на спам

Узнайте, как с помощью Litmus Spam Testing вы не попадете в папку со спамом, проверив 25 фильтров и получив информацию о том, как исправить проблемы с доставляемостью.

Подробнее

Исправление доставки электронной почты: 6 способов избежать ожогов

Избавьтесь от проблем с доставляемостью (и предотвратите их повторение) с помощью этого плана устранения проблем с доставляемостью электронной почты и 6 способов избежать попадания в папку со спамом.

Подробнее

Любимые письма команды Litmus за сентябрь 2021 года

Ознакомьтесь с кампаниями по электронной почте, которые привлекли наше внимание в сентябре 2021 года, и брендами, которые улучшают качество обслуживания подписчиков с помощью электронного маркетинга.

Подробнее

Защита конфиденциальности почты Apple уже здесь: что она на самом деле означает для маркетологов электронной почты и что теперь делать

Защита конфиденциальности почты Apple, наконец, здесь! Узнайте, как это на самом деле влияет на программы электронного маркетинга и что вы можете сделать, чтобы оптимизировать свою электронную почту.

Подробнее

Создавать электронные письма в формате HTML вместо полностью изображений проще, чем вы думаете

Преобразование электронных писем, состоящих только из изображений, в электронные письма в реальном времени проще, чем вы думаете. Узнайте, как это сделать, в этом пошаговом руководстве.

Подробнее