Ghidul suprem pentru designul e-mailurilor: Dimensiunile fontului, Dimensiunile imaginii Cele mai bune practici

De ce contează designul de e-mail: Importanța în comerțul electronic și marketing.

Font și tipografie

Dimensiuni font:

Dimensiuni recomandate pentru e-mailurile mobile și desktop

Pentru lizibilitatea e-mailurilor mobile, în general, doriți să respectați următoarele dimensiuni de font:

1. Corpul textului: 14-16px este o gamă bună. Ușor de citit fără zoom.
2. Titluri: 22-27px funcționează bine pentru anteturi. Vrei să iasă în evidență, dar să nu fie copleșitoare.
3. Subtitluri: Aproximativ 18-22px. Acestea ar trebui să fie mai mari decât corpul textului, dar mai mici decât titlurile principale.
4. Butoane CTA: Textul din interiorul butoanelor trebuie să aibă cel puțin 14 px pentru a atinge ușor.
5. Imprimare de calitate buna: Păstrați-l cel puțin 12 pixeli, astfel încât să fie lizibil, dar în mod clar secundar.

Lizibilitatea este esențială, în special pentru comerțul electronic, unde doriți să ghidați cititorul să ia măsuri. Testați-vă întotdeauna e-mailurile pe mai multe dispozitive pentru a vă asigura că arată bine!

Tipuri de fonturi

Serif vs. Sans-serif.

Când vine vorba de designul de e-mail, alegerea între fonturile Serif și Sans-Serif poate face o diferență reală. Iată mai jos:

Fonturi Serif

• Exemple: Times New Roman, Georgia
• Atmosfera: Mai tradițional, adesea văzut ca formal sau savant.
• Cel mai bun pentru: conținut lung în care lizibilitatea este esențială.
• Dar: Poate arăta aglomerat pe ecranele mici, așa că utilizați cu grijă în e-mailurile mobile.

Fonturi Sans Serif

• Exemple: Arial, Helvetica, Verdana
• Atmosfera: Modern, curat și casual.
• Cel mai bun pentru: conținut scurt, rapid și lizibilitate pe mobil.
• De ce: Mai ușor de citit pe ecrane mici și oferă o senzație contemporană.

Sfaturi pentru design de e-mail

1. Consecvență: Țineți de unul sau două fonturi pentru a menține designul coeziv.
2. Fonturi sigure pentru web: Folosiți fonturi care se afișează bine pe toți clienții de e-mail.
3. Ierarhie: Folosiți fonturi sau stiluri diferite pentru titluri și text pentru a crea o ierarhie vizuală.
4. Test: Testați întotdeauna modul în care fonturile sunt afișate pe diferite dispozitive și clienți de e-mail.

Având în vedere accentul nostru pe comerțul electronic, s-ar putea să înclinați spre Sans-Serif pentru vibrația sa modernă și lizibilitatea mobilă.

Dar dacă trimiteți conținut educațional, un font Serif ar putea adăuga o notă de autoritate. Alegeți în funcție de marca și mesajul dvs.!

Spațiere între linii

Spațierea optimă este importantă pentru citirea e-mailurilor.

• Corpul textului: Țintați de 1,4 până la 1,6 ori dimensiunea fontului. Deci, dacă dimensiunea fontului dvs. este de 16 px, distanța dintre linii ar fi de aproximativ 22 px până la 26 px.

De ce contează distanța dintre linii

1. Lizibilitate: Spațierea corectă între rânduri împiedică textul să se simtă înghesuit, făcându-l mai ușor de citit.
2. Skimmability: Spațierea bună îi ajută pe cititori să parcurgă conținutul, care este modul în care majoritatea oamenilor citesc e-mailurile.

Sfaturi pentru spațierea liniilor

1. Consecvență: păstrați spațierea între rânduri consecventă pe tot parcursul e-mailului pentru un aspect coeziv.
2. Titluri și subtitluri: Acestea pot avea o distanță puțin mai strânsă, deoarece sunt de obicei mai mari și mai îndrăznețe.
3. Mobil: Testați pe diferite dispozitive pentru a vă asigura că distanța arată bine pe toată placa.

Pentru campaniile dvs. de e-mail de comerț electronic, spațierea între rânduri poate ajuta la ghidarea ochiului cititorului către CTA și informații cheie. Deci, nu trece cu vederea!

Imagini & Media

Dimensiuni recomandate pentru imagini de e-mail

1. Imagini la lățime completă: 600-800px lățime. Aceasta se potrivește cu lățimile implicite ale majorității clienților de e-mail.
2. Imagini inline sau flotante: 200-300px lățime. Acestea sunt imagini care stau lângă text.
3. Imagini Eroi: 800-1200px lățime. Acestea sunt imaginile mari, care captează atenția din partea de sus.
4. Butoane CTA: Cel puțin 44x44px pentru atingere ușoară pe mobil.

Alte sfaturi

1. Raportul de aspect: Respectați rapoartele comune, cum ar fi 16:9 sau 4:3, pentru a vă asigura că imaginile sunt scalate bine.
2. Mărime fișier: Păstrați-l sub 100 KB dacă este posibil pentru o încărcare mai rapidă.
3. Ecrane cu DPI ridicat: Luați în considerare afișajele retină și utilizați imagini cu rezoluție mai mare, dar comprimați-le pentru a menține dimensiunile fișierelor reduse.

Formate de imagine în e-mail

• JPEG: Bun pentru imagini complexe cu multe culori.
• PNG: Cel mai bun pentru imagini simple, text și logo-uri.
• GIF: Pentru animații simple.

Având în vedere concentrarea dvs. pe comerțul electronic, imaginile clare și care se încarcă rapid pot face ca produsele dvs. să arate atrăgătoare și pot menține utilizatorul implicat. Testați întotdeauna pe mai multe dispozitive pentru a vă asigura că totul arată bine!

Alt text pentru imagini în e-mail

Accesibilitate

1. Deficiențe de vedere: Cititoarele de ecran folosesc text alternativ pentru a descrie imagini.
2. Conformarea legală: vă ajută să îndepliniți standardele de accesibilitate precum ADA.
3. Blocarea imaginilor în clienții de e-mail: Unii clienți blochează imaginile în mod implicit. Alt text oferă context.

Beneficii SEO

1. Clasament de căutare: Deși nu afectează direct e-mailul, practicile bune de text alternativ pot ajuta la strategia generală de SEO.
2. Acest lucru se întâmplă atunci când aveți o pagină publică de arhivă pentru buletinele informative trimise

Experiența utilizatorului

1. Viteza de net mica: Dacă imaginile nu se încarcă, textul alternativ oferă context.
2. Clarificare: Descrie imaginea dacă este complexă sau conține informații importante.

Cele mai bune practici

1. Descriptiv: „Pantofii de alergare pentru femei albaștri” sunt mai buni decât „pantofii”.
2. Concis: Să fie scurt, dar informativ.
3. Cuvinte cheie: Folosiți cuvinte cheie relevante, dar evitați umplerea cuvintelor cheie.

Videoclipul se încorporează în e-mail

Adăugarea de videoclipuri în e-mail poate crește implicarea, dar vine cu câteva avertismente. Iată ce ați putea acoperi:

Profesionistii

1. Logodnă: videoclipurile pot crește ratele de clic.
2. informație: este mai ușor să transmiteți informații complexe sau să prezentați un produs.

Cons

1. Compatibilitate: Nu toți clienții de e-mail acceptă videoclipuri încorporate.
2. Timp de încărcare: videoclipurile grele pot încetini încărcarea e-mailurilor.

Cele mai bune practici

1. Imagine de rezervă: Folosiți o imagine în miniatură care trimite la videoclip, în cazul în care încorporarea nu funcționează.
2. CTA: adăugați o suprapunere a butonului de redare pentru a încuraja clicurile.
3. Scurt & Dulce: Păstrați videoclipurile scurte, ideal sub 2 minute.
4. Redare automata: În general, evitați-l; permite utilizatorilor să aleagă să redea videoclipul.

Cum se face

1. HTML5: Pentru clienții de e-mail care îl acceptă, puteți utiliza etichete HTML5 pentru încorporare.
2. Servicii de la terți: Platforme precum Vibetrace, Mailchimp au adesea opțiuni încorporate pentru video.

Alternative la încorporarea video în e-mailuri

1. GIF-uri: GIF-urile scurte, în buclă, pot oferi o experiență asemănătoare unui videoclip.
2. Miniatura conectată: O imagine statică care trimite la un videoclip găzduit în altă parte.

Testare

1. Clienți multipli: Testați cum apare videoclipul în diferiți clienți de e-mail.
2. Mobil: Asigurați-vă că este compatibil cu dispozitivele mobile.

Aspect și structură pentru design de e-mail

Aspecte cu o singură coloană vs. cu mai multe coloane: Pro și contra.

Aspect cu o singură coloană

Pro

1. Mobile-Friendly: Mai ușor de redus pe ecrane mai mici.
2. Concentrat: Ghidează cititorul într-o manieră liniară, directă.
3. Simplitate: Mai ușor de proiectat și mai rapid de încărcat.

Contra

1. Conținut limitat: Nu este ideal pentru mesaje complexe cu mai multe secțiuni.
2. Mai puțin dinamic: S-ar putea să nu capteze atenția la fel de eficient ca aspectele cu mai multe coloane.

Aspect cu mai multe coloane

Pro

1. Bogat în conținut: Excelent pentru a prezenta o varietate de produse sau subiecte.
2. Apel vizual: Mai dinamic și captivant.
3. Ierarhic: Permite o structură informațională mai complexă.

Contra

1. Complexitate: Mai greu de proiectat și poate să nu fie redat bine pe toate dispozitivele.
2. copleșitor: Risc de dezordine sau supraîncărcare de informații.

Sfaturi pentru concentrarea dvs. pe comerțul electronic

• O singură coloană: Cel mai bun pentru campanii concentrate, cum ar fi lansări de produse sau oferte speciale.
• Multi-coloană: Ideal pentru buletine informative sau pentru prezentarea unei game de produse.

Alegerea între o singură coloană și mai multe coloane ar trebui să se alinieze cu strategia de conținut, cu complexitatea mesajului și cu preferințele publicului țintă. Testați întotdeauna ambele aspecte pentru a vedea ce rezonează cel mai bine cu publicul dvs. de comerț electronic!

Importanța spațiului alb în designul de e-mail

În design spațiul alb are o importanță deosebită. Există multe avantaje ale utilizării spațiului alb, dar pentru e-mail cele mai importante sunt:

Lizibilitate și cameră de respirație: Distanța dintre text și elemente face conținutul mai ușor de digerat.

Concentrare și atenție: Spațiile albe pot îndrepta privirea cititorului către elemente importante, cum ar fi CTA.

Profesionalism și aspect curat: Un design fără dezordine pare mai profesionist și de încredere.

Experiență utilizator și Skimmable: îi ajută pe cititori să parcurgă conținutul, care este modul în care majoritatea oamenilor citesc e-mailurile.

Experiență mobilă și prietenos cu atingerea: spațiul suplimentar facilitează atingerea butoanelor de pe dispozitivele mobile.

Pentru e-mailurile dvs. de comerț electronic, spațiile albe pot ajuta cititorul să îndrume către acțiuni cheie, cum ar fi efectuarea unei achiziții sau verificarea unui produs nou. Nu este doar spațiu gol; este un element de design funcțional!

Recepție mobilă

Asigurați-vă că arată bine pe toate dispozitivele. Există o certitudine mai mare că dispozitive mobile sunt folosite mai mult decât desktopul pentru a citi e-mailurile.

Asigurarea că e-mailul dvs. este receptiv și se poate adapta la ecranele mobile nu este o opțiune, ci modalitatea de a începe să proiectați un e-mail.

Apeluri la acțiune (CTA) în e-mail

• Plasare CTA: Unde să le plasați pentru un impact maxim.
• Design buton CTA: dimensiune, culoare, text.

Experiența utilizatorului (UX)

Timp de încărcare

Importanța timpului de încărcare a e-mailului (în funcție de dimensiunea și numărul de imagini)

1. Experiența utilizatorului: e-mailurile cu încărcare lentă pot frustra utilizatorii și pot duce la o implicare mai scăzută.
2. Utilizatori de telefonie mobilă: sunt adesea în mișcare și nu vor aștepta conținut lent.
3. Optimizați imaginile: Păstrați dimensiunile fișierelor mici, dar de calitate ridicată.
4. Minimizați codul: HTML/CSS curat și simplu se încarcă mai repede.
5. E-mailuri mai scurte: Deși ar putea fi mai ușor să încercați să adăugați multe în e-mailuri, este de fapt mai bine să le păstrați mai scurte.
6. Decuparea e-mailului: anumiți clienți de e-mail (cum ar fi Gmail) decupează e-mailurile dacă depășesc o anumită dimensiune.
7. Test: Testați întotdeauna timpii de încărcare pe diferite dispozitive, clienți de e-mail și rezoluții.

Navigare

Navigare prin e-mail

1. Descoperirea conținutului: Pentru e-mailurile mai lungi, cum ar fi buletinele informative, navigarea îi ajută pe utilizatori să găsească ceea ce îi interesează.
2. CTA-uri: Navigarea clară poate ghida utilizatorii să ia măsuri.
3. Meniul: Pentru e-mailuri foarte bogate în conținut, un meniu mic în partea de sus poate fi de ajutor.
4. Ierarhie: Folosiți titluri și subtitluri pentru a diviza conținutul și a ghida cititorul.

Accesibilitate

Alegerea fonturilor în e-mail

1. Alegerea fontului: fonturile simple și curate sunt mai ușor de citit.
2. Marimea fontului: Respectați o dimensiune care poate fi citită, în general 14-16 px pentru corpul textului.
3. Cititoare de ecran: Testați-vă e-mailul cu un software de citire a ecranului pentru a vă asigura că este accesibil.
4. Disponibilitatea fonturilor: când utilizați fonturi personalizate (care nu sunt instalate implicit pe dispozitive), asigurați-vă că fișierele cu fonturi se încarcă corect.

Contrast de culoare

1. Lizibilitate: Contrastul ridicat între text și fundal îmbunătățește lizibilitatea.
2. Accesibilitate: îi ajută pe cei cu deficiențe de vedere sau daltonism.
3. Text vs fundal: Vizualizați textul întunecat pe un fundal deschis sau invers.
4. CTA-uri: Asigurați-vă că butoanele ies în evidență, dar sunt și lizibile.
5. Instrumente: Folosiți chemele de contrast pentru a vă testa alegerile de culoare.