Como empilhar colunas em e-mails responsivos

Publicados: 2021-10-04

Entããão, vou namorar comigo um pouco aqui, mas fique comigo.

Na época em que os smartphones começaram a se tornar algo com que os profissionais de marketing por e-mail tinham que lidar, a solução comum que vi em todos eram os e-mails de uma única coluna. O que faz sentido, já que nem muitos clientes de e-mail móveis suportavam consultas de mídia. A escolha mais fácil foi evitar o problema por completo, mantendo designs de coluna única no desktop que podem ser redimensionados facilmente para dispositivos móveis.

Porém, com mais suporte para consulta de mídia atualmente, você pode criar designs mais interessantes que aproveitem a codificação responsiva para que o design do seu e-mail responda ao tamanho da tela em que seus assinantes estão visualizando.

Vou te guiar por:

Ordem de empilhamento normal vs. reversa
2 maneiras de codificar conteúdo que se acumula
Quando você não deve empilhar conteúdo para celular

Por que você deve empilhar colunas no celular

Os dispositivos móveis oferecem uma tela de visualização muito limitada e o design ideal para dispositivos móveis é uma coluna. Mas não queremos nos limitar a designs de coluna única em desktops, onde temos muito espaço. Insira consultas de mídia para permitir que você empilhe conteúdo no celular para garantir que seu conteúdo seja otimizado para a tela menor.

Área de Trabalho	Móvel

Fonte: Emails realmente bons

Manter o conteúdo do e-mail no mesmo layout da área de trabalho resulta em textos e imagens muito pequenos ou conteúdo comprimido em dispositivos móveis. Não é uma boa experiência do usuário, pois seus assinantes provavelmente terão dificuldade em ler seu conteúdo, como este e-mail tão grande quanto a tela de alguns telefones celulares:

um livro infantil sobre e-mail — *Fonte:* *Emails realmente bons*

Faça um favor aos seus assinantes e certifique-se de que seus e-mails tenham a melhor aparência em todos os ambientes de leitura.

Métodos de empilhamento para design de e-mail

Quando você deseja empilhar colunas uma sobre a outra, há duas maneiras diferentes de empilhar o conteúdo: com a coluna esquerda no topo (empilhamento normal) ou a coluna direita no topo (empilhamento reverso).

Empilhamento normal

O empilhamento normal é a forma mais comum de empilhamento. Ele pega o conteúdo da coluna da esquerda e o empilha sobre o conteúdo da coluna da direita, assim:

empilhamento normal

Empilhamento reverso

Empilhamento reverso é quando o conteúdo da coluna da esquerda é empilhado sob o conteúdo da coluna da direita. É mais comumente usado para a linha do meio se você tiver um padrão Z no desktop, mas deseja que todas as linhas tenham a mesma aparência no celular. Neste exemplo, a primeira e a última linhas são de empilhamento normal, mas a segunda linha é uma coluna de empilhamento reverso:

empilhamento reverso

2 maneiras de codificar colunas empilhadas em dispositivos móveis

Existem algumas maneiras diferentes de empilhar colunas de código. Vou orientá-lo no uso de consultas de mídia CSS e, em seguida, um método de codificação híbrido. Teste-os e veja o que funciona melhor para você.

Usando consultas de mídia CSS

Você pode criar duas colunas simplesmente criando uma tabela de duas colunas e, em seguida, usando classes para empilhar as colunas.

O CSS ficaria assim:

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

E o HTML ficaria assim:

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

A classe de bloco transforma as células da tabela em blocos no celular, e o conteúdo se comporta de acordo e se acumula automaticamente no celular. Isso resulta em uma pilha normal.

Se quiser criar uma pilha reversa, você pode usar table-header-group e table-footer-group como o valor da propriedade de exibição em seu CSS, assim:

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

E o HTML se torna:

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

Codificação híbrida

Este é o método que utilizo. É muito mais pesado em termos de código, mas salvou minha bunda em várias ocasiões, quando os clientes de e-mail não suportavam consultas de mídia. (Adereços loucos a Nicole Merlin por seu tutorial que me apresentou pela primeira vez à codificação híbrida.)

Nesse caso, você usa dois divs com display: inline-block . Isso mantém seu conteúdo próximo um do outro na área de trabalho e empurra-os no celular. Esta seria a aparência do seu código:

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

Em seguida, envolvemos tudo isso em uma célula da tabela e definimos o tamanho da fonte como 0 para que nenhum espaço extra seja adicionado ao redor das divs e alinhamos tudo no centro da célula da tabela:

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

Mas espere! Como o Outlook não oferece suporte a divs, você também precisa adicionar algumas tabelas fantasmas em torno de tudo para fazê-lo funcionar no 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>

Este código funciona bem sem consultas de mídia se você estiver usando colunas que representam 50% da tabela que o contém. Mas se estiver usando colunas menores, você terá que adicionar algumas consultas de mídia para atualizar a largura para 100% no celular. Mais sobre isso abaixo.

A versão de empilhamento reverso disso aproveita o atributo dir para ordenar os divs na ordem oposta. Adicionamos dir = ”rtl” na célula que contém as duas colunas e, em seguida, cada coluna precisa ter dir = ”ltr” adicionado à tabela para que o conteúdo seja exibido corretamente:

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

Algo para se ter em mente ao codificar com a versão híbrida de empilhamento reverso: o que quer que esteja naquele primeiro <div> vai acabar na coluna certa , o que é contra-intuitivo e leva algum tempo para se acostumar. Também nem sempre é o melhor para acessibilidade.

Codificação para duas larguras de coluna diferentes

Conforme mencionado acima, se você quiser usar células de tabela de tamanhos diferentes, terá que adicionar consultas de mídia para alterar essas células de tabela para dispositivos móveis. O caso mais comum disso é usar uma classe 100% que você já pode ter configurado em seu CSS. Caso contrário, poderia ser algo assim:

.w100p { width: 100% !important; }

E, em seguida, adicionar essa classe ao div e à tabela em seu HTML da seguinte maneira (este exemplo tem uma coluna com 100px de largura e outra com 500px de largura):

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

Você não precisa se preocupar em alterar as larguras no código condicional, pois isso é apenas para Outlook para desktop.

Qual método usar?

Ambos os métodos funcionam bem agora que os clientes de email móvel suportam consultas de mídia.

	Método de consultas de mídia	Método híbrido
Prós	Menos código pesado O conteúdo é lido em voz alta em ordem pelos leitores de tela	Menos suscetível a ser perturbado por alterações e atualizações de clientes de e-mail
Contras	Mais suscetível a ser perturbado por mudanças e atualizações de clientes de e-mail	Mais código pesado O conteúdo é lido fora de ordem pelos leitores de tela

O método baseado em consulta de mídia é menos pesado de código e, como você pode colocar as classes em qualquer coluna, é capaz de deixar o conteúdo em uma ordem que faça sentido para os leitores de tela, ao mesmo tempo em que o exibe de uma forma que faça sentido visualmente .

Portanto, se a acessibilidade é uma grande preocupação, a versão de consulta à mídia é provavelmente sua melhor aposta.

No entanto, se você está preocupado em ter uma versão mais infalível e menos suscetível aos caprichos dos clientes de e-mail, a versão híbrida é o caminho a percorrer.

Quando não empilhar conteúdo no celular

Isso não quer dizer que tudo precisa ser empilhado no celular. Não enlouqueça. Há casos em que as coisas não precisam ser empilhadas no celular, como esta assinatura de e-mail:

assinatura de email jaina — *Nossas assinaturas em muitos de nossos e-mails são duas colunas que não se acumulam no celular.*

Ou casos em que você deseja passar de empilhado na área de trabalho para não empilhado no celular.

Nosso boletim informativo de janeiro de 2021 tinha todas as nossas resoluções dispostas com cada seção empilhada uma em cima da outra em três colunas. Ao empilhá-los no celular, queríamos usar melhor o espaço. Então, tínhamos as imagens, nomes e títulos "desempilhados" enquanto cada coluna se tornava uma nova linha:

Área de Trabalho	Móvel

Como você pode ver, empilhar tudo nem sempre é a resposta. Certifique-se de usar o seu espaço da melhor maneira possível ao projetar para dispositivos móveis. Em alguns casos, isso inclui não empilhar conteúdo.

Codificando minha variação de pilha interessante

Criei o efeito acima usando versões modificadas do código de empilhamento híbrido. Neste caso, comecei com uma coluna híbrida de três:

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

Então, em cada coluna, adicionei uma linha com empilhamento de duas colunas e uma segunda linha normal para a citação. Como eu não queria que a imagem e o nome estivessem lado a lado na área de trabalho, deixei de fora o separador de coluna fantasma entre os divs. E eu defini as tabelas nos divs para ter larguras máximas que resultariam nos divs sendo embutidos no celular.

As colunas em si foram definidas para 180px de largura, que é muito menor em dispositivos móveis, portanto, os divs empilhados até que as tabelas fossem definidas para 100% por uma consulta de mídia em dispositivos móveis. Então, cada coluna agora se parecia com isto:

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

Então eu defini as tabelas para ter valores de largura máxima que resultariam em ficarem situadas próximas umas das outras no celular. Mas no desktop, a célula que os continha era muito pequena para ficarem situados um ao lado do outro, resultando no empilhamento do conteúdo no desktop.

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

Veja o código em ação para todas as diferentes versões de empilhamento - incluindo esta.

Pensamentos finais

Como você pode ver, ao combinar esses métodos diferentes, você pode criar todos os tipos de maneiras interessantes de empilhar e classificar o conteúdo. Portanto, certifique-se de que seus assinantes tenham a melhor experiência de visualização e certifique-se de que seus designs se destaquem no celular, empilhando essas colunas para facilitar a leitura. Experimente e diga-nos o que você descobriu!

Compartilhe, obrigado!

Vá para a caixa de entrada - não para a pasta de spam - com o teste Litmus Spam

Descubra como o Litmus Spam Testing pode mantê-lo fora da pasta de spam, testando 25 filtros e fornecendo informações sobre como corrigir problemas de capacidade de entrega.

consulte Mais informação

Correção da capacidade de entrega do email: 6 maneiras de evitar queimaduras

Recupere-se de problemas de capacidade de entrega (e evite que aconteçam novamente) com este plano de remediação de capacidade de entrega de e-mail e 6 maneiras de evitar a pasta de spam.

consulte Mais informação

Emails favoritos da equipe Litmus de setembro de 2021

Veja as campanhas de e-mail que chamaram nossa atenção em setembro de 2021 e as marcas que estão criando melhores experiências para os assinantes com marketing por e-mail.

consulte Mais informação

A proteção de privacidade de e-mail da Apple está aqui: o que realmente significa para os profissionais de marketing por e-mail e o que fazer agora

A Proteção de Privacidade do Mail da Apple está finalmente aqui! Descubra como isso está realmente impactando os programas de marketing por email e o que você pode fazer para otimizar seus emails.

consulte Mais informação

Criar e-mails em HTML em vez de apenas imagens é mais fácil do que você pensa

Converter e-mails com todas as imagens em e-mails de texto ao vivo é mais fácil do que você pensa. Aprenda como neste guia passo a passo.

consulte Mais informação