Livrarea episodului 4: Înțelegerea imaginilor de fundal în e-mail

În acest episod din Delivering, vom arunca o privire asupra unei tehnici esențiale pentru designerii de e-mail: imaginea de fundal umilă, dar puternică. Aflați de ce sunt importante imaginile de fundal, cum să le codificați folosind o varietate de tehnici și cum se compară aceste diferite metode între diferiți clienți de e-mail. Acest episod este un însoțitor al Ghidului nostru definitiv actualizat recent pentru imagini de fundal în e-mail. Consultați-l pentru sfaturi, trucuri și cod.

Asigurați-vă că vă abonați la Delivering pe iTunes sau Spotify pentru a asculta episoadele viitoare și a vă alătura conversației pe Twitter folosind hashtag-ul #DeliveringPodcast.

Transcrierea episodului

Există o mulțime de modalități de a adăuga elemente vizuale interesante la campaniile de e-mail.

În timp ce CSS permite o mulțime de opțiuni de stil diferite, uneori aveți nevoie doar de o imagine bună. Dar care este cel mai bun mod de a folosi imaginile în e-mail? În acest episod din Delivering, vom arunca o privire asupra unei tehnici esențiale pentru designerii de e-mail: imaginea de fundal umilă, dar puternică.

Sunt Jason Rodriguez și bun venit la Delivering, un podcast despre marketing prin e-mail și locul său în lume. Livrarea vă este oferită de Litmus, platforma lider în industrie pentru agenții de marketing prin e-mail. Alăturați-vă celor peste 600.000 de profesioniști de e-mail care folosesc Litmus pentru a crea, revizui, testa și urmări campanii de marketing prin e-mail mai bune. Aflați mai multe și obțineți o probă gratuită de 7 zile la Litmus.com.

Imaginile sunt un element de bază al campaniilor de marketing prin e-mail. Sunt folosite pentru fotografii de produse, ilustrații drăguțe, logo-uri, pictograme și, în unele cazuri, pentru întregul e-mail în sine. În special în lumea comerțului cu amănuntul, agenții de marketing sunt predispuși să proiecteze campanii în întregime în instrumente precum Photoshop, să taie acele imagini și să le arunce în HTML înainte de a le trimite abonaților. Toate informațiile - titluri, copie, îndemnuri, orice - există în imagini.

Este o modalitate bună de a respecta liniile directoare ale mărcii și de a produce e-mailuri rapid, dar utilizarea imaginilor în acest fel are unele dezavantaje majore.

Primul este că mulți clienți de e-mail dezactivează imaginile în mod implicit. Imaginile – și tot conținutul – dintr-un e-mail sunt literalmente lăsate descărcate de clientul de e-mail, rezultând campanii goale care par avariate pentru mulți abonați.

Al doilea este că abonații care folosesc tehnologie de asistență, cum ar fi software-ul cititor de ecran, nu vor putea experimenta conținutul din e-mail.

În ambele cazuri, toată copia, ofertele și valoarea pe care ați petrecut timp să le puneți în campania dvs. de e-mail au dispărut în esență. Trebuie să existe o soluție mai bună, nu?

Introduceți imagini de fundal.

Imaginile de fundal sunt pur și simplu imagini, ca oricare alta dintr-un e-mail. Sunt fișiere încărcate pe un server și legate la un cod. Diferența este că imaginile de fundal sunt aplicate nu cu o etichetă de imagine HTML, ci ca atribut sau CSS pe alte elemente HTML.

Există patru moduri de a codifica imaginile de fundal, fiecare cu avantajele și dezavantajele lor.

Prima metodă, și mai tradițională, este prin aplicarea atributului de fundal la o celulă de tabel. Valoarea atributului este doar adresa URL care indică imaginea. Această metodă este grozavă, deoarece este destul de bine acceptată de clienții de e-mail. Dezavantajul major este însă că nu este foarte flexibil. Nu puteți controla dimensiunea imaginii de fundal, iar imaginea se va repeta, implicit, pe elementul dvs.

De asemenea, puteți încărca imagini de fundal folosind CSS. Următoarele două tehnici folosesc aceeași metodă, dar sunt aplicate diferit.

CSS are o serie de proprietăți de fundal, în special: imaginea de fundal, repetarea fundalului, poziția fundalului, dimensiunea fundalului și culoarea fundalului. Există, de asemenea, proprietatea de scurtătură de fundal foarte utilă.

Folosind aceste proprietăți, puteți include adresa URL a unei imagini, puteți controla modul în care acea imagine este poziționată și dacă se repetă sau nu, precum și să includeți o culoare de rezervă pentru când imaginile nu sunt încărcate.

Prima modalitate de a utiliza fundalurile CSS este prin încorporarea acelor proprietăți într-un bloc de stil în capul e-mailului. Doar vizați un element HTML, cum ar fi o celulă de tabel sau un div, și aveți la dispoziție. Această metodă este ușor de codificat, citit și întreținut, dar stilurile încorporate nu sunt acceptate de toți clienții de e-mail.

O metodă mai robustă este includerea acelor proprietăți în linie pe elementul HTML. Acest lucru poate deveni dezordonat dacă utilizați imagini de fundal pe mai multe elemente, dar, din moment ce suntem tocilari de e-mail și obișnuiți să folosim imagini în linie, este încă perfect gestionabil.

Ultimul mod de a include imagini de fundal într-un e-mail este utilizarea a ceea ce se numește „fonduri antiglonț”. Fundalurile antiglonț se construiesc pe baza metodei atributelor HTML, incluzând și VML – sau limbajul de marcare vectorială – în cod. VML este un limbaj proprietar Microsoft utilizat în produsele Office precum Outlook. Prin aplicarea imaginilor de fundal în VML, acestea vor funcționa în Microsoft Outlook, ceea ce nu este neapărat adevărat pentru celelalte metode discutate anterior.

Dezavantajul major al utilizării VML este că nu este foarte accesibil sau bine documentat și adaugă mult cod care, sincer, este greu de înțeles. Pentru a face totul mai ușor, prietenii noștri de la Campaign Monitor au construit de fapt un instrument uimitor pentru generarea de fundaluri antiglonț. Îl găsiți, convenabil, la backgrounds.cm.

Indiferent de metoda pe care o alegeți, există beneficii uimitoare ale utilizării imaginilor de fundal în e-mail față de imaginile codificate în mod tradițional.

Principalul beneficiu este accesibilitatea. Folosind imagini de fundal, te poți baza pe text HTML live în loc de imagini pentru tot conținutul tău. Textul nu suferă de blocare ca imaginile, așa că chiar și atunci când imaginile sunt dezactivate, mesajul tău va fi în continuare lizibil pentru abonați. Și, pentru utilizatorii care au nevoie de cititoare de ecran, vor putea auzi conținutul citit, spre deosebire de imaginile tradiționale.

Puteți folosi CSS pentru a stila acel conținut HTML, astfel încât să pară bine proiectat ca imaginile care ies din Photoshop și puteți chiar include și butoane CTA acolo.

Imaginile de fundal sunt folosite pentru a include un stil vizual suplimentar, fie că este vorba de un simplu gradient, de niște fotografii fanteziste de produse sau de un model care se repetă. Acestea funcționează împreună cu textul HTML pentru a crea e-mailuri frumoase și utilizabile.

Ceea ce este și mai tare este că puteți face lucruri mai avansate, cum ar fi includerea GIF-urilor animate ca imagini de fundal, schimbați imagini în funcție de dimensiunea ecranului sau dispozitivului sau chiar codificați un fundal video, așa cum am făcut acum câțiva ani pentru e-mailul nostru de anunț Litmus Live.

Există o mulțime de lucruri pentru a folosi imaginile de fundal la maximum. Am publicat recent o actualizare a Ghidului nostru definitiv pentru imagini de fundal în e-mail pe blogul Litmus, care merită verificată. Este o modalitate excelentă de a privi imaginile de fundal care alimentează codul, precum și de a vă inspira pentru actualizarea propriilor campanii. Doar mergeți la notele emisiunii de astăzi pentru link.

Și asigurați-vă că vă abonați la Delivering on iTunes sau Spotify pentru a asculta episoadele viitoare în care vom cerceta mai multe tehnici pentru a construi e-mailuri HTML mai bune.