Cum să uimești cu ușurință fiecare abonat cu o imagine de fundal prin e-mail (+ codul pentru a face asta!)

Publicat: 2021-07-23

E-mailurile se pot simți puțin previzibile cu o imagine aici, un bloc de text acolo... O modalitate de a anima experiența abonaților? Imagini de fundal. Sunt neașteptate și adaugă o altă dimensiune design-ului dvs., făcându-vă e-mailurile „pop”. Când sunt făcute bine, vă fac e-mailul să pară un milion de dolari, dar sunt incredibil de ușor de scos.

Continuați să citiți pentru:

Beneficiile imaginilor de fundal
Exemple de e-mail inspirate
Considerații de proiectare
Cum se codifică imaginile de fundal

Ce sunt imaginile de fundal? (Și ce rost are?)

Imaginile de fundal sunt imagini care sunt aplicate pe fundalul sau în spatele unui element. În loc să fie un punct focal principal al e-mailului, ca o imagine de erou, ele sunt mai adesea subtile și complementare cu celălalt conținut din campanie.

Beneficiul major al utilizării imaginilor de fundal este că vă permit să plasați conținut HTML suplimentar deasupra acestora. Spre deosebire de alte imagini, în care doar imaginea în sine poate exista în acel spațiu, imaginile de fundal oferă posibilități de stratificare, astfel încât să puteți avea imagini suplimentare, text sau îndemnuri (CTA) existente în același spațiu.

exemplu de text HTML live și un buton antiglonț peste o imagine de fundal

Utilizarea textului HTML live deasupra unei imagini de fundal, în loc să includeți acel text ca parte a imaginii, înseamnă că mesajul dvs. este lizibil atunci când imaginile sunt dezactivate, ceea ce face ca aceasta să fie o tehnică excelentă pentru a crea e-mailuri HTML mai bune și mai accesibile.

Pe lângă faptul că ajută la crearea de campanii care oferă o experiență de lectură mai bună, imaginile de fundal oferă, de asemenea, o multitudine de posibilități de design, diferențiind campania dvs. de concurență.

Modalități creative în care mărcile folosesc imagini de fundal

Miro a plasat o imagine de fundal care conține forme în spatele secțiunii eroului lor, atrăgând atenția asupra titlului principal al e-mailului și mesajelor, care sunt suprapuse folosind text live.

E-mail Miro cu imagine de fundal — Sursa: E-mailuri foarte bune

Uplers au folosit o imagine de fundal pentru a evidenția o reducere la serviciile lor, cu o imagine de cupon plasată în spatele unui cod de cupon.

Uplers e-mail imaginea de fundal pentru codul de cupon — Sursa: E-mailuri foarte bune

Figma a adăugat un model subtil de fundal care se repetă în corpul acestui e-mail, prezentându-ne noul lor produs de tablă albă. Modelul pe care îl prezintă reflectă fundalul găsit în produs.

Imagine de fundal Figma în e-mail — Vizualizați acest e-mail în Litmus Builder

Chipotle a plasat o imagine de fundal jumbo în spatele acestui erou jumbo de impact și a zonei corpului, inclusiv fotografia de produs și un model de linii. Deasupra acestei imagini, au un GIF animat cu fundal transparent și text live în zona corpului.

E-mail Chipotle Friendsgiving cu imagine de fundal subtilă — Sursa: E-mailuri foarte bune

GIF-urile animate pot fi folosite și ca imagini de fundal, cum ar fi acest exemplu de la Adobe Stock , promovând colecții festive cu conținut erou, inclusiv text live și un buton CTA plasat deasupra fundalului animat.

E-mail Adobe Stock cu imagine de fundal GIF animată — Sursa: E-mailuri foarte bune

Considerații de proiectare

Când te gândești la implementarea imaginilor de fundal, există câteva considerente de design care merită luate în considerare.

Contrast

Pentru a vă asigura că toți cititorii primesc valoarea conținutului suprapus pe imaginile de fundal, este important să fiți atenți la contraste. Tratați imaginea în același mod ca și cu o culoare plată și testați culorile imaginii dvs. în comparație cu culorile conținutului dvs.

Dacă proiectați folosind Figma, puteți adăuga plugin-uri precum Color Blind și Contrast pentru a vedea dacă respectați Ghidurile de accesibilitate a conținutului web (WCAG). Există, de asemenea, o serie de aplicații web, cum ar fi Verificatorul de contrast de la WebAim, unde puteți testa culorile din desenele dvs.

Simplitate

O altă modalitate de a asigura lizibilitatea este să păstrați lucrurile simple. Fundalul ocupat poate face dificilă obținerea valorii oricărui text live pe care îl plasați pe imaginea dvs. Prin urmare, este adesea util să considerați imaginea de fundal ca o îmbunătățire, mai degrabă decât o caracteristică.

Rezervă de culoare solidă

Deoarece nu toți clienții de e-mail vor onora imaginile de fundal, proiectați o soluție de culoare solidă. Abonații care folosesc clienți de e-mail care nu vă vor accepta imaginile pot avea în continuare o experiență grozavă cu o culoare solidă. Asigurați-vă că alegeți o culoare de rezervă care se potrivește cu designul dvs. și care contrastează bine cu elementele sale din prim-plan.

Cum să codificați imaginile de fundal în e-mail

Înainte de a parcurge codul, să vedem ce clienți vor reda stilul CSS de fundal și care au nevoie de ajutorul unui backup VML.

Vestea bună: suportul pentru CSS de fundal inline s-a îmbunătățit, clienții de webmail acceptând acum pe deplin această metodă, ceea ce înseamnă că atributul HTML de fundal nu mai este necesar.

Vestea proastă: din păcate, Windows 10 Mail pur și simplu nu-i plac imaginile de fundal. Nu va reda CSS inline sau atributul de fundal HTML depreciat. Și aplicarea VML va cauza probleme de randare cu un mesaj de eroare „imaginea nu poate fi afișată”.

Dacă sunteți îngrijorat de experiența pe care o primesc abonații Windows 10 Mail, luați în considerare să lăsați deoparte VML. Acest lucru asigură că culorile de fundal de rezervă oferă publicului dvs. Microsoft Outlook Suite o experiență excelentă de citire a e-mailurilor, fără decorațiuni suplimentare.

cum arată imaginile de fundal ale e-mailului în Windows 10 Mail

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

Client de e-mail	Folosind CSS inline	Folosind VML
Apple Mail 14	✓	✘
Office 365 (Mac)	✓	✘
Office 365 (Windows)	✘	✓
Outlook 2016 (macOS 10.12.6)	✓	✘
Outlook 2013, 2016, 2019 (Windows 10)	✘	✓
Windows 10 Mail	✘	✘
Aplicația Gmail (Android 10)	✓	✘
Aplicația Gmail (iOS 13.4.1)	✓	✘
Outlook (Android 7.0)	✓	✘
Outlook (iOS 12.0)	✓	✘
Samsung Mail (Android 7.0)	✓	✘
iPad 11 Air (Gen 4 iOS 14.2)	✓	✘
iPhone 12 (iOS 14.2)	✓	✘
AOL Mail (Edge)	✓	✘
Gmail (Chrome)	✓	✘
Office 365	✓	✘
Outlook.com	✓	✘
Yahoo! Poștă	✓	✘

Ce clienți de e-mail folosesc abonații tăi?

Aruncați o privire asupra cotei de piață a clienților dvs. de e-mail cu Litmus Email Analytics. Vedeți pentru ce clienți de e-mail aveți nevoie pentru a vă optimiza imaginile de fundal. (Sugestie: dacă Windows 10 Mail este scăzut, nu vă transpirați.)

Aflați mai multe →

Acum că am scos asta din drum, să vorbim despre cod!

Unul dintre lucrurile distractive despre aducerea imaginilor de fundal în e-mailurile tale este că există câteva moduri diferite în care poți realiza acest lucru. Puteți să umpleți o mică secțiune sau să acoperiți corpul e-mailului, să utilizați o singură imagine sau un model repetat și vă puteți schimba imaginile de fundal în funcție de dacă cititorul dvs. este pe desktop, mobil, modul Light, modul întunecat sau chiar dacă trec cu mouse-ul sau se rotesc peste imaginea ta.

Fiecare tehnică are nevoie de o abordare diferită, așa că haideți să aruncăm o privire la cele mai bune modalități de a le codifica.

Imagine de fundal cu lățime definită sau fixă

fundal cu lățime fixă

Când aplicați imagini de fundal, este întotdeauna cel mai bine să adăugați codul în celula tabelului care conține. Aplicarea oricărui alt element HTML, cum ar fi <table> sau <body>, este puțin probabil să obțină asistență de la unii clienți de e-mail. Iată cum ar trebui să arate:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Aici, imaginea este făcută pentru a se potrivi cu lățimea și înălțimea celulei, incluzând background-size:cover în stilurile CSS inline și apoi poziționată în centru. Adăugarea acestor stiluri vă permite să utilizați o imagine de 2x - ceea ce înseamnă că veți vedea o randare clară pe ecranele retină - și va fi redimensionată pentru a se potrivi perfect în containerul dvs., chiar și atunci când containerul se redimensionează pentru a fi randat pe diferite dispozitive.

Cu toate acestea, acest lucru înseamnă, de asemenea, că dacă imaginea dvs. este prea mică sau nu este dimensionată proporțional cu containerul, poate părea pixelată sau întinsă. Mai ales dacă este vorba de fotografie.

Funcționează imaginea de fundal?

Vedeți cum funcționează codul nostru pentru imaginile de fundal în propriul dvs. e-mail prin cele mai populare aplicații de e-mail, cum ar fi Gmail și Outlook.

Aflați mai multe →

Astăzi, majoritatea clienților de e-mail acceptă stilul de fundal CSS inline, astfel încât să puteți adăuga imaginea de fundal și culoarea de rezervă folosind proprietatea CSS prescurtată de fundal. Cu alte cuvinte, aplicați pur și simplu acestea stilului „de fundal”. Din păcate, stilul de fundal suplimentar nu funcționează prea bine cu prescurtarea atunci când se codifică inline, așa că orice poziționare sau dimensionare ar trebui scrisă ca stiluri separate. De exemplu, folosind background-position: center; dimensiunea fundalului: 80%; în loc de fundal: centru/80%; .

Faceți ca acest lucru să funcționeze în Outlook cu o rezervă VML

Outlook și Office 365 pentru desktop au nevoie și de puțin ajutor pentru a afișa imagini de fundal, deoarece nici ele nu vor reda stilurile de fundal CSS. Pentru ca imaginea noastră de fundal să fie afișată în acești clienți de e-mail, trebuie să folosim o tehnică popularizată de Stig Morten Myre pentru Campaign Monitor și să aplicăm Vector Markup Language (VML) de la Microsoft.

Luând codul pe care l-am creat deja, plasăm VML-ul necesar și un <div> care conține în interiorul celulei noastre de tabel:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
           <v:fill type="frame" src="fixed-background.jpg" />
           <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
           <![endif]-->
           <div>
<!--add your content here-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

    </td>
</tr>
</table>

Pentru imaginile care trebuie să umple containerul fără a se repeta, trebuie să folosim „frame” în eticheta vml:fill. În acest fel, puteți utiliza imagini de două ori în cadrul acestei etichete. Asigurați-vă că setați lățimea containerului folosind stilul inline pe eticheta v:rect (în exemplul de mai sus, este setat la 600px).

Dacă doriți umplutură pe container, ceva pe care ați putea găsi este plasarea VML în interiorul containerului va face ca umplutura să se prăbușească. Modul în care rezolvăm acest lucru este să înfășurăm VML-ul în jurul containerului nostru, așa că trebuie să ne cuibăm containerul într-un alt tabel, astfel:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
<v:fill type="frame" src="fixed-background.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--add your content here-->
    </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

Imagine de fundal care se repetă

De asemenea, puteți adăuga un fundal care se repetă în recipientul în care îl plasați. Un exemplu grozav este să repetați un model pe tot corpul e-mailului.

exemplu de imagine de fundal repetată

Dacă imaginea pe care o plasăm în celula containerului nostru este mai mică decât containerul, se va repeta automat atât pe orizontală, cât și pe verticală. Pentru a repeta într-o singură direcție, stilați cu CSS „background-repeat” și adăugați valoarea repeat-x pentru a repeta orizontal sau repetare-y pentru a repeta vertical.

Pentru a umple întregul recipient cu un model care se repetă complet, codul este foarte simplu:

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    <td style="background: url(repeat-background.png) #B5CFE3;">
        <!--add your content here-->
    </td>
</tr>
</table>

Faceți ca acest lucru să funcționeze în Outlook cu o rezervă VML

Din nou, dacă doriți să vedeți redarea de fundal în clienții Outlook, puteți aplica VML. Codul este puțin diferit de data aceasta, cu VML plasat înaintea containerului:

<div>
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="repeat-background.png" color="#ffffff"/>
  </v:background>
  <![endif]-->
  <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;">
     <tr>
        <td align="center" style="background-image: url(repeat-background.png);">
       </td> 
    </tr>
</table>
</div>

Pentru ca fundalul să se repete, completați eticheta v:fill cu tipul „tigla”. Nicio surpriză, există unele probleme de randare cu Windows 10 Mail, iar cu fundalurile repetate, problemele de randare pot fi mult mai inestetice. Deci, excluderea VML ar putea fi cea mai sigură abordare dacă aveți abonați Windows 10 Mail.

Tehnici avansate

Imaginile de fundal fixe și repetate oferă o mulțime de oportunități de a vă îmbunătăți designul de e-mail, dar sunt mai multe:

Schimbarea imaginii de contrast

Acum, că modul întunecat este disponibil în mai mulți clienți de e-mail – iar onorarea preferințelor abonaților vă ajută să ajungeți la un public mai larg și să construiți încredere – schimbarea imaginii de fundal este o modalitate excelentă de a completa un design în mod deschis sau întunecat. Și este, de asemenea, o îmbunătățire distractivă și simplă.

moduri de contrast

Pentru a implementa acest lucru, trebuie să adăugați câteva CSS încorporate la interogările media în modul întunecat. Acest lucru se va asigura că imaginea de fundal în modul întunecat este difuzată în clienții de e-mail care vor accepta acest tip de interogare media:

.darkmode-switch {
            background-image:url(background-dark.png) !important;
            background-color:#111111 !important;
        }

Merită să adăugați o culoare de rezervă închisă. Acest lucru va ajuta clienții de e-mail care nu vor încărca imagini fără ca cititorul să ia măsuri și asigură că mesajul dvs. poate fi citit atunci când imaginea nu a fost încărcată.

Acum, în HTML, aplicați-vă clasa la celula care conține imaginea de fundal în modul de lumină. Simplu!

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class= "darkmode-switch" style="background: url(background-light.png) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Rețineți : ceva pentru care este greu de proiectat și chiar mai greu de codificat sunt clienții de e-mail care inversează culorile e-mailului dvs. într-un mediu Dark Mode, trecând complet cu vederea toată munca grea pe care o depuneți în scrierea interogărilor media în Dark Mode.

Este aproape imposibil să aduci acești clienți de e-mail. Cu toate acestea, puteți să vă jucați cu imagini de fundal care au un nivel de transparență și să aplicați o culoare de fundal cu contrast ridicat pe container, cum ar fi alb pentru modul de lumină și negru pentru modul întunecat. Acest lucru va permite inversarea culorii de fundal. Am încercat asta cu următorul exemplu:

imagine de fundal prin e-mail în diferite scenarii Dark Mode

Imaginea mea de fundal chevron are o opacitate de 30% pe săgeți și este complet transparentă între ele. Aceasta înseamnă că, atunci când clienții de e-mail ofensivi preiau controlul asupra redării mele în modul întunecat, conținutul este lizibil.

Pentru mai multe informații despre codificarea pentru modul întunecat și asistența clientului de e-mail, consultați Ghidul nostru final pentru e-mailul în modul întunecat.

Fundal interactiv

Ce zici de a încânta abonații cu ceva interactivitate? Puteți răspândi puțină bucurie cu un simplu efect de trecere cu mouse-ul sau de rulare, schimbând fundalul containerului dvs. pe măsură ce cititorul își deplasează cursorul peste conținutul dvs.

comutați imaginea de fundal pentru e-mail la trecerea cu mouse-ul sau rularea

Aveți nevoie de puțin CSS încorporat pentru ca acesta să funcționeze. Puneți asta în eticheta dvs. <style>:

.background-rollover:hover{ 
        background-image: url(background-rollover-b.png) !important; 
        background-color:#020203 !important;
}

Acum tot ce trebuie să faceți este să aplicați această clasă la celula tabelului, astfel:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class="background-rollover" style="background: url(background-rollover-a.png) #DBE8F0; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Crește-ți designul la nivel

Având o mulțime de oportunități, folosirea imaginilor de fundal pentru a vă îmbunătăți designul de e-mail este o modalitate excelentă de a împinge plicul și de a face e-mailurile dvs. să iasă în evidență în mulțime. Pentru a vă ajuta să puneți aceste tehnici în practică, am creat o resursă la îndemână de unde puteți prelua codul prezentat în această postare.

Ne-ar plăcea să vedem cum folosiți imaginile de fundal în e-mailurile dvs. - împărtășiți exemplele dvs. în comentariile de mai jos.

Asigurați-vă că imaginile de fundal funcționează — cu Litmus

A funcționat? Previzualizați imaginile de fundal (și restul e-mailului) în peste 100 de clienți de e-mail, aplicații și dispozitive cu Litmus. Și salutați e-mailurile de marcă, fără erori.

Începeți perioada de încercare gratuită →

Publicat inițial pe 24 mai 2019 de Jason Rodriguez. Ultima actualizare 21 iulie 2021.