Aștepta. Ce tocmai sa întâmplat cu e-mailul meu? Înregistrare webinar

Publicat: 2016-02-11

Aproape fiecare designer și dezvoltator trebuie să creeze e-mailuri la un moment dat în cariera lor, indiferent dacă doresc sau nu. Însă numărul mare de clienți de e-mail – fiecare cu propriile probleme de redare – îi face pe mulți să clătinească din cap, înfrânți, uluiți de atacul problemelor de design de e-mail.

După ce am trăit multe astfel de scenarii, ne-am unit forțele cu Alex Mohr de la Sendwithus pentru a arunca puțină lumină asupra celor mai frecvente probleme cu care se confruntă oamenii nou la e-mail și, mai important, câteva soluții la aceste probleme.

Dacă nu ați avut ocazia să participați la webinar, „Așteptați. Ce s-a întâmplat cu e-mailul meu?”, nu vă faceți griji. Puteți descărca diapozitivele și puteți verifica înregistrarea de mai jos.

Vizualizează diapozitive și înregistrări →

Oricât am încerca, nu am putut ajunge la fiecare întrebare adresată în timpul webinarului. Și au fost unele grozave. Așadar, folosesc această oportunitate pentru a răspunde la unele dintre întrebările cele mai frecvente adresate de cei care doar își înfundă degetele în marketing prin e-mail și design.

De ce sunt Google și Microsoft atât de proaste la randarea e-mailurilor?

Toți clienții de e-mail au probleme la redarea HTML și CSS - cele două limbi folosite pentru a codifica campaniile de e-mail. Acest lucru se datorează faptului că toate folosesc motoare de randare diferite. Motoarele de randare sunt părțile de bază ale aplicației de e-mail care determină ce cod este redat pe ecran și cum este redat de fapt.

În cazul Gmail de la Google, un preprocesor este folosit pentru a elimina anumite părți ale codului dintr-un e-mail din motive de securitate. În timp ce aproape orice alt client de webmail și-a dat seama până acum, Gmail elimină în esență stilurile CSS încorporate în <head> unui e-mail. Și, deoarece mulți designeri folosesc aceste stiluri pentru a determina cum arată campania lor, acele e-mailuri au de suferit în Gmail.

Acest lucru poate fi vizibil în special pe clienții de telefonie mobilă Gmail, deoarece interogările media - declanșatoarele CSS utilizate în designul responsive tradițional - se află în acea secțiune. Acesta este motivul pentru care au fost dezvoltate tehnici precum codarea hibridă (sau spongioasă), ca o soluție directă la capabilitățile slabe de randare ale Gmail.

În cazul clienților Microsoft Outlook, problema constă în faptul că Outlook folosește de fapt Microsoft Word ca motor de randare. Așa este, un editor de text îmbogățit, folosit atât de studenți, cât și de oamenii de afaceri, este folosit pentru a reda codul HTML și CSS (sau cel puțin încearcă să o facă). În timp ce versiunile mai vechi de Outlook foloseau versiunea instalată a browserului web Microsoft, Internet Explorer, pentru a reda codul de e-mail, începând cu Outlook 2007, Word a fost folosit pentru a facilita editarea textului îmbogățit pentru utilizatorii Outlook.

Din păcate pentru designerii de e-mail, Word are suport foarte limitat pentru HTML și CSS, care sunt utilizate în mod obișnuit pe web și în campaniile de e-mail. Acest suport limitat pentru standardele web are ca rezultat campanii de e-mail care par rupte în Outlook. Înțelegerea asistenței este primul pas pentru ca e-mailurile să arate bine în Outlook sau în orice client de e-mail.

Iată câteva resurse pentru a începe să înțelegeți mai bine suportul clientului de e-mail pentru HTML și CSS:

Ghidul final pentru CSS al Campaign Monitor
Înțelegerea Gmail și CSS: partea 1 și partea 2
Un ghid pentru redarea diferențelor în clienții Microsoft Outlook
Modul în care dispozitivele, sistemele de operare, aplicațiile și motoarele afectează redarea
Probleme de randare pe desktop? Concentrați testarea inițială pe o mână de motoare de randare
Redarea webmailului explicată: de ce preprocesoarele sunt inamicul

Cum te descurci cu Outlook care nu afișează fonturile potrivite atunci când folosești fonturi web?

Fonturile web, fonturile difuzate pe web în loc să fie instalate pe dispozitivul unui utilizator, sunt din ce în ce mai populare. Deoarece le permit companiilor să rămână pe marca cu tipografia lor și să încurajeze textul live, sunt un instrument ideal pentru agenții de marketing prin e-mail. Din păcate, acestea nu sunt acceptate de toți clienții de e-mail. Și, în cazul Outlook, lipsa suportului duce la situații în care Times New Roman este afișat în locul oricăror fonturi de rezervă declarate în HTML.

Am abordat această problemă înainte cu o soluție care necesită o clasă HTML pe textul afectat și unele CSS specifice Outlook. Deși această soluție încă funcționează bine, o soluție mai curată și mai ușor de întreținut a câștigat acțiune. Propusă inițial de oamenii de la Action Rocket, această soluție necesită folosirea regulilor @font-face pentru a difuza fonturi și împachetarea lor într-o interogare media în capul e-mailului dvs.

 <style type="text/css"> @media screen { @font-face { font-family: 'Family Name'; font-style: normal; font-weight: 400; src: local(), local(), url() format(); } } </style>

Această soluție este o abordare excelentă, deoarece nu necesită atribute de clasă HTML care poluează codul dvs., asigurând totodată că Outlook revine la stiva dvs. de fonturi declarată. Consultați articolul original al Action Rocket pentru a afla mai multe despre tehnică.

Cum împiedicați apariția linkurilor albastre pe mobil?

Dispozitivele mobile sunt instrumente utile. Pentru a le face și mai utile, companii precum Apple au adăugat o funcție la clientul lor de e-mail care le permite utilizatorilor să adauge rapid informații la contactele, calendarul sau aplicațiile pentru hărți. Sunt șanse mari să fi văzut așa ceva într-un e-mail:

Adresele, datele, orele și numerele de telefon specifice de tip text sunt evidențiate ca link-uri subliniate în albastru pentru a arăta că se poate interacționa cu acestea. Din păcate, aceste legături albastre cauzează uneori probleme atât din perspectiva designului, cât și din perspectiva accesibilității. Când textul deschis pe un fundal întunecat devine albastru, acele linkuri sunt acum greu (dacă nu imposibil) de citit, darămite să interacționeze cu acestea.

Am mai scris despre o soluție la această problemă care vă permite să mențineți stiluri pe acel text, dar, din nou, o soluție mai nouă câștigă popularitate. Se pare că includerea următoarei fragmente distruge linkurile albastre pe iOS fără a fi nevoie de un marcaj suplimentar în HTML. Doar includeți-l în capul e-mailului și trimiteți-l.

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

Unii participanți la webinar au subliniat cu inteligență că CSS-ul de mai sus vizează în mod special dispozitivele Apple. În timp ce testele mele recente au arătat că linkurile albastre nu au reprezentat o problemă pe Android, unii membri ai comunității Litmus au întâmpinat probleme cu Android și Gmail care leagă lucruri precum numerele de telefon. Consultați discuția din Comunitate pentru a vedea câteva dintre soluțiile inteligente.

Care este cel mai bun mod de a gestiona imaginile receptive? Ce zici de imaginile retinei?

Pe măsură ce tot mai mulți oameni adoptă designul de e-mail receptiv, nevoia de imagini receptive a crescut. Cel mai bun sfat al meu pentru gestionarea imaginilor receptive este o tehnică pe care am luat-o pentru Julie Ng, dezvoltatorul din spatele minunatului Buletin informativ pentru dezvoltare e-mail.

Practic, declarați dimensiunile imaginii dvs. în mai multe moduri în cadrul etichetei img. Pentru a preveni ca unii clienți de e-mail să afișeze imagini retină mai mari la dimensiunea lor completă, declarați lățimea folosind atributul width. Acest lucru oferă o lățime bună a liniei de bază în pixeli. Pentru e-mailurile receptive, apoi declarați lățimea, lățimea maximă și lățimea minimă a imaginii ca CSS inline. Iată un exemplu:

 <img alt="Hello" src="http://example.com/image.png" width="600" border="0">

Desigur, veți dori să furnizați un text ALT pentru când imaginile sunt dezactivate și să declarați display:block; pentru a preveni spațiile albe inutile în jurul imaginii. Dacă aveți nevoie de control suplimentar asupra imaginii, o puteți viza cu o clasă și CSS în capul e-mailului dvs. Nu uitați, CSS încorporat nu este acceptat peste tot.

Când vine vorba de imagini cu retină, cel mai bun pariu este să creați pur și simplu imaginile la dimensiunea de afișare de două ori mai mare decât cea prevăzută pentru imaginea din e-mailul dvs. De exemplu, dacă aveți o imagine de 600 px x 200 px, ați crea și salva-o ca imagine de 1200 px x 400 px. Includeți-l în mod normal în e-mailul dvs. Atributul de lățime pe care l-am menționat mai devreme îl va împiedica să se afișeze ca o imagine absurd de uriașă în clienți precum Outlook, iar imaginile dvs. vor arăta frumos și clar pe dispozitivele cu ecrane retină.

Un sfat pentru cineva care dorește să folosească GIF-uri animate într-un e-mail?

Du-te! GIF-urile animate sunt o modalitate fantastică de a adăuga mișcare și interes campaniilor tale de e-mail. Ne place atât de mult tehnica încât am scris un ghid extins pentru utilizarea GIF-urilor animate în e-mail.

Doar intrați înțelegând că nu sunt acceptate peste tot, cel mai notabil în Microsoft Outlook, care afișează doar primul cadru al animației. Este o idee bună să vă asigurați că orice imagini din GIF sunt folosite în scopuri ilustrative, nu pentru a transmite informații vitale abonaților. Acest tip de informații ar trebui să fie întotdeauna afișate ca text live în e-mail, astfel încât abonații să le poată citi chiar și atunci când lucruri precum GIF-urile și imaginile sunt dezactivate.

În timp ce mulți oameni cred că GIF-urile sunt doar pentru distracție, o mulțime de companii de produse folosesc GIF-uri animate pentru a arăta interacțiunile cu produsele lor și, în esență, pentru a-i învăța pe oameni cum să folosească produsele chiar înainte de a le atinge. Iată un exemplu grozav de la MailChimp:

GIF-urile sunt un plus grozav pentru setul de instrumente al oricărui agent de marketing prin e-mail. Un sfat ar fi totuși să le folosiți cu moderație. Dacă fiecare campanie conține o grămadă de GIF-uri, acestea își pierd rapid sentimentul de surpriză. Folosiți-le ocazional atunci când doriți cu adevărat să atrageți atenția asupra unei campanii sau spectacol de ceva cool.

Ce părere aveți despre utilizarea videoclipurilor în e-mail?

La fel ca GIF-urile animate, videoclipurile pot fi o modalitate excelentă de a atrage atenția unui abonat. Din păcate, videoclipurile în sine au și mai puțin suport între clienții de e-mail. Deși am putut odată să folosim un fundal video într-un e-mail, acesta a fost acceptat doar în Apple Mail și Outlook pentru Mac.

Totuși, asta nu ar trebui să te descurajeze să folosești videoclipuri în tandem cu e-mailul. Oamenii iubesc absolut videoclipurile, iar companiile folosesc din ce în ce mai mult marketingul video ca o modalitate de a crește implicarea cu utilizatorii. Cel mai bun mod de a folosi videoclipul în e-mail este să includeți o imagine statică a videoclipului cu un buton de redare în campania de e-mail care trimite către o pagină de destinație. Utilizatorii înțeleg imediat că este un videoclip și pot vizualiza videoclipul pe pagina de destinație.

În timp ce videoclipurile încorporate în e-mail ar permite o experiență plăcută pentru utilizator, prietenii noștri de la Wistia au spus câteva puncte bune despre motivul pentru care paginile de destinație sunt o soluție mai bună.

Videoclipul de pe o pagină de destinație poate fi reutilizat în altă parte. Este o resursă de conținut permanentă.
Paginile de destinație facilitează interacțiunile ulterioare. Odată ce ați terminat de vizionat un videoclip în căsuța de e-mail, ce vă mai rămâne de făcut?
Oamenii pot partaja mai ușor videoclipuri pe paginile de destinație.

Așadar, folosiți cu siguranță videoclipurile în campaniile dvs. de e-mail, dar, cel puțin deocamdată, împăcați-vă cu faptul că asta nu înseamnă vizionarea videoclipurilor într-un e-mail.

Există cadre de e-mail receptive pe care le recomandați?

Am menționat câteva resurse pentru a construi campanii de e-mail mai bune în webinar, dar merită repetate și extinse aici.

În ceea ce privește cadrele și șabloanele de e-mail receptive, există un număr disponibil:

Cerber de la Ted Goas
Planurile de e-mail ale MailChimp
Fundația Zurb pentru e-mailuri
MJML de la Mailjet

Unul dintre preferatele noastre este propriul nostru Slate, care include cinci șabloane receptive pentru o varietate de scenarii de trimitere. Indiferent de opțiunea pe care o alegeți, asigurați-vă că le testați pe clienții de e-mail pentru a vă asigura că abonații dvs. nu vor avea surprize.

Vizualizați diapozitivele și înregistrarea

Am acoperit mult teren în: „Stai. Ce s-a întâmplat cu e-mailul meu?” Pe lângă identificarea celor mai frecvente probleme de e-mail și soluțiile acestora, am abordat importanța testării fiecărui e-mail și chiar am analizat cum să testam e-mailurile tranzacționale cu Sendwithus. Dacă ați ratat-o prima dată, puteți descărca diapozitivele și puteți vizualiza înregistrarea de mai jos.

Vizualizează diapozitive și înregistrări →