E-mail Pixel Art: Cea mai rară și mai cool tactică de design defensiv

Blocarea imaginilor este obișnuită, unii clienți de e-mail dezactivând imaginile în mod implicit și unii abonați dezactivând imaginile pentru a salva date mobile sau din alte motive. Din acest motiv, agenții de marketing prin e-mail trebuie să utilizeze tehnici de design defensiv pentru a se asigura că mesajul lor este transmis atunci când imaginile sunt dezactivate.

Designul defensiv, care ajută și la accesibilitatea e-mailului, constă din trei tactici cheie:

1. Folosind HTML sau text live cât mai mult posibil, în loc să încorporați tot textul în imagini
2. Adăugarea de text ALT la imaginile dvs. sau, mai bine, text ALT stilizat
3. Utilizarea culorilor de fundal pe celulele tabelului

Să ne concentrăm pe ultima tactică.

Unul dintre lucrurile importante care se întâmplă atunci când imaginile sunt blocate este că e-mailul tău își pierde structura. E-mailul se aplatizează și totul începe să se estompeze. Folosirea textului HTML și stilarea dimensiunii și culorii textului dvs. ALT poate ajuta la crearea structurii și a ierarhiei, dar culorile de fundal sunt și mai puternice.

Adăugarea unei culori de fundal la o celulă de tabel creează bannere, blocuri de conținut și este esențială pentru realizarea butoanelor antiglonț. Acest e-mail Twitter demonstrează cum culorile de fundal de pe celulele tabelului pot menține integritatea designului unui e-mail atunci când imaginile sunt blocate.

Este grozav, dar celulele de tabel cu culoarea de fundal pot face mai mult - mult mai mult. Pe lângă faptul că sunt folosite împreună cu textul HTML pentru a crea conținut de e-mail care nu este afectat de blocarea imaginilor, culorile de fundal ale celulelor de tabel pot fi folosite ca alternativă pentru imagini.

Faceți acest lucru prin crearea unui mozaic dintr-o serie de tabele imbricate cu culori de fundal aplicate celulelor tabelului. Apoi tăiați imaginea astfel încât fiecare felie să se potrivească perfect în celulele tabelului din mozaicul dvs. În acest fel, atunci când imaginea suprapusă este blocată și dispare, apare mozaicul de bază al celulelor colorate din tabel.

Exemple de e-mail Pixel Art

Pentru a demonstra puterea mozaicurilor de e-mail, iată câteva exemple, fiecare arătând e-mailul cu imagini activate în stânga și imagini dezactivate în dreapta:

Mothercare creează pixel art al căruciorului lor în acest e-mail, care folosește, de asemenea, în mod liberal textul ALT în stil.

Pizza Express folosește pixel art în acest e-mail de naștere declanșat, care include, de asemenea, o imagine personalizată și textul ALT personalizat corespunzător.

PlayStation New Zealand folosește un mozaic de e-mail pentru a crea simbolul Autoboților, jucând inteligent pe sloganul „roboților deghizați” al lui Transformers.

Benton Lingerie surprinde sentimentul mesajului de e-mail de Ziua Mamei, folosind pixel art-ul de e-mail pentru a crea o inimă mare roz.

Considerații de proiectare și strategice

Înainte de a crea un mozaic de e-mail, luați în considerare următoarele probleme de design și strategie:

1. Pixel art-ul pentru e-mail poate deveni greu , ceea ce poate duce la tăierea e-mailului în Gmail dacă e-mailul depășește 102 KB. Așa că păstrați lucrurile simple, concentrându-vă pe o imagine pixel art minim viabilă.

De exemplu, inima pixelată a lui Benton Lingerie ar fi putut fi mult mai conturată odată cu dublarea sau triplarea numărului de celule din tabel. Dar execuția lor este foarte clar o inimă și la fel este foarte eficientă așa cum este.

2. Pixel art-ul prin e-mail poate reprezenta multă muncă suplimentară , așa că, în general, este mai bine să le rezervați pentru e-mailuri cu volum mare sau cu impact ridicat. Aceasta înseamnă, probabil, să le folosiți pentru e-mailuri cheie de difuzare pentru anunțuri de produse noi, campanii Cyber ​​Monday și evenimente mari similare. Dar înseamnă și să le luați în considerare pentru e-mailurile declanșate cu volum mare, cum ar fi e-mailul de naștere Pizza Express de mai sus.

În mod similar, le puteți lua în considerare pentru elementele de e-mail cu volum mare, cum ar fi sigla dvs. sau un element de subsol. Dacă faceți acest lucru, implementați-le ca parțiale, astfel încât să puteți modifica sau actualiza pixel art în toate instanțele siglei sau subsolului dvs.

Indiferent de abordarea pe care o alegeți, doriți să fiți sigur că veți beneficia de impactul efortului suplimentar de proiectare.

3. Pixel art-ul prin e-mail nu este întotdeauna compatibil cu designul receptiv. În funcție de modul în care codificați e-mailul receptiv, este posibil ca mozaicurile de e-mail să nu se traducă din versiunea desktop în versiunea mobilă. Ascunderea și stivuirea conținutului de e-mail în versiunea dvs. mobilă vă poate distruge pixelul de e-mail. Asigurați-vă că luați în considerare acest lucru atunci când vă proiectați mozaicul de e-mail.

4. Pixel art prin e-mail nu trebuie să încerce să înlocuiască imaginile blocate. După cum am văzut în exemplele PlayStation și Benton Lingerie, pixel art-ul e-mailului poate fi total diferit de imaginile din e-mail. Nu simți că trebuie să creezi întotdeauna versiunea pe 8 biți a imaginii tale eroului. Uneori, transmiterea spiritului unei imagini este la fel de eficientă – și poate fi mai ușor de codificat și mai puțin de furnizat.

5. Este mai probabil ca unele e-mailuri să aibă imagini blocate. Posibilitatea de a avea imaginile dintr-un e-mail blocate nu este uniformă. Șansa de blocare a imaginii este mai mare atât la începutul unei relații prin e-mail, cât și la sfârșit.

Pentru primele e-mailuri pe care le trimiteți unui abonat, acesta poate avea imagini blocate pentru expeditori necunoscuti. Aceasta înseamnă că este posibil să doriți să dedicați mai mult efort designului defensiv pentru e-mail-urile de bun venit și pentru e-mailurile tranzacționale.

Pentru e-mailurile care vin cu întârziere într-o relație, adică după o perioadă considerabilă de inactivitate, imaginile pot fi blocate deoarece se află în dosarul de spam al abonatului. Aceasta înseamnă că poate doriți să depuneți un efort suplimentar de design defensiv în e-mailurile de reangajare și e-mailurile de re-permisiune.

În ambele cazuri, acest efort suplimentar poate include pixel art prin e-mail, pe lângă utilizarea liberală a textului HTML și a textului ALT cu stil.

Optimizați pentru blocarea imaginilor Litmus Builder vă permite să codificați cu ușurință e-mailurile și să le previzualizați în peste 70 de aplicații și dispozitive de e-mail. Comutați și dezactivați imaginile cu un singur clic pentru a vă perfecționa pixel art-ul pentru e-mail. Creați e-mailuri grozave →

Cum să faci e-mail Pixel Art

Având în vedere aceste considerente, care este cea mai bună modalitate de a crea pixel art prin e-mail?

Pentru a începe, vă recomandăm:

• Convertor imagine în tabel
• Câini optimizați prin e-mail
• Aplicație imagine-HTML

Cu toate acestea, este posibil să nu le găsiți utile în toate cazurile. De cele mai multe ori, ne așteptăm că veți dori să vă construiți manual pixel art-ul pentru e-mail.

Dacă acesta este traseul pe care îl urmați, iată pașii principali pe care va trebui să-i faceți:

1. Schițați o imagine de e-mail pixel art minim viabilă pe hârtie milimetrică sau în software-ul de design ales.
2. Utilizați instrumentul slice din Photoshop sau alt software de design pentru a vă împărți imaginea în dimensiunile de bloc necesare pentru a vă crea mozaicul de e-mail și a le salva ca imagini separate. Utilizați o convenție de denumire a fișierelor care ușurează să vă puzzle imaginea generală înapoi împreună.
3. Folosind o serie de tabele imbricate în interiorul unui tabel, creați blocurile în pozițiile de care aveți nevoie pentru a vă adapta designului.
4. Pentru a vă asigura că imaginile tăiate se potrivesc perfect, specificați că cellpadding=„0”, cellspacing=„0” și chenar=„0” sunt setate pentru tabelele dvs.
5. Aplicați bgcolorul necesar pentru fiecare dintre celulele din tabel.
6. Previzualizați-vă e-mailul cu imaginile dezactivate pentru a vă asigura că este redat conform intenției.

Iată un exemplu grozav de pixel art prin e-mail din buletinul informativ EmailWeekly de la Action Rocket. Selectați „Toggle Images” în interfața Litmus Builder pentru a vizualiza e-mailul cu imaginile dezactivate.

O tactică rară și neașteptată

Agenții de marketing prin e-mail înțeleg necesitatea de a proiecta imagini pentru oprire. Știm asta, deoarece 83% dintre mărci folosesc textul ALT pentru imaginile lor de e-mail întotdeauna sau des, conform Sondajului Litmus din 2018 privind starea e-mailului a aproape 3.000 de agenți de marketing.

Cu toate acestea, în timp ce adăugarea de text ALT este destul de simplă, crearea pixelilor de e-mail este orice altceva. Drept urmare, aproape 77% dintre mărci nu folosesc niciodată mozaicuri de e-mail.

Pentru mărcile îndrăznețe, aceasta este o oportunitate. Raritatea acestei tactici înseamnă că este o modalitate eficientă de a surprinde și de a încânta abonații, oferindu-le neașteptate, iar mai multe mărci se îndreaptă. Mai mult de 23% dintre mărci folosesc cel puțin rar pixel art prin e-mail, ceea ce este în creștere față de 18% în 2017.

Vrei mai multe resurse de genul acesta?

Abonați-vă la Litmus Weekly pentru a obține doza săptămânală de inspirație pentru e-mail, sfaturi și trucuri, chiar în căsuța dvs. de e-mail.

Intră pe listă →