Redare e-mail Outlook: Cum am învățat să nu mă mai îngrijorez și să iubesc Outlook

Publicat: 2021-07-02

Cu toții am fost acolo. Creați un e-mail frumos cu GIF-uri interesante, butoane accesibile și imagini atrăgătoare. Apoi îl testezi și arată grozav... cu excepția Outlook, unde este complet stricat. Oamenii nu se pot implica așa cum doriți cu un e-mail rupt.

Outlook a fost o urgie a agenților de marketing prin e-mail de mult timp, dar trebuie să fie așa? Cum putem lucra cu el? Citiți mai departe pentru a afla cum am ajuns să iubesc Outlook, în ciuda numeroaselor sale defecte. Voi acoperi:

Versiuni de Outlook
Sfaturi pentru ciudateniile Outlook
Codul pentru a face remedieri

Multe versiuni de Microsoft Outlook

Numele „Outlook” acoperă mai mulți clienți de e-mail diferiți cu câteva motoare de randare diferite și cel puțin două setări de vizualizare diferite. Toate acestea pot fi o durere de cap uriașă dacă o lași. Să ne scufundăm și să vedem dacă îl putem îndrepta puțin.

Outlook 2007-2019

Acestea sunt versiunile pentru desktop Windows ale Outlook. Acestea folosesc Word ca motor de randare, ceea ce avea sens într-un moment în care e-mailul era ca și cum scrii scrisori. Ah, vremuri mai simple. Dar, pentru agenții de marketing prin e-mail, nu o reduce pentru redarea e-mailurilor HTML.

120 DPI (puncte pe inch) adaugă la complexitate. Utilizatorii Windows pot alege 120 DPI pentru a-și crește rezoluția ecranului. Dacă o fac, clienții de e-mail desktop vor respecta acest lucru și vor actualiza imaginile și textul pentru a fi mai mari. Ceea ce poate face ravagii pe e-mailul tău.

Outlook pentru Mac

Aceasta este versiunea pentru desktop pentru Mac a Outlook. Utilizează Webkit ca motor de randare. Ceea ce înseamnă că este de obicei la egalitate cu Apple Mail și iOS în ceea ce privește redarea e-mailurilor. Dacă arată bine în browser, există șanse decente să arate bine aici.

Outlook.com și aplicațiile mobile Outlook

Acești clienți folosesc Webkit sau motoare de randare bazate pe Webkit, astfel încât oferă o redare HTML bună și de obicei nu vă sparg e-mailurile.

Outlook Office 365

Există două versiuni diferite de Outlook Office 365, clientul de e-mail desktop și clientul de e-mail bazat pe web. Versiunea desktop este similară cu Outlook 2007-2019 și folosește Word ca motor de randare (greu pentru e-mail). Clientul de e-mail bazat pe web folosește Webkit sau Blink și redă e-mailurile în mod similar cu Outlook.com (mult mai ușor).

Verificator linie de subiecte de turnesol

Gata cu e-mailurile sparte

Previzualizați-vă e-mailurile pe peste 90 de clienți de e-mail, aplicații și dispozitive, inclusiv toate versiunile de Outlook, pentru a asigura o experiență de abonat fără erori, conform mărcii.

Aflați cum →

Un singur Outlook pentru a le guverna pe toate

În ianuarie, Microsoft și-a anunțat viziunea „One Outlook” de a înlocui clienții desktop cu un client care funcționează peste tot începând cu 2022.

Noul client de e-mail se va baza pe aplicațiile web Outlook actuale. Așadar, sunt mari speranțe că va avea un motor de randare bazat pe Webkit și va reda bine e-mailurile HTML. Din păcate, toți acești clienți desktop vechi nu vor dispărea pur și simplu atunci când se va întâmpla asta, așa că vor trebui să fie suportați într-o oarecare măsură.

Fă sau nu, nu există nicio încercare

Ți se învârte încă capul?

Dacă este, atunci haideți să-l distilăm pentru dvs.: concluzia principală este că lucrăm cu două motoare de randare diferite—Word și Webkit. Webkit este mai ușor de codificat, iar Word este mai dificil. Nici unul nu este cu adevărat bun sau rău. Ele necesită doar abordări diferite și au particularități diferite care trebuie luate în considerare.

Să ne uităm la unele dintre problemele comune de randare în clienții desktop Outlook și cum să le rezolvăm.

Includeți atributele de lățime și înălțime pe imagini

Outlook nu acceptă stiluri CSS pentru lățimi și înălțimi, iar dacă nu includeți atributele de lățime și înălțime, Outlook vă va afișa imaginea la dimensiunea reală. Dacă utilizați imagini retină (ceea ce ar trebui să fiți), asta înseamnă că veți obține imagini uriașe care vă vor sparge e-mailurile.

perspectiva — Imagine retina fără un atribut de lățime în Outlook, făcând e-mailul mai larg

Includeți text ALT

Nu lăsați mesajul de securitate al Outlook să vorbească pentru imaginile dvs. Asigurați-vă că includeți text ALT. Mai ales că Outlook nu afișează imagini în mod implicit decât dacă oamenii activează funcția.

Folosește tabele

E-mailul a parcurs un drum lung și puteți utiliza blocurile <div> în o mulțime de clienți de e-mail, dar Outlook nu este unul dintre aceștia. Outlook va ignora majoritatea stilurilor pe care le aplicați etichetelor <div>, inclusiv lățimi și umplutură. Prin urmare, este important să utilizați în schimb etichetele <table> pentru conținutul dvs.

Utilizați codul specific Outlook pentru a rezolva problemele de randare

Este posibil să nu vă rezolve toate problemele, dar de multe ori includerea unor CSS specifice Outlook vă poate ajuta să rezolvați o problemă de randare pe care o vedeți doar în Outlook. Sau puteți ascunde un bloc mic care nu funcționează pe Outlook și puteți utiliza cod condiționat pentru a afișa o versiune care ar funcționa pentru o anumită versiune de Outlook. (Mai multe despre codul condiționat mai târziu.)

Adăugați înălțimi de linii la imaginile mici sau la celulele tabelului

Outlook stabilește o înălțime minimă pentru celulele și imaginile tabelului. Deci, dacă utilizați o celulă de tabel ca distanțier sau aveți o imagine mică, asigurați-vă că adăugați un atribut de înălțime de linie la element egal cu înălțimea pe care doriți să apară. De exemplu:

<tr>
     <td style="font-size: 5px; line-height: 5px; mso-line-height-rule: exactly;">&nbsp;</td>
</tr>

Corectați problemele de scalare DPI

Pe computerele Windows, există o setare globală pe care oamenii o pot modifica (sau, în unele cazuri, sunt setate mai sus în mod implicit) care mărește textul și elementele grafice pentru a le face mai mari și mai ușor de citit. Acest lucru este grozav pentru accesibilitate, dar nu atât de grozav pentru Outlook, deoarece doar unele elemente sunt extinse, în timp ce altele nu.

Din fericire, există o remediere. Mai întâi, trebuie să adăugați un spațiu de nume XML la eticheta HTML:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

Apoi, adăugați un cod pentru a remedia scalarea imaginii chiar înainte de eticheta </head>:

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

Și, în sfârșit, asigurați-vă că includeți orice lățime setată ca proprietate CSS cu pixeli și nu ca atribut pe tabelele dvs.

✗ Nu aceasta cu width="600" :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="600">

Da, așa cu stil="width:600px;" :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">

Aceasta vă va rezolva majoritatea problemelor pentru clienții de 120 DPI. Aruncă o privire la această comparație alăturată înainte și după această remediere:

Outlook 2013 la 120 DPI (fără remediere)	Outlook 2013 la 120 DPI (cu remediere)

Ce diferență, nu?

Nu vă așteptați ca efectele de hover să funcționeze

Outlook nu acceptă pseudoclasa hover. Ar trebui să îl includeți în continuare pentru a crea interacțiuni pentru a crește accesibilitatea e-mailului dvs. în alți clienți de e-mail, dar nu vă mirați când nu funcționează în Outlook.

Nu depindeți de un GIF animat pentru a vă exprima punctul de vedere

Clienții desktop Outlook nu acceptă GIF-uri animate. Puteți avea ca cadrul inițial să afișeze imaginea pe care doriți să o afișați în Outlook sau puteți ascunde GIF-ul animat din Outlook și puteți utiliza codarea condiționată pentru a afișa o imagine statică pe care o doriți. (Din nou, mai multe despre codificarea condiționată în continuare.)

Nu utilizați conținut interactiv fără o rezervă

E-mailurile interactive sunt un mare nu pentru Outlook. Acestea depind fie de codarea AMP, fie de hack-ul casetei de selectare, ambele nefiind acceptate pe Outlook.

În cazul AMP pentru e-mail, fișierul HTML va fi afișat în locul celui AMP, deci nu există codare suplimentară pentru asta. Pentru interactivitatea hackbox-ului de selectare, va trebui să ascundeți conținutul interactiv și să afișați soluția de rezervă Outlook. Din nou, codarea condiționată este prietenul tău aici.

Nu adăugați umplutură sau margini imaginilor

Outlook elimină umplutura și marginile imaginilor. În schimb, asigurați-vă că adăugați umplutură la celula tabelului din jurul imaginii. Sau dacă aveți imaginea în aceeași celulă ca și copie, adăugați o marjă etichetei din jurul copiei (<h1>, <h2>, <p> etc.).

Frica este ucigașul e-mailului: codul de care aveți nevoie pentru a vă înfrunta temerile Outlook

Codarea unui e-mail excelent pentru clienții de e-mail desktop ai Outlook necesită săriți în afara HTML și CSS „normal”. Există trei tipuri de cod care vă vor ajuta să vă strălucească e-mailurile în acești clienți: codare condiționată, proprietăți MSO și VML.

Poate fi înfricoșător să lucrezi cu ceva nou, dar promit că merită. Și acel moment când îl faci să funcționeze corect? Veți simți că tocmai ați făcut Kessel Run în mai puțin de 12 parsecs.

Codare condiționată

Codarea condiționată este o codare care analizează ce client de e-mail sau browser folosește abonatul tău și afișează codul numai dacă îndeplinește condiționalul din comentariu, cum ar fi:

<!--[if mso]>
<p>This content is only visible on Outlook desktop clients</p>
<![endif]-->

Puteți chiar să utilizați acest lucru pentru a viza versiuni specifice ale clienților desktop Outlook adăugând numerele de versiune:

<!--[if mso 14]>
<p>This content is only visible on Outlook 2010 desktop client</p>
<![endif]-->

Totuși, Outlook nu este simplu, așa că numerele versiunii nu corespund cu numele clientului de e-mail:

Outlook 2000 = mso 9
Outlook 2002 = mso 10
Outlook 2003 = mso 11
Outlook 2007 = mso 12
Outlook 2010 = mso 14
Outlook 2013 = mso 15
Outlook 2016, Outlook 2019 și Office 365 desktop = mso 16

Și apoi puteți deveni mai complicat prin direcționarea unei game de clienți cu mai puțin de (lt), mai mare decât (gt), mai mic sau egal cu (lte) sau mai mare sau egal cu (gte). De exemplu:

<!--[if (gte mso 9) | (lte mso 11)]>
<p>This content is only visible on Outlook 2000 to Outlook 2003</p>
<![endif]-->

Deci, dacă vedeți doar niște lucruri sălbatice care se întâmplă pe un anumit client, puteți viza în mod specific acel client și ascunde și afișa conținut mai bun pentru acesta.

De asemenea, puteți utiliza comentarii condiționate pentru a ascunde conținutul din Outlook spunând „dacă !mso” înseamnă „dacă nu mso”:

<!--[if !mso]><!-->
<p>This is visible on anything except Outlook desktop clients</p>
<!--<![endif]-->

Ceva de reținut: codul condiționat funcționează numai pe clienții desktop Outlook. Deoarece aici intră în joc o mulțime de probleme, probabil că veți avea nevoie de acestea mai mult decât de orice remediere pentru clienții de webmail.

Dar există modalități de a viza și clienții web, deși nu există nicio modalitate de a viza un client web Outlook peste celălalt. Deci, atunci când vizați Outlook.com, veți viza și clientul web Office 365 (dar nu și clientul desktop).

Puteți viza clienții web Outlook exploatând faptul că Outlook adaugă „x_” la toate numele claselor, dar nu face acest lucru pentru selectorul de atribute. Deci, dacă aveți o clasă „foo” și doriți să o tratați diferit pentru clienții web Outlook, o puteți viza cu acest cod:

[class~="x_foo"] { }

(Mulțumim lui Mark Robbins pentru această remediere și lui Dylan Smith pentru howtotarget.email.)

Proprietățile MSO

După cum am menționat mai sus, există CSS specific pentru Outlook pe care îl puteți adăuga și care va afecta doar clienții de e-mail desktop Outlook. Iată câteva pe care le veți găsi care sunt destul de comune și poate ați auzit deja de ele:

mso-hide: toate;

Această proprietate va ascunde totul de la clienții desktop Outlook. Este eliminat atunci când e-mailul este redirecționat, așa că aveți grijă să îl utilizați singur dacă este o funcție de care știți că abonații dvs. profită adesea. Îl puteți asocia cu codul condiționat „dacă nu mso” dacă sunteți un codificator „în cazul în care”.

mso-line-height-rule: exact;

Această proprietate asigură că Outlook afișează înălțimea liniei la ceea ce ați desemnat în proprietatea înălțimea liniei. Fără el, Outlook nu vă respectă neapărat înălțimile liniilor. Dacă lucrați într-o industrie în care precizia este cheia, probabil că sunteți foarte familiarizat cu această proprietate.

mso-padding-alt

Acesta este puțin mai puțin comun, dar a trebuit să îl folosesc din când în când. Vă permite să declarați umplutura care este specifică pentru Outlook. Deci, dacă umplutura normală pe care o aveți într-o celulă nu este redată corect în Outlook, puteți utiliza mso-padding-alt pentru a seta valori care se potrivesc cu designul dvs. pentru Outlook.

mso-ansi-font-size

Acesta este altul pe care îl folosesc doar ocazional. Vă permite să setați dimensiunile fonturilor specifice pentru Outlook. Deci, dacă Outlook redă fontul cu o atingere mai mare decât alți clienți de e-mail și ajungeți cu o linie finală scurtă de copie pe care nu ați dorit-o, adăugați mso-ansi-font-size și setați o dimensiune a fontului care să se potrivească copia dvs.

Există mult mai multe proprietăți MSO pe care le puteți utiliza, așa că mergeți mai departe și vedeți dacă există ceva care va rezolva o problemă de randare pentru dvs.

VML

VML înseamnă Vector Markup Language. Este versiunea Microsoft de SVG, dar limbajul a fost depreciat și este foarte rar folosit (yay email!). Microsoft are documentația pentru VML arhivată online, așa că puteți încă să căutați cum să o utilizați pentru a crea vectori în Outlook, unde este încă acceptat. Teoretic, atunci când Microsoft trece la modelul „One Outlook”, vom putea lăsa VML în urmă.

Asigurați-vă că includeți declarația de spațiu de nume VML. De obicei, îl adaug la elementul <html> din șablonul meu boilerplate, astfel încât să pot folosi VML ori de câte ori am nevoie:

<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">

Odată ce aveți acest lucru, puteți adăuga orice VML la codul dvs. în cadrul condiționalelor MSO:

<!--[if mso]>
    <v:rect fillcolor="blue" stroked="false" style="width:200px; height:50px;"></v:rect>
 <![endif]-->

Codul respectiv ar face un dreptunghi albastru de 200 px pe 50 px. Poate că nu este ceva pe care îl puteți folosi într-un e-mail, dar puteți utiliza VML pentru a adăuga butoane cu colțuri rotunjite la cod, imagini de fundal și degrade de fundal. Campaign Monitor are două instrumente create de Stig pentru a vă ajuta să creați imagini de fundal sau butoane cu colțuri rotunjite. Am descoperit că acestea sunt o modalitate excelentă de a adăuga VML atunci când tocmai înveți.

De asemenea, puteți utiliza VML pentru a crea poziționări absolute false, efecte de umbră sau o alternativă pentru a sprijini arta CSS în Outlook. Există multe pe care le puteți face cu VML odată ce vă scufundați.

Trăiește mult și e-mail

Outlook a fost multă vreme nenorocirea agenților de marketing prin e-mail, dar nu trebuie să fie.

Cu instrumentele potrivite, puteți crea e-mailuri frumoase care se redau corect în Outlook. Consultați resursele din această postare pentru a vă construi cotele de codare Outlook și testați-le în e-mailurile dvs. cu Litmus Builder și Previzualizări e-mail. Gândiți-vă la codificarea Outlook ca la un puzzle care așteaptă să fie rezolvat și s-ar putea să vă descoperiți că iubești Outlook și toate ciudateniile sale.

Testați-vă e-mailurile în Outlook cu Litmus

Vedeți cum vor arăta e-mailurile dvs. în Outlook și remediați orice problemă înainte de a apăsa pe trimitere. Cu Litmus, aveți încredere că creați e-mailuri perfecte cu pixeli cu care se pot interacționa abonații dvs.

Începeți perioada de încercare gratuită →

5 sfaturi pentru a vă pregăti programul de e-mail pentru protecția confidențialității e-mailului (și să aveți în continuare succes)

Aflați cum vă puteți pregăti acum programul de marketing prin e-mail pentru succes fără tarife deschise chiar și după lansarea Apple Mail Privacy Protection.

Citeste mai mult