Cum să stivuiți coloanele în e-mailurile receptive

Publicat: 2021-10-04

Sooooo, o să mă întâlnesc puțin aici, dar rămâi cu mine.

Când smartphone-urile au început să devină ceva cu care trebuiau să se confrunte agenții de marketing prin e-mail, soluția comună pe care am văzut-o de la toată lumea era e-mailurile cu o singură coloană. Ceea ce are sens, deoarece nu mulți clienți de e-mail mobil au acceptat interogări media. Cea mai ușoară alegere a fost evitarea completă a problemei, rămânând cu modele cu o singură coloană pe desktop, redimensionate cu ușurință pentru mobil.

Dar, cu mai mult suport pentru interogări media în zilele noastre, puteți crea modele mai interesante care profită de codificarea receptivă pentru ca designul dvs. de e-mail să răspundă la dimensiunea ecranului pe care le văd abonații.

Te voi ghida prin:

Ordine de stivuire normală vs. inversă
2 moduri de a codifica conținut care se stivuiește
Când nu ar trebui să stivuiți conținut mobil

De ce ar trebui să stivuiți coloanele pe mobil

Dispozitivele mobile oferă un ecran de vizualizare foarte limitat, iar designul ideal pentru dispozitivele mobile este o coloană. Dar nu vrem să ne limităm la modele cu o singură coloană pe desktop unde avem o mulțime de spațiu. Introduceți interogări media pentru a vă permite să stivuiți conținut pe mobil pentru a vă asigura că conținutul este optimizat pentru ecranul mai mic.

Desktop	Mobil

Sursa: E-mailuri foarte bune

Păstrarea conținutului de e-mail în același aspect de desktop are ca rezultat text și imagini foarte mici sau conținut stricat pe dispozitivele mobile. Nu este o experiență bună pentru utilizator, deoarece abonații dvs. vor avea cel mai probabil dificultăți în citirea conținutului dvs., cum ar fi acest e-mail la fel de larg ca ecranul pe unele telefoane mobile:

o carte pentru copii despre e-mail — *Sursa:* *E-mailuri foarte bune*

Fă-ți o favoare abonaților și asigură-te că e-mailurile tale arată cel mai bine în orice mediu de lectură.

Metode de stivuire pentru proiectarea e-mailurilor

Când doriți să stivuiți coloanele una peste alta, există două moduri diferite în care conținutul se poate stivui: cu coloana din stânga deasupra (stivuire normală) sau coloana din dreapta deasupra (stivuire inversă).

Stivuire normală

Stivuirea normală este cea mai comună formă de stivuire. Preia conținutul din coloana din stânga și îl stivuiește deasupra conținutului din coloana din dreapta, astfel:

stivuire normală

Stivuire inversă

Stivuirea inversă este atunci când conținutul din coloana din stânga se stivuește sub conținutul din coloana din dreapta. Este folosit cel mai frecvent pentru rândul din mijloc dacă aveți un model Z pe desktop, dar doriți ca rândurile să arate la fel pe mobil. În acest exemplu, primul și ultimul rând sunt stivuite normal, dar al doilea rând este o coloană de stivuire inversă:

stivuire inversă

2 moduri de a codifica coloanele care se stivuiesc pe mobil

Există câteva moduri diferite de a codifica stivuirea coloanelor. Vă voi ghida prin utilizarea interogărilor media CSS și apoi a unei metode de codare hibridă. Testează-le și vezi ce funcționează cel mai bine pentru tine.

Utilizarea interogărilor media CSS

Puteți crea două coloane pur și simplu creând un tabel cu două coloane și apoi folosind clase pentru a stivui coloanele.

CSS-ul ar arăta astfel:

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

Și HTML-ul ar arăta astfel:

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

Clasa bloc transformă celulele tabelului în blocuri pe mobil, iar conținutul se comportă în consecință și se stivuiește automat pe mobil. Aceasta are ca rezultat o stivă normală.

Dacă doriți să creați o stivă inversă, puteți utiliza table-header-group și table-footer-group ca valoare a proprietății de afișare în CSS, astfel:

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

Și HTML devine:

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

Codare hibridă

Aceasta este metoda pe care o folosesc. Este mult mai greu de cod, dar mi-a salvat fundul de mai multe ori când clienții de e-mail nu acceptau interogări media. (Recuzită nebună pentru Nicole Merlin pentru tutorialul ei care m-a introdus pentru prima dată în codarea hibridă.)

În acest caz, utilizați două div-uri cu display: inline-block . Acest lucru vă menține conținutul așezat unul lângă celălalt pe desktop și îl împinge să se stivuească pe mobil. Iată cum ar arăta codul dvs.:

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

Apoi înfășurăm toate acestea într-o celulă de tabel și setăm dimensiunea fontului la 0, astfel încât să nu fie adăugat spațiu suplimentar în jurul div-urilor și aliniem totul în centrul celulei tabelului:

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

Dar asteapta! Deoarece Outlook nu acceptă div-uri, trebuie să adăugați și niște tabele fantomă în jurul tuturor pentru ca acesta să funcționeze în 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>

Acest cod funcționează bine fără interogări media dacă utilizați coloane care reprezintă 50% din tabelul care vă conține. Dar dacă utilizați coloane mai mici, va trebui să adăugați câteva interogări media pentru a actualiza lățimea la 100% pe mobil. Mai multe despre asta mai jos.

Versiunea de stivuire inversă profită de atributul dir pentru a ordona div-urile în ordine opusă. Adăugăm dir=”rtl” pe celula care conține cele două coloane, iar apoi fiecare coloană trebuie să aibă dir=”ltr” adăugat la tabel pentru ca conținutul să fie afișat corect:

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

Ceva de reținut atunci când codificați cu versiunea hibridă cu stivuire inversă: orice se află în primul <div> va ajunge în coloana din dreapta , ceea ce este contra-intuitiv și necesită ceva obișnuire. De asemenea, nu este întotdeauna cel mai bun pentru accesibilitate.

Codificare pentru două lățimi diferite de coloane

După cum s-a menționat mai sus, dacă doriți să utilizați celule de tabel de dimensiuni diferite, va trebui să adăugați interogări media pentru a modifica acele celule de tabel pentru mobil. Cel mai obișnuit caz în acest sens este utilizarea unei clase 100% pe care este posibil să o fi configurat deja în CSS. Dacă nu, ar putea arăta cam așa:

.w100p { width: 100% !important; }

Și apoi adăugați acea clasă la div și tabel în HTML astfel (acest exemplu are o coloană care are 100 px lățime și alta 500 px lățime):

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

Nu trebuie să vă faceți griji cu privire la modificarea lățimilor din codul condiționat, deoarece aceasta este exclusiv pentru Outlook pentru desktop.

Ce metoda sa folosesti?

Ambele metode funcționează bine acum că clienții de e-mail mobil acceptă interogări media.

	Metoda interogărilor media	Metoda hibridă
Pro	Cod mai puțin greu Conținutul este citit cu voce tare în ordine de către cititorii de ecran	Mai puțin susceptibil de a fi încurcat de modificări și actualizări de la clienții de e-mail
Contra	Mai susceptibil de a fi încurcat de modificări și actualizări de la clienții de e-mail	Mai multe coduri grele Conținutul este citit în neregulă de către cititorii de ecran

Metoda bazată pe interogare media este mai puțin grea de cod și, deoarece puteți pune clasele pe oricare coloană, puteți lăsa conținutul într-o ordine care să aibă sens pentru cititorii de ecran, în timp ce îl afișați într-un mod care are sens vizual. .

Deci, dacă accesibilitatea este o preocupare mare, versiunea media-query este probabil cel mai bun pariu.

Cu toate acestea, dacă sunteți îngrijorat să aveți o versiune mai sigură și mai puțin susceptibilă la capriciile clienților de e-mail, versiunea hibridă este calea de urmat.

Când să nu stivuiți conținut pe mobil

Acest lucru nu înseamnă că totul trebuie să fie stivuit pe mobil. Nu te înnebuni. Există cazuri în care lucrurile nu trebuie să fie stivuite pe mobil, cum ar fi această semnătură de e-mail:

semnătură de e-mail jaina — *Semnăturile noastre din multe dintre e-mailurile noastre sunt două coloane care nu se stivuiesc pe mobil.*

Sau cazuri în care doriți să treceți de la stivuit pe desktop la non-stivuit pe mobil.

Buletinul nostru informativ din ianuarie 2021 a avut toate rezoluțiile noastre prezentate, fiecare secțiune stivuită una peste alta în trei coloane. Când le stivuim pe mobil, am vrut să folosim mai bine spațiul. Așadar, imaginile, numele și titlurile au devenit „nestivuite”, în timp ce fiecare coloană a devenit un rând nou:

Desktop	Mobil

Deci, după cum puteți vedea, stivuirea totul nu este întotdeauna răspunsul. Asigurați-vă că utilizați cât mai bine spațiul dvs. atunci când proiectați pentru mobil. În unele cazuri, aceasta include nestivuirea conținutului.

Codarea variației mele interesante de stivă

Am creat efectul de mai sus folosind versiuni modificate ale codului de stivuire hibrid. În acest caz, am început cu un hibrid cu trei coloane:

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

Apoi, în fiecare coloană, am adăugat un rând cu stivuire pe două coloane și un al doilea rând normal pentru citat. Deoarece nu am vrut ca imaginea și numele să fie una lângă alta pe desktop, am omis separatorul de coloane fantomă dintre div-uri. Și am setat tabelele din div-uri pentru a avea lățimi maxime care ar avea ca rezultat ca div-urile să fie în linie pe mobil.

Coloanele în sine au fost setate la 180 px lățime, ceea ce este mult mai mic pe mobil, astfel încât div-urile stivuite până când acele tabele au fost setate la 100% printr-o interogare media pe mobil. Deci, fiecare coloană arăta acum astfel:

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

Apoi am setat tabelele să aibă valori de lățime maximă care ar avea ca rezultat situarea lor una lângă alta pe mobil. Dar pe desktop, celula care conținea era prea mică pentru ca acestea să fie situate una lângă alta, ceea ce a dus la stivuirea conținutului pe 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>

Vedeți codul în acțiune pentru toate versiunile diferite de stivuire, inclusiv aceasta.

Gânduri finale

După cum puteți vedea, atunci când combinați aceste metode diferite, puteți găsi tot felul de moduri interesante de a stivui și sort conținut. Așadar, asigurați-vă că abonații dvs. au cea mai bună experiență de vizionare și asigurați-vă că design-urile dvs. ies în evidență pe mobil prin stivuirea coloanelor respective pentru o lizibilitate optimă. Încearcă-l și spune-ne cu ce ai venit!

Distribuiți, vă mulțumim!

Ajungeți în Mesaje primite, nu în dosarul Spam, cu Testarea Spamului Litmus

Aflați cum Litmus Spam Testing vă poate ține departe de dosarul de spam testând cu 25 de filtre și oferind informații despre cum să remediați problemele de livrare.

Citeste mai mult

Remedierea livrării prin e-mail: 6 moduri de a evita arderea

Recuperați problemele de livrare (și opriți-le să se repete) cu acest plan de remediere a livrării prin e-mail și 6 moduri de a evita folderul de spam.

Citeste mai mult

E-mailurile preferate ale echipei Litmus din septembrie 2021

Vedeți campaniile de e-mail care ne-au atras atenția în septembrie 2021 și mărcile care creează experiențe mai bune pentru abonați cu marketingul prin e-mail.

Citeste mai mult

Protecția Apple a confidențialității prin e-mail este aici: ce înseamnă de fapt pentru agenții de marketing prin e-mail și ce trebuie să faceți acum

Protecția Apple a confidențialității prin e-mail este în sfârșit aici! Aflați cum afectează de fapt programele de marketing prin e-mail și ce puteți face pentru a vă optimiza e-mailurile.

Citeste mai mult

Crearea de e-mailuri HTML în loc de cele cu imagini este mai ușor decât credeți

Conversia e-mailurilor cu toate imaginile în e-mailuri live text este mai ușoară decât credeți. Aflați cum în acest ghid pas cu pas.

Citeste mai mult