Tabelele HTML în e-mail: ce ar putea merge prost?

Dacă sunteți în industria e-mailului pentru o perioadă de timp, probabil că ați întâmpinat o serie de probleme cu campaniile dvs. de e-mail. De la imagini lipsă până la probleme de livrare, marketingul prin e-mail este plin de provocări. Ceva pe care poate nu l-ați luat în considerare, totuși, este ceea ce poate merge prost cu tabelele - codul real - care se află la baza e-mailurilor dvs.

Din păcate, există multe care pot merge prost cu tabelele HTML. Astăzi, am vrut să detaliem unele dintre cele mai frecvente probleme întâlnite cu tabelele HTML și să vă oferim câteva sfaturi pentru a vă asigura că nu întâmpinați aceleași probleme în propriile e-mailuri.

De ce folosim tabele

În primul rând, o reîmprospătare rapidă despre motivul pentru care folosim tabelele HTML pentru codificarea e-mailurilor. După cum am discutat în trecut, campaniile de marketing prin e-mail necesită propriile considerații speciale de codificare. În timp ce web-ul și e-mailul sunt construite pe aceleași tehnologii (HTML și CSS), aplicațiile de e-mail nu respectă aceleași standarde ca și browserele web. Fiecare aplicație de e-mail are propriul motor de randare care determină ce cod este acceptat și cum sunt afișate e-mailurile. Vestea proastă pentru noi este că toate aceste motoare de randare acceptă diferite etichete HTML și proprietăți CSS.

Din această cauză, în mare măsură nu putem folosi aceleași principii de codificare folosite în design web. Pentru a ne asigura că e-mailurile sunt afișate corect în majoritatea clienților de e-mail, trebuie să folosim tabele HTML pentru a crea structura unei campanii de e-mail.

Deși acest lucru s-a schimbat recent, în special cu actualizarea majoră a Gmail de anul trecut, unii clienți de e-mail încă nu acceptă foarte multe coduri HTML și CSS. Cel mai notabil: familia Microsoft Outlook de clienți de e-mail, care utilizează Microsoft Word ca motor de randare. Deoarece Outlook este încă extrem de popular (în prezent, numărul 5 pe instrumentul nostru de urmărire a cotei de piață a clienților de e-mail), designerii de e-mail trebuie să folosească în continuare tabelele dacă doresc ca campaniile lor să fie afișate corect pentru abonați.

Și când trebuie să ne bazăm pe tabelele HTML, există o serie de lucruri care pot merge prost...

Să complice lucrurile

Una dintre cele mai frecvente probleme pe care le vedem la utilizarea tabelelor este aspectul prea complex. Acest lucru este valabil mai ales pentru șabloanele de e-mail vechi care nu au fost actualizate de câțiva ani.

Până de curând, cele mai multe e-mailuri erau construite cu o mulțime de tabele. Tabele în tabele în tabele - o practică cunoscută sub numele de imbricare.

Când imbricați mai multe tabele într-un alt tabel, este posibil să introduceți probleme în codul dvs. Este foarte ușor să puneți accidental un tabel în locul greșit sau să lipiți peste o etichetă HTML esențială atunci când schimbați lucrurile. Iar pentru unii clienți (se uită la tine, Lotus Notes), poți vedea e-mailurile redate prost atunci când cuibărești tabelele prea adânc. Din acest motiv, vă recomandăm să construiți e-mailuri cu o abordare modulară, despre care a scris prietenul nostru Brian Graves. Și încercați să mențineți tabelele imbricate la minimum. Mesele de cuibărit este aproape inevitabil, dar menținerea adâncimii de cuibărit la maximum 4-6 mese va ajuta la evitarea oricăror probleme.

Similar cu imbricarea complexă, modelele prea complexe pot fi și ele problematice. Nu este neobișnuit să vezi mai multe coloane de e-mail, dar când începi să adaugi prea multe coloane la un e-mail, te pregătești pentru un potențial eșec.

Unii clienți de e-mail au probleme chiar și cu matematica de bază. Se știe că anumite versiuni de Microsoft Outlook adaugă spațiere suplimentară coloanelor tabelului, rupând aspectele de e-mail. Deși s-ar putea să credeți că folosirea a patru celule de tabel setate la 25% lățimi are sens, Outlook va adăuga spațiu suplimentar acelor celule și va face ca aspectul să fie mai lat de 100%. E-mailul rezultat va arunca unele dintre acele celule pe propriul rând, distrugând campania de e-mail bine concepută și perfect planificată.

Menținerea simplă a aspectului e-mailului vă ajută să evitați potențialele probleme cu campaniile dvs. și să vă mulțumiți abonații.

Lipsesc etichete

E-mailurile au de obicei mult cod în ele. Și majoritatea echipelor de e-mail lucrează pe programe foarte rapide și strânse. Această combinație poate duce la greșeli care pot ruina o campanie de e-mail.

Ca o reîmprospătare rapidă, să vedem cum este scris HTML. HTML constă din etichete care înconjoară conținutul. În cele mai multe cazuri, marcarea corectă necesită atât o etichetă de deschidere, cât și o etichetă de închidere. Luați acest tabel HTML ca exemplu:

 <table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table>

Puteți vedea că există trei etichete diferite: tabelul, rândul tabelului și celula tabelului. Aceste etichete sunt deschise și apoi închise (notate cu simbolul /).

Deși HTML este un limbaj de marcare îngăduitor, clienții de e-mail și motoarele lor de randare se sufocă adesea atunci când etichetele HTML lipsesc. Din păcate, lipsa etichetelor de închidere este o problemă prea frecventă în e-mailuri. Acești timpi de răspuns rapid pot duce la designerii de e-mail să codifice prea repede și să uite să închidă un tabel, un rând sau o celulă. În timp ce acest lucru poate fi bine la unii clienți, în alții va duce la campanii întrerupte.

Instrumente precum Serviciul de validare a marcajului W3C pot ajuta la identificarea oricăror etichete lipsă. Etichetele lipsă și marcajele formate incorect sunt, de asemenea, motivul pentru care vă recomandăm să folosiți șabloane de e-mail sau instrumente precum Builder's Partials și Snippets pentru a ajuta la crearea de e-mailuri. Ele nu numai că vă ajută să vă asigurați că codul dvs. este bine scris și testat în mod corespunzător, dar au avantajul suplimentar de a vă accelera fluxul de lucru, permițându-vă să respectați acele termene limită strânse și să vă mențineți echipa fericită.

Atribute lipsă

La fel cum lipsa etichetelor poate cauza probleme, lipsa atributelor HTML de pe tabele poate duce la modele cu aspect ciudat.

Atributele HTML sunt proprietăți suplimentare care pot fi setate pe etichetele HTML. Aceste proprietăți controlează lucruri precum lățimea și înălțimea elementelor, alinierea și chiar spațierea. Spațierea neașteptată în jurul celulelor tabelului este una dintre cele mai frecvente probleme pe care le veți vedea cu tabelele HTML.

Aproape toate aplicațiile de e-mail (și browserele web) își adaugă propriile stiluri la tabelele HTML. Tabelele HTML sunt folosite în mod tradițional pentru a afișa date tabulare și nu au fost inițial destinate pentru aranjarea și proiectarea conținutului. Din acest motiv, trebuie să suprascriem comportamentul implicit al browserelor și al aplicațiilor de e-mail pentru a ne asigura că tabelele sunt afișate corect.

Adăugând atributele cellspacing și cellpadding în tabel - și setându-le pe ambele la zero - putem fi siguri că niciun client de e-mail nu va adăuga spațiu suplimentar la sau în jurul celulelor tabelului.

 <table cellpadding="0" cellspacing="0"> </table>

De asemenea, dacă întâmpinați probleme cu lățimea tabelelor sau cu alinierea conținutului tabelului, ar trebui să vă asigurați că nu ați uitat lățimea sau alinierea atributelor din tabele sau celulele tabelului.

Aflați cum să depanați

Doriți să aflați cum să depanați propriile campanii de e-mail și să evitați orice probleme jenante pentru abonații dvs.? Alăturați-vă nouă la Litmus Live pentru un atelier complet despre depanarea e-mailului ca un profesionist. Vom trece peste cele mai comune capcane prin e-mail, soluțiile acestora și cele mai bune metode de depanare a campaniilor.

Ia-ți biletele Litmus Live! Înregistrați-vă astăzi pentru a sărbători prin e-mail cu noi! Înregistrează-te acum →