Comment empiler des colonnes dans des e-mails réactifs

Publié: 2021-10-04

Sooooo, je vais sortir avec moi un peu ici, mais reste avec moi.

À l'époque où les smartphones ont commencé à devenir quelque chose que les spécialistes du marketing par e-mail devaient gérer, la solution commune que j'ai vue de tout le monde était les e-mails à colonne unique. Ce qui est logique car peu de clients de messagerie mobile prennent en charge les requêtes multimédias. Le choix le plus simple était d'éviter complètement le problème en s'en tenant à des conceptions à une seule colonne dans le bureau qui se redimensionnent facilement pour le mobile.

Mais avec la prise en charge de plus en plus de requêtes multimédias de nos jours, vous pouvez créer des conceptions plus intéressantes qui tirent parti du codage réactif pour que la conception de votre e-mail réponde à la taille de l'écran sur lequel vos abonnés les visionnent.

Je vais vous guider :

Ordre d'empilement normal et inverse
2 façons de coder du contenu qui s'empile
Quand il ne faut pas empiler du contenu mobile

Pourquoi empiler des colonnes sur mobile

Les appareils mobiles offrent un écran de visualisation très limité et la conception idéale pour les appareils mobiles est une colonne. Mais nous ne voulons pas nous limiter à des conceptions à une seule colonne sur le bureau où nous avons beaucoup d'espace. Saisissez des requêtes multimédias pour vous permettre d'empiler du contenu sur mobile afin de vous assurer que votre contenu est optimisé pour le plus petit écran.

Bureau	Mobile

Source : de très bons e-mails

Le fait de conserver le contenu des e-mails dans la même disposition de bureau donne lieu à du texte et des images très petits ou à du contenu écrasé sur les appareils mobiles. Ce n'est pas une bonne expérience utilisateur car vos abonnés auront probablement des difficultés à lire votre contenu, comme cet e-mail aussi large que l'écran de certains téléphones portables :

un livre pour enfants sur le courrier électronique — *Source : de très* *bons e-mails*

Faites une faveur à vos abonnés et assurez-vous que vos e-mails sont à leur meilleur dans chaque environnement de lecture.

Méthodes d'empilement pour la conception d'e-mails

Lorsque vous souhaitez empiler des colonnes les unes sur les autres, le contenu peut s'empiler de deux manières différentes : avec la colonne de gauche en haut (empilement normal) ou la colonne de droite en haut (empilement inversé).

Empilage normal

L'empilement normal est la forme d'empilement la plus courante. Il prend le contenu de la colonne de gauche et l'empile au-dessus du contenu de la colonne de droite, comme ceci :

empilement normal

Empilage inversé

L'empilement inversé se produit lorsque le contenu de la colonne de gauche s'empile sous le contenu de la colonne de droite. Il est le plus souvent utilisé pour la rangée du milieu si vous avez un motif en Z sur le bureau, mais que vous souhaitez que les rangées se ressemblent toutes sur le mobile. Dans cet exemple, les première et dernière lignes sont un empilement normal, mais la deuxième ligne est une colonne d'empilement inversé :

empilement inversé

2 façons de coder des colonnes qui s'empilent sur mobile

Il existe plusieurs façons de coder les colonnes d'empilement. Je vais vous expliquer comment utiliser les requêtes multimédia CSS, puis une méthode de codage hybride. Testez-les et voyez ce qui vous convient le mieux.

Utiliser des requêtes multimédias CSS

Vous pouvez créer deux colonnes simplement en créant une table à deux colonnes, puis en utilisant des classes pour empiler les colonnes.

Le CSS ressemblerait à ceci :

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

Et le HTML ressemblerait à ceci :

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

La classe block transforme les cellules du tableau en blocs sur mobile, et le contenu se comporte en conséquence et s'empile automatiquement sur mobile. Il en résulte une pile normale.

Si vous souhaitez créer une pile inversée, vous pouvez utiliser table-header-group et table-footer-group comme valeur de propriété d'affichage dans votre CSS, comme ceci :

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

Et le HTML devient :

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

Codage hybride

C'est la méthode que j'utilise. C'est beaucoup plus lourd en code, mais cela m'a sauvé les fesses à plusieurs reprises lorsque les clients de messagerie ne prenaient pas en charge les requêtes multimédias. (Des accessoires fous à Nicole Merlin pour son tutoriel qui m'a d'abord présenté le codage hybride.)

Dans ce cas, vous utilisez deux div avec display: inline-block . Cela maintient votre contenu côte à côte sur le bureau et les pousse à s'empiler sur le mobile. Voici à quoi ressemblerait votre code :

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

Ensuite, nous enveloppons tout cela dans une cellule du tableau et définissons la taille de la police sur 0 afin qu'aucun espace supplémentaire ne soit ajouté autour des div et alignons le tout au centre de la cellule du tableau :

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

Mais attendez! Étant donné qu'Outlook ne prend pas en charge les div, vous devez également ajouter des tables fantômes autour de tout pour que cela fonctionne dans 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>

Ce code fonctionne bien sans media queries si vous utilisez des colonnes qui représentent 50 % de votre table conteneur. Mais si vous utilisez des colonnes plus petites, vous devrez ajouter des requêtes multimédias pour mettre à jour la largeur à 100 % sur mobile. Plus à ce sujet ci-dessous.

La version d'empilement inversé de ceci profite de l'attribut dir pour ordonner les divs dans l'ordre opposé. Nous ajoutons dir="rtl" sur la cellule contenant les deux colonnes, puis chaque colonne doit avoir dir="ltr" ajouté au tableau afin que le contenu s'affiche correctement :

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

Quelque chose à garder à l'esprit lors du codage avec la version hybride à empilement inversé : tout ce qui se trouve dans ce premier <div> va se retrouver dans la colonne de droite , ce qui est contre-intuitif et prend un certain temps pour s'y habituer. Ce n'est pas non plus toujours le meilleur pour l'accessibilité.

Codage pour deux largeurs de colonnes différentes

Comme mentionné ci-dessus, si vous souhaitez utiliser des cellules de tableau de tailles différentes, vous devrez ajouter des requêtes multimédias pour modifier ces cellules de tableau pour mobile. Le cas le plus courant consiste à utiliser une classe 100% que vous avez peut-être déjà configurée dans votre CSS. Sinon, cela pourrait ressembler à ceci :

.w100p { width: 100% !important; }

Et puis ajouter cette classe au div et à la table dans votre code HTML comme ceci (cet exemple a une colonne de 100px de large et une autre de 500px de large) :

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

Vous n'avez pas à vous soucier de la modification des largeurs dans le code conditionnel, car cela concerne uniquement Outlook pour ordinateur de bureau.

Quelle méthode utiliser ?

Ces deux méthodes fonctionnent bien maintenant que les clients de messagerie mobile prennent en charge les requêtes multimédias.

	Méthode de requêtes média	Méthode hybride
Avantages	Moins de code lourd Le contenu est lu à haute voix dans l'ordre par les lecteurs d'écran	Moins susceptible d'être perturbé par les modifications et les mises à jour des clients de messagerie
Les inconvénients	Plus susceptible d'être perturbé par les modifications et les mises à jour des clients de messagerie	Plus de code lourd Le contenu est lu dans le désordre par les lecteurs d'écran

La méthode basée sur les requêtes multimédias est moins lourde en code, et parce que vous pouvez placer les classes sur l'une ou l'autre colonne, vous pouvez laisser le contenu dans un ordre qui a du sens pour les lecteurs d'écran, tout en l'affichant d'une manière qui a du sens visuellement .

Donc, si l'accessibilité est une préoccupation majeure, la version media-query est probablement votre meilleur choix.

Cependant, si vous souhaitez avoir une version plus infaillible et moins sensible aux caprices des clients de messagerie, la version hybride est la solution.

Quand ne pas empiler du contenu sur mobile

Cela ne veut pas dire que tout doit être empilé sur mobile. Ne devenez pas fou. Il y a des cas où les choses n'ont pas besoin de s'empiler sur mobile, comme cette signature d'e-mail :

signature e-mail jaïna — *Nos signatures dans bon nombre de nos e-mails sont deux colonnes qui ne s'empilent pas sur mobile.*

Ou les cas où vous souhaitez passer d'empilé sur un ordinateur de bureau à non empilé sur mobile.

Dans notre newsletter de janvier 2021, toutes nos résolutions étaient présentées avec chaque section empilée les unes sur les autres en trois colonnes. En les empilant sur mobile, nous voulions mieux utiliser l'espace. Ainsi, les images, les noms et les titres sont devenus « désempilés » tandis que chaque colonne est devenue une nouvelle ligne :

Bureau	Mobile

Comme vous pouvez le voir, tout empiler n'est pas toujours la solution. Assurez-vous d'utiliser au mieux votre espace lors de la conception pour mobile. Dans certains cas, cela inclut de ne pas empiler le contenu.

Codage de ma variante de pile intéressante

J'ai créé l'effet ci-dessus en utilisant des versions modifiées du code d'empilement hybride. Dans ce cas, j'ai commencé avec un hybride à trois colonnes :

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

Ensuite, dans chaque colonne, j'ai ajouté une ligne avec un empilement sur deux colonnes et une deuxième ligne normale pour le devis. Comme je ne voulais pas que l'image et le nom soient côte à côte sur le bureau, j'ai omis le séparateur de colonne fantôme entre les div. Et j'ai défini les tables dans les divs pour avoir des largeurs maximales qui entraîneraient l'intégration des divs sur mobile.

Les colonnes elles-mêmes ont été définies sur une largeur de 180 pixels, ce qui est beaucoup plus petit sur mobile, de sorte que les divs se sont empilés jusqu'à ce que ces tables soient définies à 100% par une requête multimédia sur mobile. Ainsi, chaque colonne ressemblait maintenant à ceci :

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

Ensuite, j'ai défini les tables pour qu'elles aient des valeurs de largeur maximale qui les amèneraient à être situées les unes à côté des autres sur mobile. Mais sur le bureau, la cellule contenant était trop petite pour qu'elles soient situées l'une à côté de l'autre, ce qui a entraîné l'empilement du contenu sur le bureau.

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

Voir le code en action pour toutes les différentes versions de l'empilement, y compris celle-ci.

Dernières pensées

Comme vous pouvez le voir, lorsque vous combinez ces différentes méthodes, vous pouvez trouver toutes sortes de façons intéressantes d'empiler et de trier le contenu. Assurez-vous donc que vos abonnés ont la meilleure expérience de visionnement et assurez-vous que vos conceptions se démarquent sur mobile en empilant ces colonnes pour une lisibilité optimale. Essayez-le et dites-nous ce que vous proposez !

Partagez, merci!

Rendez-vous dans la boîte de réception, et non dans le dossier de courrier indésirable, avec Litmus Spam Testing

Découvrez comment Litmus Spam Testing peut vous empêcher d'entrer dans le dossier des spams en testant 25 filtres et en donnant des informations sur la façon de résoudre les problèmes de délivrabilité.

Correction de la délivrabilité des e-mails : 6 façons d'éviter d'être brûlé

Résolvez les problèmes de délivrabilité (et empêchez-les de se reproduire) avec ce plan de correction de la délivrabilité des e-mails et 6 façons d'éviter le dossier spam.

Les e-mails préférés de l'équipe Litmus de septembre 2021

Découvrez les campagnes par e-mail qui ont attiré notre attention en septembre 2021 et les marques créant de meilleures expériences d'abonnés avec le marketing par e-mail.

La protection de la confidentialité d'Apple Mail est là : ce que cela signifie réellement pour les spécialistes du marketing par e-mail et que faire maintenant

La protection de la confidentialité des messages d'Apple est enfin là ! Découvrez son impact réel sur les programmes de marketing par e-mail et ce que vous pouvez faire pour optimiser vos e-mails.

Faire des e-mails HTML au lieu de ceux entièrement image est plus facile que vous ne le pensez

La conversion d'e-mails contenant uniquement des images en e-mails texte en direct est plus facile que vous ne le pensez. Découvrez comment dans ce guide étape par étape.