Dimensiuni de e-mail: dimensiunile ideale pentru șabloanele dvs. [2022]

Publicat: 2021-09-27

V-ați întrebat vreodată care sunt dimensiunile ideale de e -mail pentru șabloanele dvs. de buletine informative? Trebuie să alegeți o anumită lățime și înălțime pentru ele?

Ei bine, răspunsul scurt este da. Răspunsul lung este puțin mai complex. Nu vă faceți griji, însă, pentru că vom explora tot ce trebuie să știți despre dimensiunile ideale și câți pixeli (px) trebuie să fie aceștia pentru a reda corect.

Pentru a vă face o idee, astăzi ne vom uita la dimensiunile esențiale, inclusiv:

  • Lățimea și înălțimea șablonului
  • Dimensiunea fișierului campaniei
  • Antet e-mail
  • Blocuri de conținut și subsol

Fără alte prelungiri, să le vedem!

Dimensiuni șablon de e-mail: Prezentare generală

Dacă vă grăbiți să aflați cele mai bune dimensiuni pentru buletinele dvs. informative , puteți verifica tabelul de mai jos:

Dimensiune ideala Dimensiune maximă
Lățimea șablonului 600 px 700 px
Înălțimea șablonului 1500 px 3000 px
Dimensiunea fișierului de e-mail 75 KB 102 KB
Antet (înălțime) 70 px 200 px
Blocuri de conținut (înălțime totală) 800 px 1200 px
Dimensiune subsol (înălțime) 100 px 300 px
Banner de e-mail 600×730 px 700×1730 px
Butonul CTA Depinde de campanie Depinde de campanie
Imagine 600×650 px (depinde) Depinde de campanie

Acum, să aruncăm o privire mai amănunțită la ele!

Dimensiunea e-mailului – Element Anatomy

Iată un exemplu de buletin informativ prin e-mail și elementele pe care le vom examina:

email sizes

Această campanie are o lățime de 664 px și o înălțime de 2549 px. Designul e-mailului se afișează bine atât în ​​căsuța de e-mail Gmail, cât și în Outlook și se redă corect pe dispozitivele mobile. Când vine vorba de dimensiunea fișierului, este de 57,8 KB, ceea ce este în limitele de dimensiune ideală.

Înainte de a trece mai departe, rețineți că designul dvs. s-ar putea afișa diferit în funcție de rezoluția și dimensiunea ecranului abonaților dvs. . Așa că acum că știm ce vom examina, să începem să explorăm aceste dimensiuni „ideale” una câte una!

Cele mai bune dimensiuni de e-mail: lățime, înălțime și greutate

Începând cu dimensiunile esențiale ale șablonului de e-mail HTML , să aflăm cea mai bună lățime, înălțime și „greutate” necesare pentru a evita problemele cu clienții de e-mail populari precum Gmail, Outlook.com, Yahoo Mail și altele.

Lățimea e-mailului

Cele mai multe sfaturi de marketing evidențiază că lățimea ideală ar trebui să fie de 600 px . Deci, ce înseamnă asta? Toate șabloanele dvs. nu trebuie să fie mai mult de atât pentru a fi eficiente?

Ei bine, nu. În timp ce 600 px este lățimea standard a șablonului de e-mail, puteți avea șabloane mai largi. Motivul pentru aceasta este că clienții de e-mail de astăzi sunt mult mai avansați decât în ​​trecut. Așa că afișarea șabloanelor mai largi nu mai este o problemă atât de mare.

Cu toate acestea, deși puteți experimenta cu lățimea, ar trebui să știți că este posibil ca Gmail să nu afișeze culorile de fundal pentru modelele care depășesc 640 px. Acest lucru poate fi dezamăgitor pentru campaniile dvs., așa că cel mai simplu mod de a o evita este să utilizați machete cu o lățime maximă de 640 px .

Mai jos, puteți vedea un mesaj de e-mail de la Apple cu o lățime de 736 px:

apple campaign example

Dacă doriți să utilizați șabloane mai largi, asigurați-vă că utilizați diverse instrumente de previzualizare a e-mailului pentru a vă asigura că lățimea aleasă nu va cauza probleme.

De asemenea, este bine de știut că majoritatea producătorilor de șabloane de e-mail, cum ar fi Moosend și Mailchimp, oferă modele care au în mod implicit 600 px lățime, așa că nu trebuie să vă faceți griji cu privire la dimensiunile șabloanelor de e-mail.

Înălțimea e-mailului

Acum să vorbim despre înălțimea șablonului de e -mail. Aici, puteți merge până la 1500 px sau mai mult , în funcție de conținutul pe care doriți să îl prezentați.

Puteți deveni „sălbatic” cu această dimensiune de e-mail, dar amintiți-vă că abonatul dvs. ar trebui să poată digera mesajul fără a derula la infinit pentru a ajunge la subiect!

În mod ideal, șablonul dvs. ar trebui să fie între 1500 și 3000 px . Dacă credeți că 3000 px nu înseamnă mult, să vedem un exemplu real de la The Citizenry:

the citizenry height example

Exemplul de mai sus are o înălțime de 2230 px, pe care abonații o pot verifica în câteva pergamente.

Desigur, mulți agenți de marketing prin e-mail vor alege înălțimi mai mari pentru campaniile lor. În timp ce arăți publicului tău tot ce ai de oferit, nu uita că durata noastră de atenție este foarte scurtă, scăzând semnificativ în ultimii 15 ani!

Deci, o înălțime de 2000-25000 px este mai bună decât ca destinatarul să defileze printr-un șablon nesfârșit pentru a ajunge la CTA!

Greutatea e-mailului

Ei bine, acum că știți despre lățimea și înălțimea campaniei dvs., să luăm un moment pentru a vorbi despre cea mai bună dimensiune a fișierului pentru șablonul dvs. .

În general, doriți să creați mesaje care vor ajunge în căsuța de e-mail a abonaților dvs. fără nicio problemă. O linie de subiect spam este de obicei cauza declanșării filtrelor de spam. Dar știați că dimensiunea fișierului dvs. de e-mail poate fi, de asemenea, cauza unei livrări slabe de e-mail?

Pentru a evita acest lucru, ar trebui să păstrați „greutatea” e-mailului destul de ușor. Aceasta înseamnă că trebuie să aveți campanii de e-mail cu un corp care va fi între 20 și 102 KB .

Iată trei moduri rapide de a evita problemele de rupere:

  • Urmăriți o dimensiune maximă a fișierului de e-mail de 102 KB
  • Folosiți elementele vizuale (GIF-uri, imagini) cu înțelepciune
  • Omiteți atașamentele mari

Decuparea căsuței primite

Dar ce se întâmplă când e-mailul tău depășește 102 KB? Ei bine, dacă îl trimiteți la o adresă Gmail, atunci clientul de e-mail vă va tăia mesajul .

Tăierea de e-mail are loc atunci când campaniile depășesc limita maximă de dimensiune a fișierului. În consecință, Gmail va ascunde sau „decupa” campania dvs., iar abonații vor trebui să selecteze opțiunea „Vizualizați întregul mesaj” pentru a-l verifica.

În timp ce Gmail le va arăta în cele din urmă mesajul dvs., să vă tăiați campaniile nu este ideal pentru experiența utilizatorului. Adăugarea unui pas suplimentar la proces ar putea să vă frustreze contactele și să aibă ca rezultat rate mai mici de clic și de implicare .

Soluția este simplă: păstrați-vă e-mailurile sub 102 KB (75 KB este pur și simplu perfect)!

Dimensiunile elementului campaniei de e-mail

Acum că am acoperit dimensiunile vitale de e-mail pe care trebuie să le cunoaștem, haideți să aflăm dimensiunile potrivite pentru componentele dvs. de e-mail , începând cu antetul e-mailului.

Preheader e-mail

În primul rând, antetul dvs. de e-mail este linia suplimentară de copie care urmează liniile de subiect. Îl puteți verifica rapid uitându-vă în căsuța de e-mail. De obicei, ele arată astfel:

gmail email preheaders

Cu toate acestea, textul de dinaintea antetului este vizibil și ca un mesaj scurt deasupra buletinului informativ prin e-mail. Aceste rânduri de copiere pot oferi cititorilor dumneavoastră informații valoroase și chiar le pot lăsa să vă vadă e-mailurile în browserul lor.

Iată un exemplu de la Sigma Beauty:

email sizes preheader example sigma beauty

Deci, cât de mare ar trebui să fie antetul dvs. de e-mail?

Când vine vorba de lățime, antetul dvs. va fi la fel de larg ca și restul campaniei. În ceea ce privește înălțimea, totuși, ar trebui să fie undeva între 20 px și 60 px .

Antet e-mail

Trecem la unul dintre cele mai importante elemente ale campaniilor tale, antetul e-mailului! După cum probabil ați observat, campaniile pot avea diferite dimensiuni ale antetului de e-mail. Să vedem câteva exemple.

Iată una de Wendell August Forge:

wendell august forge email header

(600×98 px)

Și unul de The Blonde Abroad:

the blonde abroad email header size

(600×255 px)

Ambele anteturi au aceeași lățime de 600 px. Cu toate acestea, când vine vorba de înălțime, al doilea are 255 de pixeli.

În timp ce un antet mai mic precum cel al lui Wendell August Forge este ideal atât pentru desktop, cât și pentru dispozitive mobile, a avea un antet puțin mai înalt nu va fi o problemă (atâta timp cât îl testați mai întâi!). De regulă, antetul campaniei dvs. de e-mail ar trebui să aibă o înălțime de aproximativ 60-70 px . Cu toate acestea, dacă logo-ul dvs. conține elemente suplimentare sau un meniu, acesta poate fi de până la 200 px .

Din nou, nu uitați să verificați panoul de previzualizare Gmail sau Outlook sau modul de previzualizare al instrumentului software de marketing prin e-mail! Moosend, de exemplu, are o funcție desktop și mobilă care vă permite să verificați cum arată campania dvs. înainte de a o trimite la lista de e-mail. Vă puteți înscrie cu ușurință pentru un cont și îl puteți încerca gratuit!

Blocuri de conținut prin e-mail

Acum să aruncăm o privire la dimensiunile de e-mail ale blocurilor de conținut. Aceste blocuri pot avea orice, de la copie de e-mail și imagini până la GIF-uri, videoclipuri și CTA!

În ceea ce privește lățimea, blocurile dvs. de conținut ar trebui să urmeze dimensiunea șablonului de e-mail pe care ați ales-o . Cu toate acestea, din punct de vedere al înălțimii, există câteva lucruri de care trebuie să ții cont.

În primul rând, pentru a oferi audienței dvs. cea mai bună experiență, trebuie să vă faceți blocurile de conținut valoroase și scurte. Blocările lungi de conținut vor duce la abandonarea e-mailurilor și la timpi de citire redusi! Și nu ai nevoie de nimic din toate astea.

Mai jos, veți găsi o campanie de marketing prin e-mail realizată de Julie Blanner cu trei blocuri de conținut:

julie blanner content blocks

Fiecare bloc are 344 px înălțime și include o imagine, o copie și un îndemn direct. Din punct de vedere vizual, fiecare bloc continent este ușor de citit și de implicat. Designul minimalist al e-mailului ajută, de asemenea, scopul bloggerului.

În total, conținutul de e-mail al lui Julie Blanner are o înălțime de 1032 px, excluzând blocul de semnătură al bloggerului. Dacă luăm în considerare toate cele de mai sus, este sigur să spunem că blocurile dvs. de conținut trebuie să fie suficient de scurte pentru ca abonații să le verifice în câteva defilări.

Deci, acum putem concluziona că:

  • Fiecare bloc de conținut ar trebui să aibă aproximativ 200-300 px înălțime .
  • Înălțimea totală a blocurilor dvs. de conținut ar trebui să fie de 800-1200 px .

Dimensiunea subsolului e-mailului

Nu în ultimul rând, avem subsolurile campaniei dvs. de e -mail, unde puteți găsi butoane de rețele sociale și de dezabonare, link-uri pentru site-uri web și multe altele.

Ca și în cazul anteturilor, subsolurile pot varia în lungime în funcție de obiectivele dvs. De exemplu, dimensiunea subsolului Modcloth este de 600 px lățime și 361 px înălțime:

modcloth footer email size example

Subsolul de mai sus funcționează bine cu designul e-mailului, deoarece oferă abonaților toate informațiile necesare pe care trebuie să le vadă înainte de a închide e-mailul. În ceea ce privește înălțimea, ar putea fi lungă, având în vedere că subsolurile de e-mail trebuie să fie o ultimă soluție inteligentă pentru a capta atenția abonatului fără a -i enerva.

Având în vedere acest lucru, dimensiunea ideală de e-mail pentru subsolul dvs. ar trebui să fie de aproximativ 100 px . Dacă trebuie să includeți mai multe elemente, cum ar fi linkuri către site-uri web, asigurați-vă că lungimea totală nu depășește 300 px .

Dimensiuni suplimentare ale componentelor de e-mail

În afară de antet, antet, blocuri de conținut și subsol, ar trebui să luați în considerare bannerele, butoanele CTA și dimensiunile imaginii. Sa vedem!

Banner de e-mail

Să vorbim despre bannere un minut. În primul rând, un banner de e-mail este, de obicei, o imagine cu copiere, găsită deasupra campaniei tale de marketing prin e-mail. Un design grozav de banner de e-mail vă poate entuziasma audiența și le poate oferi mai multe motive să se implice în mesajul dvs.

De exemplu, iată un exemplu de banner de Velasca:

velasca email banner example

Bannerul mărcii include toate informațiile necesare pentru a atrage atenția abonatului . Are logo-ul său, copie clară, grafică și un buton CTA. De asemenea, în ceea ce privește dimensiunea, exemplul de mai sus are 600 px lățime și 612 px înălțime, ceea ce este destul de ideal pe baza următoarelor date.

Mai precis, conform Swift Digital, dimensiunea recomandată a bannerului ar trebui să fie:

  • 600-700 px lățime (320-385 px pentru dispozitive mobile)
  • 1730 px înălțime

Butoane CTA

Agenții de marketing prin e-mail pentru comerțul electronic adaugă de obicei butoane CTA colorate pentru a stimula clienții potențiali să ia măsuri. Pe de altă parte, agenții de marketing B2B ar putea adăuga un hyperlink pentru a-și conduce abonații către site-ul lor web sau paginile de destinație.

Pentru a vă asigura că butoanele dvs. se aliniază cu designul dvs. de e-mail, să aruncăm o privire la câteva date interesante despre dimensiunea e-mailului pentru butoanele CTA:

  • Înălțimea medie a CTA este de 47,9 px
  • Apple sugerează o înălțime de 44 px
  • Îndemnul mediu are 14 caractere

După cum puteți vedea, înălțimea butonului de e-mail este semnificativă pentru crearea unui CTA eficient. Dar ce zici de latime? Ei bine, agenții de marketing prin e-mail optează pentru diferite dimensiuni de butoane de e-mail în funcție de obiectivele lor. Luați în considerare următoarele exemple.

Kings Theatre are un buton foarte simplu care măsoară 122,4 x 41,51 px:

kings theatre cta button example

Pe de altă parte, Wizarding World optează pentru un CTA mai proeminent, care are 300 px lățime și 60 px înălțime:

wizarding world cta example

În mod ideal, îndemnurile dvs. ar trebui să fie în armonie cu imaginile și designul e-mailului pentru a vă asigura că ies în evidență fără a fi excesive.

Și, deși nu există o lățime și o înălțime standard pentru ele, puteți folosi concluziile de mai sus ale butonului CTA ca ghid pentru a le crea mai eficient!

Dimensiunea imaginii e-mail

În primul rând, cel mai popular format de fișier imagine citit de browserele de e-mail includ vechiul tău JPG (sau JPEG), PNG și GIF . Dar ce zici de dimensiuni? Ei bine, din punct de vedere al lățimii, imaginile dvs. vor urma dimensiunea setată a șablonului. Deci, dacă aveți o lățime setată de 640 px, imaginea dvs. va urma exemplul.

În ceea ce privește lungimea, totuși, ar trebui să iei în considerare mai întâi scopul imaginii tale. Dacă sunt folosite ca bannere, atunci acestea ar trebui să aibă între 800-1730 px. În mod similar, dacă le folosiți ca imagini de buletin informativ, ar trebui să ajungeți până la 1200 px. Cu toate acestea, nu există dimensiuni standard de imagine de e-mail pe care trebuie să le urmați.

Când vine vorba de calitate, ar trebui să utilizați o rezoluție de 72 dpi pentru a crește performanța generală a imaginilor dvs.! Și nu uitați să vă optimizați imaginile pentru afișajele retină (iPhone, iPad-uri etc.)!

Editorii de e-mail precum Moosend vă vor oferi opțiuni potrivite pentru a vă asigura că utilizatorii dvs. Apple vor avea cea mai bună experiență, din punct de vedere al calității imaginii.

moosend email builder retina option

În afară de dimensiunile corecte, asigurați-vă că imaginile nu sunt prea mari. Puteți evita tăierea folosind instrumente precum TinyJPG sau Imagesmaller pentru a le comprima. Dacă este posibil, încercați să rămâneți la formatarea PNG , deoarece este mai mult decât ideală pentru campaniile de e-mail.

Nu în ultimul rând, rețineți că majoritatea clienților de e-mail nu vor utiliza opțiunea de lățime completă. Prin urmare, aveți grijă când creați versiunile desktop ale mesajelor dvs. ca previzualizare și ceea ce văd abonații dvs. ar putea fi diferit!

Cele mai bune dimensiuni de e-mail pentru a vă prinde șabloanele

Acum că știți cele mai bune dimensiuni de șabloane de e-mail, puteți crea campanii care se vor afișa corect de fiecare dată.

Deși puteți utiliza dimensiunile de mai sus ca referințe, nu ezitați să experimentați cu ele folosind o serie de instrumente de testare. De asemenea, acordați atenție utilizatorilor dvs. de pe mobil și nevoii de e-mailuri mai receptive!

Având în vedere asta, este timpul să creezi cele mai bune buletine informative de marketing prin e-mail pentru afacerea ta!

Și dacă doriți un instrument avansat care să vă ajute, asigurați-vă că încercați Moosend gratuit pentru a crea e-mailuri receptive care vă vor uimi publicul!