Cele mai frecvente greșeli de codificare a e-mailurilor și cum să le evitați

În ciuda tuturor clopoțelelor și fluierelor e-mailului dvs., greșelile de codare îl pot distruge complet. Doar un link scurtat incorect sau un format de culoare greșit - și e-mailul dvs. va părea nenorocit, mai ales dacă un utilizator decide să îl verifice prin intermediul unui smartphone în loc de un client de e-mail web sau trece la un gadget cu o rezoluție diferită a ecranului.

În această postare, vom vorbi despre greșelile obișnuite de codare a e-mailurilor HTML și vom împărtăși câteva sfaturi despre evitarea acestora.

De unde provin problemele de afișare prin e-mail?

Mai simplu spus, există două motive posibile pentru care un utilizator vă vede e-mailul în afara modului în care ați planificat. Primul este legat de caracteristicile tehnice ale dispozitivului utilizatorului dvs. Al doilea este clientul de e-mail, mai precis - motorul său de redare.

Caracteristicile tehnice ale dispozitivului unui utilizator

Există cel puțin două caracteristici tehnice ale oricărui dispozitiv pe care ar trebui să le luați în considerare:

1. Rezoluția ecranului - dimensiunea ecranului, dată în pixeli. De exemplu, iPhone X are o rezoluție a ecranului de 1125 × 2436 pixeli. Dacă e-mailul dvs. conține două coloane de text, câte 600 de pixeli fiecare coloană, acesta nu va fi afișat corect.
2. PPI sau pixeli per inch - numărul de pixeli dintr-un inch al ecranului. IPP-ul iPhone X este 458. Imaginați-vă: trebuie să adăugați un buton de acțiune în e-mail. Dacă butonul are mai puțin de 44 de puncte, ceea ce pentru iPhone X înseamnă 132 × 132 pixeli, va dura mai puțin de o treime dintr-un inch pătrat din spațiul ecranului, iar utilizatorul cu greu îl va putea atinge.

Încă un lucru de reținut: utilizatorii își rotesc adesea dispozitivele mobile, astfel încât e-mailul dvs. ar trebui să arate bine și să aibă funcționalitate completă atât în ​​modul portret, cât și în modul peisaj.

Pentru a preveni problemele asociate cu caracteristicile tehnice ale dispozitivului utilizatorului, ar trebui să utilizați un design de e-mail receptiv.

În primul rând, ar trebui să adăugați interogări media în head e-mailului. De exemplu, @media screen și interogarea (max-width: 600px) înseamnă că designul e-mailului va fi optimizat dacă lățimea ecranului este mai mică de 600 pixeli. Dacă lățimea ecranului este mai mare de 600 de pixeli, utilizatorul va vedea versiunea cu lățime fixă ​​a acestui e-mail.

În al doilea rând, ar trebui să creați un e-mail sub forma unui tabel cu celule în el:

 <tabel>
<tr>
    <td> ... </td>
</tr>
</table>

Apoi, adăugați stil pentru fiecare celulă, de exemplu:

 <td> <img src = "http://somewebsite.com/someimage.jpg" width = "600" alt = ""> </td>

Cu toate acestea, chiar dacă ați luat aceste măsuri, puteți avea probleme cu afișarea e-mailurilor. Sursa problemei este motorul de redare al clientului de e-mail.

Un client de e-mail

A doua sursă de posibile probleme de afișare este clientul de e-mail pe care îl folosesc destinatarii dvs. pentru a vă deschide campaniile. Partea de bază a unui client de e-mail este un motor de redare. Primește un e-mail ca un script lung de cod, îl procesează și generează modul în care suntem obișnuiți să primim e-mailuri: text inteligibil, structurat și formatat cu imagini, linkuri și alte suporturi.

Aruncați o privire la exemplul de mai jos. Este o bucată de cod dintr-un e-mail promoțional - așa cum vede motorul de redare al Gmail. Dacă acest e-mail a fost afișat așa unui potențial client, cu greu vor tăia codul și vor înțelege că există un cod promoțional cu 40% reducere.

Fiecare client de e-mail are propriul său motor de redare, ceea ce înseamnă că același e-mail, deschis prin clienți de e-mail diferiți, poate avea un aspect total diferit.

Iată o listă cu cei mai populari clienți de e-mail din întreaga lume. Evident, destinatarii dvs. folosesc unul sau chiar o grămadă de aceștia pentru a deschide e-mailurile pe care le trimiteți.

Toți acești clienți de e-mail au unele particularități pe care ar trebui să le țineți cont atunci când codificați e-mailul HTML.

De exemplu, Apple Mail pentru iOS nu acceptă:

• proprietate CSS de inline-size ;
• @media (orientation) interogare media;
• legături de ancorare;
• Formate de imagine HDR, PPM și SVG și multe altele.

Gmail acceptă diverse proprietăți CSS și interogări media, în afară de:

• box-shadow, text-shadow, și alte proprietăți CSS;
• @media (prefers-color-scheme) interogare media și multe altele.

Greșeli comune de codare a e-mailurilor și cum să le evitați

Cel mai bun sfat general cu privire la evitarea greșelilor de codare a e-mailului este să vă limitați inventarul la codul acceptat de majoritatea clienților de e-mail, indiferent cât de vechi sunt versiunile lor. Cu cuvinte simple, să faceți un pas înapoi și să codați ca și cum ar fi 1999. De exemplu, este recomandat pe scară largă să utilizați:

• CSS2 în loc de CSS3,
• HTML4 în loc de HTML5,
• culoare în loc de imagini de fundal,
• table-layout în loc de <div> ,
• inline CSS în loc de seturi de stil sau blocuri <style> .

Se crede că această abordare previne majoritatea problemelor cu afișarea e-mailurilor. Dar să aruncăm o privire mai atentă asupra anumitor greșeli de codare care vă pot distruge e-mailul și să încercăm să găsim soluții pentru acestea.

Fără versiune text simplu

Probleme potentiale. Unii clienți de e-mail, cum ar fi Outlook și Gmail, vă pot defini e-mailul ca spam dacă nu are o versiune text simplă. Mai mult, uneori clienții de e-mail au probleme cu redarea codului HTML. Din acest motiv, e-mailurile HTML pot fi afișate incorect, în timp ce e-mailurile cu text simplu arată întotdeauna la fel.

Prevenirea. Adăugați o versiune text simplu în e-mail. Din fericire, majoritatea furnizorilor de servicii de e-mail îl adaugă automat.

Puteți implementa e-mailuri text simplu în strategia dvs. de marketing prin e-mail. În primul rând, astfel de e-mailuri par mai personale și, prin urmare, vă pot îmbunătăți comunicarea cu abonații. Mai mult decât atât, unii oameni preferă să ajungă direct la punctul de e-mail, iar un aspect colorat îi amânează.

Folosind JavaScript, ActiveX, Flash și multe altele de acest fel

Probleme potentiale. Majoritatea clienților de e-mail nu acceptă aceste limbi, cadre și pluginuri, astfel încât o parte a e-mailului dvs. nu va fi redată, iar abonații dvs. nu vor vedea altceva decât un spațiu gol. Mai mult, e-mailul poate fi interzis de software anti-virus.

Prevenirea. Păstrați limbile pe care le utilizați pentru a codifica e-mailurile în HTML și CSS. Dacă trebuie să adăugați videoclip sau audio, încărcați-l pe un site web și dați un link către acesta.

Vedeți cum NiftyImages prezintă noile caracteristici ale produsului: compania a ales o secvență de imagini, deși ar putea fi un videoclip explicativ.

Prea multe redirecționări

Probleme potentiale. Redirecționările, deși sunt necesare pentru analize, pot face mai mult rău decât bine adresei dvs. de e-mail. De exemplu, acestea fac ca timpul de încărcare al unei pagini web să fie mult mai lung. Apoi, există posibilitatea ca browserul unui utilizator să blocheze redirecționările - astfel, adresa URL va fi inaccesibilă.

Prevenirea. Încercați să evitați redirecționările. Dar dacă tot trebuie să le folosiți, verificați cât timp durează încărcarea unei adrese URL de destinație - testați-vă e-mailul înainte de a lansa întreaga campanie. Luați în considerare experiența abonaților dvs.: dacă sunt dispuși să aștepte încărcarea adresei URL sau nu.

Linkuri scurtate

Probleme potentiale. Linkurile scurtate vă expun e-mailurile la riscul de a ajunge în dosarul de spam. Lucrul este că în linkurile scurtate, adresa URL de destinație nu este clară. Cu cuvinte simple, ar putea duce oriunde. Firește, hackerii și spammerii profită de acest lucru.

Prevenirea. Nu utilizați linkuri scurtate. Dacă scopul dvs. este să faceți ca e-mailul dvs. să arate bine, fără adrese URL lungi, ar fi bine să utilizați următoarea etichetă HTML: <a href="URL">...</a> . Puteți introduce orice adresă URL aici, indiferent cât de lungă este.

Dacă sunteți încă dornici de linkuri scurte, scurtați-vă propriile adrese URL în loc să utilizați instrumente de la terți. Cel puțin scanează în prealabil listele negre ale dispozitivelor de scurtare a linkurilor.

Dimensiune mare a fișierului corpului e-mailului

Probleme potentiale. Atât clienții de e-mail, cât și furnizorii de servicii de e-mail au limite de dimensiuni ale corpului e-mailului, deoarece sunt concepute pentru a transfera volume relativ mici de informații. Dacă nu respectați aceste limite, e-mailul dvs. poate fi decupat - finalul acestuia va fi ascuns.

Aruncați o privire la un buletin informativ de la o etichetă muzicală. Când este deschis prin Gmail, este decupat.

Pentru a vedea versiunea sa completă, abonatul trebuie să atingă un link.

O dimensiune mare a fișierului corpului e-mailului poate provoca, de asemenea, probleme cu livrabilitatea. Mai mult, din cauza dimensiunii mari, e-mailul poate fi considerat o amenințare la adresa securității de către software-ul antivirus al utilizatorului.

Prevenirea. Consultați limitele dimensiunii corpului de e-mail ale furnizorului dvs. de servicii de e-mail și ale clienților de e-mail pe care îi utilizează abonații dvs. De exemplu, Google pretinde o limită a dimensiunii corpului e-mailului de 200 KB. Dar este foarte recomandat să vă limitați e-mailurile la 100 KB pentru a îndeplini cerințele majorității clienților de e-mail. De fapt, e-mailul din exemplul de mai sus are o dimensiune de 136 KB.

Prea multe fonturi și culori

Probleme potentiale. Datorită diferențelor dintre clienții de e-mail, nu toate fonturile și culorile pot fi afișate corect. Mai mult, nu toate fonturile și culorile se combină bine unul cu celălalt - deci riscați să creați un design de e-mail cu sos slab.

De asemenea, trebuie să rețineți că dispozitivele abonaților dvs. au diferite setări de ecran - cum ar fi luminozitatea, de exemplu. Și în timp ce încercați să vă faceți e-mailul mai viu, utilizatorii pot suferi această revoltă de culoare.

Acesta este un exemplu discutabil de proiectare a e-mailurilor: fiecare bloc are propriile culori; această abundență distrage atenția utilizatorului de la cele mai importante informații.

Prevenirea . Alegeți fonturi prietenoase cu e-mailurile, cum ar fi Arial, Comic Sans MS, Courier New, Times New Roman sau Verdana: acestea sunt acceptate de cei mai populari clienți de e-mail. Dimensiunea fontului textului dvs. nu trebuie să fie mai mică de 12-13 px; în caz contrar, un utilizator va trebui să mărească e-mailul sau să-și încordeze ochii.

În ceea ce privește culorile, nu ar trebui să utilizați mai mult de două: unul pentru blocul general de text și altul pentru a evidenția lucruri importante, precum și pentru linkuri și butoane. Asigurați-vă că culorile pe care le-ați ales se potrivesc cu fundalul și arată bine dacă un utilizator trece la un mod întunecat.

Copierea codului HTML al șablonului de e-mail dintr-un editor de text sau un site web

Probleme potentiale. Dacă utilizați Microsoft Word sau ceva de acest fel pentru a crea text pentru e-mailul dvs. și apoi doar să îl copiați, riscați să prindeți o formatare inutilă, care vă poate strica aspectul e-mailului. Și dacă copiați imagini sau anumite părți de text de pe un site web, pot fi adăugate elemente JavaScript sau Flash la adresa dvs. de e-mail.

Prevenirea. Pentru a codifica un e-mail, utilizați editori de text care nu își adaugă propria formatare, cum ar fi Notepad pentru Windows sau TextEdit pentru Mac. Există, de asemenea, câteva instrumente online care vă pot curăța formatarea, cum ar fi TextCleanr. De asemenea, puteți utiliza un instrument HTML Cleaner, care vă permite să creați un e-mail într-un editor ușor de utilizat și să verificați codul în același timp.

Utilizarea codurilor de culoare HEX din trei cifre

Probleme potentiale. Deși formatele de culoare din trei și șase cifre ar trebui să fie echivalente, uneori clienții de e-mail redau un format din trei cifre într-un mod ușor diferit. De exemplu, cu Gmail, riști să devii violet în loc de negru pe care l-ai planificat: color: #000 se transformă în color: #500050 .

Prevenirea . De regulă, rămâneți la formatul de culoare din șase cifre și asigurați-vă că îl utilizați pe tot e-mailul.

Atașamente

Probleme potentiale. De obicei, spammerii și hackerii atașează unele fișiere la e-mailurile lor. Dacă adăugați un atașament, acesta poate fi considerat o amenințare la adresa securității.

Prevenirea. Oferiți un link către o pagină de încărcare a fișierului în loc să adăugați fișierul direct la e-mail.

Iată un exemplu despre cum puteți acorda utilizatorilor acces la fișierul promis. Acordați atenție modului în care este desemnat linkul: acesta ar trebui să fie o bucată de text care poate fi făcută clic, astfel încât utilizatorul să știe ce se va întâmpla atunci când atinge linkul.

Text alternativ lipsă

Probleme potențiale . Unii utilizatori dezactivează descărcarea imaginilor în browserul lor. Dacă primesc un e-mail, inclusiv imagini fără text alternativ, vor vedea doar spații goale în loc de imagini și nu vor înțelege punctul de e-mail.

Funcționează la fel când conexiunea la internet a cuiva este prea mică pentru a descărca imaginile suficient de repede. Textul alternativ ajută la rezolvarea acestei probleme într-un fel: atunci când descărcarea imaginilor nu funcționează corect, utilizatorul poate vedea în schimb un text.

Prevenirea. Adăugați un atribut alt la toate imaginile pe care le utilizați. Asigurați-vă că o faceți corect - adăugând-o la o etichetă img : <img alt="text"> . Limitați textul alternativ la 125 de caractere, inclusiv spații. De obicei, este suficient să adăugați doar câteva cuvinte care descriu imaginea cu precizie. Dacă mai aveți spațiu liber, puteți adăuga context la această descriere.

Aruncați o privire la un extras dintr-un e-mail de la Sephora.

Dacă verificați codul acestui e-mail, puteți găsi un CTA ca text alternativ pentru imagine. Chiar dacă utilizatorii nu văd imaginea, vor înțelege tot ce oferă brandul.

Aspect numai pentru imagine

Probleme potentiale. Dacă e-mailul dvs. constă doar din imagini și nu are text, puteți întâmpina probleme cu livrabilitatea, afișarea și multe altele. De exemplu, dacă un utilizator blochează descărcarea imaginii, nu va vedea nimic în e-mail. În al doilea rând, o mulțime de imagini măresc dimensiunea corpului e-mailului și este probabil ca clienții de e-mail să o decupeze. În al treilea rând, un utilizator nu va putea găsi e-mailul dvs. într-un folder prin căutare cu cuvânt.

Prevenirea. Când creați un e-mail, combinați text și imagini. Nu uitați să adăugați o versiune text simplă a e-mailului și alt text pentru imagini; ia în considerare celelalte sfaturi pe care le-am dat mai sus.

Aruncați o privire la acest e-mail de la Ecwid. Are un design receptiv care include aspectul tabelului și interogări media, cum ar fi max-width: 570px . E-mailul combină diferite tipuri de conținut: o imagine și un text colorat, captivant. Se folosește formatul de culoare din șase cifre, de exemplu, color:#979797 sau color:#4A4A4A . Nu există multe imagini în e-mail, deci dimensiunea corpului său nu este prea mare. Mai mult, nu găsiți nici linkuri scurtate, nici redirecționări în e-mail. În general, acest e-mail îndeplinește majoritatea recomandărilor date mai sus.

Deci, am aruncat o privire asupra celor mai frecvente greșeli de codare a e-mailurilor HTML. Aplicați sfaturile noastre și nu uitați să vă testați e-mailurile înainte de a trimite: utilizați cel puțin trei clienți de e-mail populari pentru a vă deschide e-mailul; dacă este posibil, verificați și prin diferite dispozitive. Emulatoarele vor fi de asemenea utile.

Încă o modalitate de a evita greșelile de codare a e-mailurilor

Există un adevăr: nu veți face greșeli de codare HTML dacă nu codificați. Din fericire, proiectarea e-mailului fără cod vă așteaptă cu SendPulse.

Cu editorul nostru intuitiv drag and drop, v-am împiedicat deja să comiteți greșeli de codare a e-mailurilor. Doar adăugați imagini, text sau videoclip la e-mail, setați fonturile și culorile pentru a se potrivi stilului dvs. de marcă și adăugați linkuri către paginile dvs. de socializare.

Pentru a face totul mai simplu, puteți alege dintre șabloanele noastre de e-mail gratuite. Toate e-mailurile create cu SendPulse sunt receptive, deci vor arăta bine indiferent de dispozitivul pe care un utilizator alege să le deschidă.

Listă de verificare pentru a evita greșelile comune de codare a e-mailurilor HTML

Mai jos veți găsi principalele reguli despre cum să evitați greșelile obișnuite de codare a e-mailurilor HTML. Urmând aceste reguli, puteți evita problemele legate de livrabilitate și afișarea e-mailurilor.

• Adăugați o versiune text simplu la e-mailurile dvs.
• Nu utilizați JavaScript, ActiveX, Flash sau altele de acest gen. Dacă trebuie să adăugați videoclip sau audio, încărcați-l pe un site web și dați un link către acesta.
• Încercați să evitați redirecționările pentru a nu crește timpul de încărcare al unei pagini web.
• Nu utilizați linkuri scurtate - transformați o bucată de text sau o imagine într-un link folosind HTML.
• Încercați să vă limitați dimensiunea corpului e-mailului la 100 KB - sau cel puțin verificați limitele furnizorului dvs. de trimitere și a clienților de e-mail pe care abonații dvs. îi utilizează cel mai mult.
• Alegeți fonturi compatibile cu e-mailurile, cum ar fi Arial, Comic Sans MS, Courier New, Times New Roman sau Verdana.
• Încercați să nu combinați mai mult de două culori într-un singur e-mail - în caz contrar, va părea distractiv.
• Nu copiați text și imagini pentru e-mail de la editori de text, cum ar fi MS Word sau site-uri web: există riscul de a prinde o formatare inutilă.
• Utilizați un format color format din șase cifre.
• Nu atașați fișiere - dați un link către o pagină de încărcare a fișierelor.
• Nu uitați să adăugați text alternativ la imagini.
• Nu creați numai e-mailuri cu imagini - adăugați întotdeauna text.
• Nu uitați să testați un e-mail înainte de a începe o campanie. Utilizați cel puțin trei clienți de e-mail și dispozitive diferite.

Și să nu trebuie să vă gândiți la toate acestea - începeți să utilizați SendPulse gratuit!