Cum se creează e-mailuri HTML

Publicat: 2022-01-28

Crearea de e-mailuri HTML nu este atât de dificilă pe cât pare. Nu trebuie să fii dezvoltator și nici nu trebuie să știi cum să codificați.

Dacă ați folosit vreodată un editor de e-mail WYSIWYG (What You See Is What You Get), ați creat deja un e-mail HTML. Fiecare dintre modulele pe care le trageți și plasați este format din HTML și CSS în linie, definind modul în care ar trebui să arate și să se comporte diferitele elemente de e-mail.

Deci, dacă majoritatea editorilor de e-mail vă permit să proiectați cu instrumente de glisare și plasare, de ce trebuie să cunoașteți HTML pentru a crea e-mailuri?

Buna intrebare.

În timp ce majoritatea editorilor de e-mail vă oferă o cantitate suficientă de control în cadrul modulelor, nu veți putea modifica fiecare aspect esențial al e-mailului dvs. Probabil că veți avea nevoie de HTML pentru a modifica lucruri precum:

  • Marimea fontului
  • Alt text
  • Frontiere
  • Marjele
  • Captuseala
  • Marimea imaginii
  • Culori

Ați folosit editorul de e-mail Twilio SendGrid ? Vă permite să creați e-mailuri cu o combinație de module drag-and-drop și editare HTML. O astfel de putere combinată vă oferă control complet asupra aspectului și simțului e-mailurilor dvs., asigurând o experiență de brand consistentă, de top în fiecare mesaj.

Din fericire, codificarea unui e-mail HTML nu este prea dificilă. Mai jos, vă vom oferi sfaturile și cunoștințele privind structura e-mailurilor de care aveți nevoie pentru a crea e-mailuri mai bune.

5 sfaturi pentru codificarea unui e-mail HTML

Codarea unui e-mail HTML este relativ simplă, dar clienții de e-mail și căsuțele de e-mail pot fi capricioase. Urmați aceste bune practici pentru a vă asigura că mesajele dvs. arată grozav, indiferent de clientul, browserul sau dispozitivul destinatarilor.

1. Faceți-vă e-mailurile receptive

Destinatarii deschid mesaje de e-mail pe diverse sisteme de operare, dispozitive, dimensiuni de ecran, browsere și aplicații de e-mail. Fiecare dintre acești factori vă va reda e-mailul în mod diferit, așa că este datoria dvs. să vă asigurați că e-mailul este receptiv și funcționează așa cum este prevăzut în majoritatea căsuțelor de e-mail.

Puteți găsi o mulțime de șabloane de e-mail receptive, dar sarcina este puțin mai complicată atunci când codificați un e-mail HTML de la zero. Iată câteva lucruri care vă vor ajuta să vă faceți mai receptive e-mailurile:

  • Includeți interogări media: interogările media vă permit să vă adaptați șabloanele de e-mail la diferite dispozitive.
  • Utilizați o singură coloană: poate fi ușor să citiți e-mailuri cu două coloane pe un desktop, dar poate deveni puțin dens pe dispozitivele mobile.
  • Măriți dimensiunea fontului: nu mergeți mai mic decât un font cu 13 sau 14 puncte.
  • Spațiază-ți linkurile: nu vrei ca cititorii să facă clic accidental pe linkul greșit, deoarece linkurile tale erau prea apropiate.
  • Adăugați etichete alt: etichetele alt vă descriu imaginile în cazul în care imaginile nu se încarcă.

2. Adăugați imagini cu moderație

Imaginile sunt completări grozave la campaniile tale de e-mail, dar ai grijă să nu exagerezi cu ele. Prea multe imagini pot prelungi timpul de încărcare și pot face dificilă redarea e-mailurilor.

Utilizați imagini mai mici care se vor încărca mai repede și nu vor ocupa întregul ecran. De asemenea, adăugați elemente de dimensionare receptive precum „lățimea” și „lățimea maximă” pentru a vă asigura că imaginile dvs. se încarcă corect pe fiecare dispozitiv și client de e-mail.

3. Păstrați-o simplu

Amintiți-vă scopul e-mailului dvs. Mulți designeri de e-mail se pierd în artă și creativitate, uitând obiectivul general al e-mailului, care nu este să câștige oohs și aahs.

În primul rând, doriți ca oamenii să vă deschidă e-mailurile. Apoi, doriți ca aceștia să facă clic și să ia măsuri. Aceasta ar putea fi să vă vizitați site-ul web, să citiți o postare pe blog, să faceți o achiziție sau să vă înscrieți la un eveniment.

Păstrați lucrurile simple. Oferiți valoare destinatarilor, atrageți-i cu conținut și apoi conduceți-i către îndemnul dvs. la acțiune. Asta e. De cele mai multe ori, totul este pufos.

Când adăugați diferite elemente HTML în e-mailul dvs., puneți-vă întrebarea: „Ajută acest lucru e-mailul să-și îndeplinească scopul?” Dacă nu, anulați-o din designul dvs. de e-mail.

4. Folosiți șabloane de e-mail predefinite

Puteți găsi șabloane de e-mail HTML prefabricate cu tot ce aveți nevoie pentru a trimite o campanie stelară. Șabloanele au făcut deja munca grea pentru a crea un design de e-mail frumos și receptiv.

Dacă vă place un șablon de e-mail, dar nu sunteți 100% mulțumit de el, puteți descărca adesea codul HTML și faceți modificările dorite. Aceasta poate fi o metodă excelentă de editare a e-mailului pentru cei care sunt începători cu HTML.

5. Testează-ți e-mailurile

Nu trimiteți niciodată un e-mail fără a-l testa mai întâi. Modul vechi de a face acest lucru ar fi să trimiteți un e-mail de testare la diferite adrese de e-mail (pentru clienții de e-mail) și să încercați să îl deschideți pe diferite dispozitive. Dacă asta sună a mult timp pierdut și dureri de cap, ai dreptate.

Din fericire, există o cale mai bună în zilele noastre.

Instrumentul de testare a e-mailului Twilio SendGrid este integrat cu editorul de design, ajutându-vă să depanați problemele dintr-o singură aplicație. Vă va ajuta să vedeți cum se redă e-mailul dvs. pe clienți, browsere și dispozitive. De exemplu, puteți vedea cum va arăta e-mailul dvs. pe un dispozitiv mobil folosind Gmail și pe un desktop folosind Outlook.

Instrumentele de testare a e-mailului vă pot ajuta, de asemenea, să găsiți linkuri și butoane întrerupte, conținut cu aspect spam și probleme de formatare.

Structura de e-mail HTML

E-mailurile HTML au o structură simplă:

  • DOCTYPE
  • Antet
  • Corp

DOCTYPE

Utilizați <!DOCTYPE> pentru a spune browserului la ce să se aștepte — în acest caz, ar fi un e-mail HTML.

Antet

Utilizați secțiunea antet pentru a include elemente precum stilul, dimensiunea și metatextul.

Corp

Utilizați corpul pentru elementele vizuale ale e-mailului dvs., cum ar fi text, imagini, tabele, linkuri și altele asemenea.

Șablon de e-mail cu cod HTML

Iată un exemplu de șablon de e-mail cu cod HTML. Puteți vedea cum se redă acest șablon de e-mail pentru buletin informativ de călătorie pe desktop, tabletă și dispozitive mobile.

Îți place ce vezi? Faceți clic pe „Descărcați șablonul” și vă vom trimite o copie a codului HTML în căsuța dvs. de e-mail. Apoi puteți copia/lipi codul în editorul de design de e-mail pentru a importa șablonul și a-l adapta la marca și campania dvs.

Consultați alte șabloane de e-mail de la Twilio SendGrid

Doriți mai multe șabloane de e-mail? Din fericire pentru tine, avem o galerie plină cu ele . Indiferent dacă aveți nevoie de un buletin informativ, de resetare a parolei sau de un șablon de memento de întâlnire, galeria noastră de șabloane gratuite are totul.

În plus, aceste modele sunt receptive, asigurându-vă că e-mailul dvs. arată grozav pe clienți, browsere și dispozitive. Ah, și am menționat că șabloanele sunt gratuite?

Începeți azi să creați e-mailuri HTML mai bune cu un șablon predefinit.