Cel mai bun mod de a codifica culorile și degradeurile de fundal pentru e-mailuri HTML

Publicat: 2021-04-22

Codarea culorilor de fundal sună ca o sarcină simplă, nu? Adevărul? Chiar și acest aspect minor de stil are câteva capcane și există câteva considerații care trebuie luate pentru a obține o randare coerentă între clienții de e-mail.

Și nu doar dezvoltatorii trebuie să-i liniștească pe zeii căsuței de e-mail. Pe măsură ce Modul întunecat câștigă avânt, există și mai multe medii de care trebuie să fii conștient, dintre care unele vor impune designerilor de e-mail să fie deosebit de atenți atunci când aplică culorile de fundal în desenele lor.

În această postare pe blog, veți învăța:

Beneficiile culorilor de fundal
Cum să codificați un fundal de culoare solidă (+ asistență client de e-mail)
Cum să codificați un fundal gradient (+ suport pentru clientul de e-mail)
Sfaturi pentru optimizarea pentru modul întunecat

De ce să folosiți culorile de fundal în e-mail?

Punerea în aplicare a unei strategii de culoare de fundal îndeplinește câteva nevoi atunci când vine vorba de îmbunătățirea programului dvs. de e-mail. Din punct de vedere tehnic, implementarea culorilor de fundal nu adaugă timp de încărcare e-mail-urilor dvs. și sunt încă vizibile chiar și atunci când imaginile sunt dezactivate. Acestea pot ajuta la separarea conținutului, la apelarea mesajelor sau la separarea unui e-mail de alții în căsuța de e-mail a abonatului dvs., sporind potențial implicarea în rândul publicului dvs.

Ieși în evidență în inbox

Puteți crea o experiență de deschidere de impact, cum ar fi acest e-mail de la Blurb.

Zona eroilor are un pumn. Fundalul portocaliu îndrăzneț are un impact prin contrastul cu albastrul logo-ului, ridicând identitatea mărcii. Odată ce cititorul trece prin zona eroului, conținutul secundar se află pe un fundal alb, oferind experiența de lectură ideală pentru corpuri mai mari de copii.

exemplu de culoare de fundal prin e-mail pentru blurb — Sursa: E-mailuri foarte bune

Separați secțiunile

Dacă aveți un e-mail lung, culoarea este o modalitate excelentă de a separa vizual diferitele blocuri de conținut, astfel încât să se simtă mai digerabilă.

E-mailurile promoționale de la gigantul cafenelei Starbucks pot fi destul de lungi, cu mai multe promoții găzduite într-un singur e-mail. Pentru a ajuta secțiunile să se diferențieze unele de altele, sunt utilizate culori diferite de fundal.

Exemplu de e-mail Starbucks de culori de fundal — Vizualizați acest e-mail în Litmus

Creșteți identitatea mărcii

Gradienele fac parte din identitatea de marcă a Agenției de marketing 1973 Ltd, motiv pentru care găsiți adesea gradiente liniare îndrăznețe în fundalul e-mailurilor lor. Gradienții de fundal pot face compozițiile să pară mai dinamice și chiar pot încuraja abonatul să defileze.

1973 Ltd exemplu de e-mail de fundal gradient — Sursa: E-mailuri foarte bune

Deci, care este cel mai bun mod de a aduce aceste tehnici în dezvoltarea ta de e-mail? L-am rugat pe colegul meu de echipă și dezvoltator de e-mailuri Litmus, Carin Slater, să ne ofere detalii despre codificarea fundalurilor solide și gradiente.

Cum se codifică o culoare de fundal HTML solidă pentru e-mail

Culorile de fundal pot fi codificate în mai multe moduri și în mai multe locuri. Dar fiecare metodă nu este acceptată în mod egal între clienții de e-mail. Iată o diagramă rapidă a codului de stil de fundal și a metodei de cod de culoare care funcționează pentru cei mai buni clienți de e-mail.

Asistență client de e-mail pentru culorile de fundal

Cod de stil	Proprietăți CSS „fondul” și „culoarea de fundal”				Atribut HTML „bgcolor”
Codul culorii	6 cifre hexadecimale	3 cifre hex	RGB	RGBA	6 cifre hexadecimale	3 cifre hex	RGB	RGBA
Apple Mail 14	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✘ Nu	✘ Nu
Outlook 2016 (macOS 10.12.6)	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✘ Nu	✘ Nu
Outlook 13, 16, 19 (Windows 10)	✓ Da	✓ Da	✓ Da	✘ Nu	✓ Da	✘ Nu	✘ Nu	✘ Nu
Outlook Office 365 (Windows 10)	✓ Da	✓ Da	✓ Da	✘ Nu	✓ Da	✘ Nu	✘ Nu	✘ Nu
Outlook Office 365 (Mac OS 10.15)	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✘ Nu	✘ Nu
Windows 10 Mail	✓ Da	✓ Da	✓ Da	✘ Nu	✓ Da	✘ Nu	✘ Nu	✘ Nu
Aplicația Gmail (Android 10)	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✘ Nu	✘ Nu
Aplicația Gmail (iOS 13.4.1)	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✘ Nu	✘ Nu
Outlook (Android 7.0)	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✘ Nu	✘ Nu
Outlook (iOS 12.0)	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✘ Nu	✘ Nu
Samsung Mail (Android 7.0)	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✘ Nu	✘ Nu
iPad 11 Air (Gen 4 iOS 14.2)	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✘ Nu	✘ Nu
iPhone 12 (iOS 14.2)	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✘ Nu	✘ Nu
AOL Mail (Edge)	✓ Da	✓ Da	✓ Da	✘ Nu	✓ Da	✘ Nu	✘ Nu	✘ Nu
Comcast (Edge)	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✘ Nu	✘ Nu
Gmail (Chrome)	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✘ Nu	✘ Nu
Office 365	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✘ Nu	✘ Nu
Outlook.com	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✓ Da	✘ Nu	✘ Nu
Web.de	✓ Da	✓ Da	✓ Da	✘ Nu	✓ Da	✘ Nu	✘ Nu	✘ Nu
Yahoo! Poștă	✓ Da	✓ Da	✓ Da	✘ Nu	✓ Da	✘ Nu	✘ Nu	✘ Nu

Știm cu toții că clienții de e-mail pot fi un pic persnic. Deci, care este cel mai bun mod de a codifica culorile de fundal, astfel încât să funcționeze pe toți clienții de e-mail? Vă voi prezenta recomandarea noastră și de ce.

1. Folosiți tabele și celulele tabelului

Există patru locuri în HTML în care puteți adăuga o culoare de fundal:

<corp>
<div>
<tabel>
<td>

Cel mai sigur loc pentru a adăuga culoarea de fundal este pe un tabel sau o celulă de tabel.

Eticheta <body> este ștearsă în Yahoo și AOL, așa că orice culoare de fundal aplicată acolo nu va apărea în acești clienți de e-mail. Și plasarea unei culori pe un înveliș <div> după corp ar funcționa peste tot, cu excepția clienților Outlook, deoarece aceștia nu acceptă etichetele <div> în e-mailuri.

Pentru a obține cea mai largă gamă de asistență pentru clienți de e-mail, înfășurați întregul e-mail într-o etichetă <table> cu lățime de 100% și puneți acolo culoarea de fundal. Și utilizați celulele tabelului <td> pentru secțiunile de e-mail, astfel încât să aveți o flexibilitate mai mare în a colora anumite blocuri de conținut.

2. Adăugați culoare cu o proprietate CSS și coduri de culoare HEX sau valori RGB

Culorile de fundal pot fi codificate în mai multe moduri:

Folosind atributul HTML bgcolor
Folosind proprietatea CSS background-color
Folosind fundalul proprietății de prescurtare CSS
Folosind codul de culoare hexazecimal din 6 cifre
Folosind codul de culoare hexazecimal din 3 cifre
Utilizarea valorilor de culoare RGB

În ceea ce privește modul de a pune culoarea de fundal pe tabelul sau celula tabelului, ar trebui să utilizați o proprietate CSS.

Testând cele două metode de proprietate CSS — culoarea fundalului și fundalul — am descoperit că ambele au aceleași rezultate consistente, atâta timp cât adăugați doar culoare (fără imagini). Potrivit caniemail.com, utilizarea proprietății de fundal pentru orice altceva decât adăugarea unei culori poate duce la faptul că culoarea dvs. nu va apărea.

Atributul bgcolor HTML nu s-a descurcat bine în Outlook, cu suport inconsecvent pentru codurile HEX din 3 cifre. Și utilizarea valorilor RGB și RGBA a dus la culoarea incorectă sau la scăderea completă a culorii.

Iată testul nostru de culoare de fundal folosind diferitele metode din Outlook, astfel încât să puteți vedea singur:

Test de turnesol asupra modului în care culorile de fundal sunt afișate în e-mailul HTML în Outlook — Vezi acest test în turnesol →

În alți clienți de e-mail, codul HEX din 3 cifre s-a redat bine, dar valorile RGB și RGBA au dus la culori incorecte atunci când sunt aplicate atributului HTML bgcolor.

Test de turnesol asupra modului în care culorile de fundal sunt afișate în e-mailul HTML în Apple Mail — Vezi acest test în turnesol →

După toate testele noastre, am ajuns la o singură concluzie: rămâneți cu proprietățile CSS și folosiți coduri HEX de 3 sau 6 cifre sau valori RGB. Acestea au funcționat pe toți clienții de e-mail.

Introducerea opacității cu alfa pentru valoarea RGBA nu a fost acceptată în Outlook, Web.de sau GMX.de, dar a avut un suport decent în caz contrar.

Deci codul final ar trebui să arate cam așa pentru a colora întregul fundal al unui tabel:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #427CA9;">

Sau adăugați culoare la o anumită celulă de tabel:

<td style="background-color: #427CA9;">

Și asta este cu adevărat!

Testează QA culorile de fundal ale e-mailului tău și multe altele

ai facut-o corect? Vedeți cum arată e-mailul dvs. în cei mai populari clienți de e-mail, astfel încât să vă puteți asigura o experiență de abonat fără erori, conform mărcii.

Aflați cum →

Cum se creează un fundal gradient

Când doriți să măriți culorile de fundal, încercați să adăugați degrade.

Gradienții CSS nu sunt acceptați peste tot, dar există alternative care fac posibilă redarea unui gradient în aproape toți clienții de e-mail.

Asistență client de e-mail pentru fundaluri gradiente

Client de e-mail	Suport pentru gradienți liniari CSS	Suport pentru gradienți liniari CSS, gradienți VML și alternative de imagine
Apple Mail 14	✓ Da	✓ Da
Outlook 2016 (macOS 10.12.6)	✓ Da	✓ Da
Outlook 13, 16, 19 (Windows 10)	✘ Nu	✓ Da
Outlook Office 365 (Windows 10)	✘ Nu	✘ Nu
Outlook Office 365 (Mac OS 10.15)	✓ Da	✓ Da
Windows 10 Mail	✘ Nu	✘ Nu
Aplicația Gmail (Android 10)	✓ Da	✓ Da
Aplicația Gmail (iOS 13.4.1)	✓ Da	✓ Da
Outlook (Android 7.0)	✘ Nu	✓ Da
Outlook (iOS 12.0)	✘ Nu	✓ Da
Samsung Mail (Android 7.0)	✓ Da	✓ Da
iPad 11 Air (Gen 4 iOS 14.2)	✓ Da	✓ Da
iPhone 12 (iOS 14.2)	✓ Da	✓ Da
AOL Mail (Edge)	✘ Nu	✓ Da
Comcast (Edge)	✓ Da	✓ Da
Gmail (Chrome)	✓ Da	✓ Da
Office 365	✘ Nu	✓ Da
Outlook.com	✘ Nu	✓ Da
Web.de	✘ Nu	✘ Nu
Yahoo! Poștă	✘ Nu	✓ Da

Iată cum puteți începe.

1. Aplicați fundaluri gradient liniar CSS la un tabel sau o celulă de tabel

Așa cum ați proceda cu fundalurile de culoare solidă, aplicați fundaluri de gradient liniar CSS la un tabel sau o celulă de tabel, sau un div care conține (ne vom arunca în curând într-o soluție Outlook), pentru a crea ceva de genul acesta:

Exemplu de e-mail de turnesol de fundal cu gradient liniar CSS — Vedeți cum am creat acest gradient în Litmus Builder

În acest exemplu, gradientul include trei culori: violet, magenta și portocaliu. Stilul începe în HTML, cu o rezervă de culoare solidă aplicată atributului bgcolor. Apoi, în stilurile CSS inline, repetăm această alternativă folosind proprietatea de fundal și metoda RGB.

Pentru a crea gradientul liniar, includem din nou proprietatea de fundal și aplicăm stilul cu gradient liniar. Deoarece gradientul pe care îl creăm este redat în diagonală de la stânga sus la dreapta jos, începem cu sintaxa unghiului de gradient (315deg). Apoi, în ordinea în care am dori să apară culorile, folosim metoda RGBA pentru a declara fiecare culoare.

După stilul de culoare RGBA, includeți poziția în care doriți să apară culoarea respectivă. Acest lucru vă va ajuta să vă amestecați frumos culorile. Pentru a vă face o idee despre cum să selectați o poziție de culoare, puteți utiliza un generator online de gradient CSS.

Ar trebui să ajungeți cu un cod care arată astfel:

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e37b46" style="background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);">

2. Creați o rezervă pentru Outlook cu gradienți VML

Mulți dintre abonații tăi folosesc Outlook? Apoi, va trebui să utilizați limbajul de marcare vectorială (VML) pentru a adăuga gradientul de fundal.

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="gradient" color="#e37b46" color2="#56328b" />
</v:background>
<![endif]-->

Gradienții VML funcționează cel mai bine cu două culori. Există opțiunea de a face trei sau mai multe culori, dar se pare că seamănă foarte mult cu ceva de la începutul anilor 1990 și nu există prea mult control asupra a ceea ce poți face pentru a o îmblânzi. Dacă doriți trei sau mai multe degrade de culoare, cel mai bine este să utilizați o imagine (și vă voi arăta cum în pasul următor).

Pentru gradienții VML bazați pe imagini, va trebui să vă jucați cu dimensiunea imaginii pentru a găsi cea mai bună modalitate de a o face să umple spațiul. Puteți utiliza atributele type="frame" sau type="tigle". Găsesc că degradeurile foarte lungi și subțiri funcționează bine pentru type=”tigle”, în timp ce imaginile scurte cu gradient lat funcționează mai bine cu type=”frame”.

Cel mai bun mod de a vedea ce funcționează este să puneți imaginea și să vedeți cum arată în Litmus.

3. Creați o rezervă bazată pe imagini pentru Outlook, Yahoo și AOL

Dacă aveți abonați pe Yahoo, AOL, Outlook (iOS și Android) și Outlook.com, puteți crea alternative bazate pe imagini pentru aceștia.

Adăugați o clasă de „gradient” la celula sau tabelul căruia doriți să se aplice gradientul. Apoi, folosind diferite metode de direcționare, puteți aloca o imagine de fundal CSS pentru a înlocui stilul CSS cu gradient acolo unde gradientul nu apare.

Pentru a viza Outlook.com, utilizați ceva de genul acesta:

[class~="x_gradient"] { 
url('https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg') !important; 
background-size: 100% 100% !important; 
background-repeat: repeat-x !important;
}

Pentru a viza Yahoo și AOL, utilizați:

.& .gradient { 
url('https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg') !important; 
background-size: 100% 100% !important; 
background-repeat: repeat-x !important;
}

Pentru a viza ambii clienți mobili Outlook, utilizați:

body[data-outlook-cycle] .gradient { 
url('https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg') !important; 
background-size: 100% 100% !important; 
background-repeat: repeat-x !important;
}

Am creat o rezervă bazată pe imagini pentru exemplul nostru de gradient. Pentru ca acest lucru să se repete, a trebuit să ne luăm la revedere unghiului de gradient și să ne aranjam culorile pentru a le afișa de sus în jos:

Exemplu de e-mail de turnesol de fundal gradient bazat pe imagini de rezervă — Vedeți cum am creat acest gradient în Litmus Builder

4. Utilizați o culoare de rezervă solidă pentru toți ceilalți clienți de e-mail

Pentru acei clienți de e-mail care nu acceptă nicio remediere, asigurați-vă că furnizați o culoare de rezervă solidă.

În acest caz, utilizați atributul bgcolor cu culoarea HEX de 6 cifre pentru a oferi culoarea de rezervă pentru clienții desktop Windows 10 și Office 365. Web.de va folosi proprietatea de fundal CSS ca alternativă.

Așadar, dacă doriți să colorați întregul fundal al unui tabel, codul final de utilizat în e-mailuri este:

<table class="gradient" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e37b46" style="background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="frame" color="#e37b46" src="https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg" />
</v:background>
<![endif]-->

Sau utilizați acest cod dacă doriți să colorați doar o anumită celulă de tabel:

<td class="gradient" align="left" valign="top" bgcolor="#e37b46" style="background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:[width]px; height: [height]px;">
<v:fill type="frame" color="#e37b46" src="https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg" />
<v:textbox inset="0,0,0,0">
<![endif]-->

Dacă nu sunteți familiarizat cu VML și doriți să vă asigurați că îl aveți corect, Campaign Monitor are un instrument la îndemână dezvoltat de Stig pentru adăugarea imaginilor de fundal la e-mail. Puteți folosi același instrument și înlocuiți v:fill type="tigla" cu v:fill type="gradient" pentru a crea un gradient. Asigurați-vă că declarați atât culorile gradientului de început, cât și de sfârșit cu color="" și color2="" și eliminați atributul src=""" . În exemplele de mai sus, utilizați v:fill type="frame" pentru a vă asigura că o imagine se întinde pe întregul cadru și nu se repetă. Aceasta este, de asemenea, o soluție excelentă pentru imaginile de fundal pe retină, dar o vom lăsa pe seama lui Courtney Fantinato.

Nu uita de Dark Mode

Tocmai când suportul pentru culoarea de fundal era din ce în ce mai bun, modul întunecat a fost introdus în amestec.

Această oportunitate de a crea o experiență de lectură personalizată, bazată pe preferințele de contrast ale unui abonat, este un câștig uriaș pentru accesibilitate, dar un alt obstacol pentru designerii și dezvoltatorii de e-mail.

mână ținând în sus un iPhone Apple cu Apple Mail în modul întunecat

Ghidul suprem pentru e-mailul în modul întunecat

Optimizarea e-mailurilor pentru modul întunecat poate fi dificilă. Consultați ghidul nostru suprem pentru codare și sfaturi de proiectare pentru a crea cea mai bună experiență de abonat prin e-mail la Dark Mode pentru marcă.

Obțineți ghidul dvs. de utilizare →

În timp ce clienții de e-mail, cum ar fi Apple Mail, iPad, aplicațiile native de e-mail pentru iPhone, HEY și aplicația Outlook pot fi vizați cu stilul CSS încorporat, există și clienți de e-mail care folosesc propria lor redare implicită pentru a oferi o soluție Dark Mode.

Aplicațiile Outlook.com, Office 365 și Gmail pentru iOS și Android, toate inversează parțial sau complet culorile pentru a crea o experiență în modul întunecat, uneori cu rezultate oribile.

Nu există încă nicio modalitate de a suprascrie această inversiune de culoare . Cu toate acestea, există câteva lucruri pe care le puteți lua în considerare pentru a îmbunătăți redarea e-mailurilor în aceste medii.

Sfat #1: faceți alegeri informate de design cu testarea culorilor

Poate fi puțin sfâșietor să vezi că culorile tale sunt ajustate în moduri pe care nu le-ai fi vrut. Și este oarecum îngrijorător când o culoare nu se schimbă, dar o culoare a fontului se schimbă - și toate considerentele de accesibilitate ies din fereastră.

Merită să testați culorile mărcii dvs. în clienții de e-mail care inversează culorile pentru Dark Mode pentru a vedea cum sunt modificate. Odată ce aveți o idee despre modul în care culorile dvs. sunt redate, puteți face alegeri informate de culoare în etapa de proiectare.

Am efectuat un test similar pentru a vedea cum unele dintre culorile și tonurile noastre se potrivesc cu clienții de e-mail asupra cărora nu aveam niciun control:

Test de culoare de fundal de e-mail HTML Litmus în modul întunecat — Vezi acest test în turnesol →

Am descoperit că utilizarea unui ton deschis a dus la inversarea culorilor de fundal și text destul de bine. Și deși culorile care se redau odată inversate nu fac parte din paleta noastră de culori, putem oferi o experiență de lectură accesibilă în acești clienți de e-mail.

Exemple de e-mailuri HTML de turnesol de culori de fundal în modul deschis versus modul întunecat

Sfat #2: Folosiți remedieri parțiale pentru aplicațiile Gmail

Modalități de a îmblânzi inversarea culorilor în aplicațiile Gmail au ieșit la iveală, datorită eforturilor neobosite ale comunității de e-mail.

înlocuirea culorilor în modul întunecat macOS/iOS:
Pentru culorile de fundal, utilizați un gradient de o singură culoare:
imagine de fundal: gradient liniar (#ffffff,#ffffff)
Nici măcar nu-mi vine să cred că funcționează, dar da... chiar și butoanele mele sunt de marca.
Mulțumim lui @ThiesBW #emailgeeks
– Annett Forcier (@The_Annett) 11 decembrie 2019

Aplicând un gradient liniar care conține culoarea de fundal pe elementele containerului, puteți forța culoarea aleasă să apară în mediile în mod deschis și întunecat din Gmail.

Pentru a face acest lucru, trebuie să adăugați gradientul liniar la proprietatea CSS imagine de fundal folosind metoda culorii HEX. Apoi faceți ambele culori din gradient culoarea pe care doriți să o onoreze Gmail, astfel:

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e37b46" style="background-image: linear-gradient(#e37b46, e37b46);">

Remi Parmentier a extins această soluție pentru a preveni, de asemenea, inversarea culorilor textului în aplicațiile Gmail folosind modurile de amestec CSS.

Utilizarea acestor remedieri vă poate ajuta să controlați unele aspecte ale randării inversate. Cu toate acestea, acest lucru este posibil numai în Gmail și nu oferă flexibilitatea de a schimba culorile e-mailului dvs. în funcție de modul de contrast selectat de abonații dvs.

Oricât de frustrant este faptul că nu puteți viza clienții de e-mail care vă inversează culorile, puteți recăpăta puțin control prin: testarea paletei de culori, alegerea culorilor pe baza rezultatelor testelor și lucrul cu aceste remedieri parțiale.

Uimește-ți abonații cu culoare

Culoarea este o modalitate excelentă de a adăuga un pic experienței abonaților și de a vă menține organizat conținutul de e-mail. Și necesită mai puțin timp și resurse decât imaginile! Acesta este un câștig-câștig peste tot.

Așa că începeți cu acest ghid și abia așteptăm să vă vedem fundalurile colorate în căsuțele noastre de e-mail.

Asigurați-vă că culorile dvs. apar corect

Văd abonații e-mailurile dvs. așa cum ați vrut? Previzualizați cum arată e-mailurile dvs. în peste 90 de clienți de e-mail, aplicații și dispozitive — cu Litmus Email Previews.

Începeți încercarea gratuită a Litmus →

Publicat inițial pe 27 martie 2018, de Justine Jordan. Ultima actualizare pe 21 aprilie 2021.

Distribuiți, vă mulțumim!

Ați întrebat, experții noștri în e-mail au răspuns: înregistrare webinar + întrebări și răspunsuri

Consultați înregistrarea webinarului și întrebările și răspunsurile în care experții în e-mail au răspuns la întrebările arzătoare ale comunității de e-mail.

Citeste mai mult

Arborele de decizie: chiar trebuie să testez acest e-mail pentru QA? [Infografic]

Sunteți blocat dacă ar trebui sau nu să vă testați e-mailul QA? Am făcut un arbore de decizie la îndemână pentru a vă ajuta să decideți.

Citeste mai mult

Un instantaneu al peisajului furnizorului de servicii de e-mail

Vedeți care furnizori de servicii de e-mail sunt cei mai populari printre colegii dvs. și vedeți lista lungă de instrumente software de e-mail de pe piață astăzi.

Citeste mai mult

Cum să migrați ESP-uri cu ușurință

Este timpul să începem procesul de migrare. Ai asta! Iată câteva sfaturi pentru a face ca procesul de migrare să fie cât mai ușor și fără dureri de cap posibil.

Citeste mai mult

Livrarea episodului 39: concluzii din viitorul panelului de marketing

În acest episod din Delivering, gazda Jason Rodriguez analizează un panou recent despre viitorul marketingului, cercetând informațiile de la liderii de marketing de la Litmus, Salesforce și Epsilon și discutând de ce să devină bun în colaborare va fi din ce în ce mai important pentru a avea succes. .

Citeste mai mult