Stăpânirea Outlook: O privire în urmă asupra problemelor comune de randare

Microsoft este unul dintre cei mai mari jucători din industria e-mailului. Microsoft Outlook și omologul său web Outlook.com dețin o cotă de piață de peste 10% în mod colectiv. Acesta este destul de mare!

Într-o lume în care utilizatorii pot alege dintr-o mare varietate de clienți de e-mail, cum a rămas Outlook atât de popular? Nu numai că Microsoft Office este instalat în mod obișnuit pe computerele companiilor din întreaga lume, dar multe computere de acasă și laptopuri care rulează Windows vin cu MS Office preinstalat. Clientul de e-mail implicit care este împachetat cu MS Office este... Outlook.

Apoi mai este Outlook.com, care și-a început cariera ca client de e-mail sub numele de Hotmail, încă din 1996. În 1997, Microsoft a achiziționat Hotmail pentru aproximativ 400 de milioane de dolari și a lansat Hotmail ca MSN Hotmail. Mai târziu a fost rebrandat din nou la Windows Live Hotmail. În cele din urmă, în 2013, Hotmail a fost înlocuit în întregime de Outlook.com. Cu istoria Outlook.com împletită cu Hotmail, nu ar trebui să fie surprinzător să știm că din 2015, Outlook.com avea peste 400 de milioane de utilizatori activi.

Probleme frecvente de randare în Outlook

Crearea de e-mailuri pentru Outlook a fost întotdeauna o provocare. Începând cu Outlook 2007, Microsoft a încetat să mai folosească Internet Explorer pentru a reda e-mailurile și a optat în schimb să folosească Microsoft Word ca motor de randare. Vești grozave pentru utilizatorii Microsoft Office, care ar putea copia și lipi fără probleme articole din Word sau Excel în e-mailurile lor Outlook. Vești nu prea grozave pentru agenții de marketing prin e-mail și dezvoltatorii care folosesc HTML pentru a-și construi e-mailurile. Încercați să copiați și să lipiți o pagină web HTML într-un document Word și veți obține o privire asupra modului în care Word traduce HTML.

Desigur, talentații dezvoltatori de e-mail-uri de acolo au început să-și lucreze magia pentru a dezvolta o multitudine de hack-uri de e-mail pentru a se asigura că e-mailurile lor frumoase HTML sunt redate la fel de frumos în Outlook. Nu este o sarcină ușoară, deoarece multe hack-uri tind să implice VML (Vector Markup Language), ceea ce nu este ceva ce ai tendința de a învăța în școala de hard-knocks pentru dezvoltarea e-mailului!

Iată o scurtă prezentare a unora dintre cele mai populare probleme cu care se confruntă dezvoltatorii de e-mail atunci când dezvoltă e-mailuri pentru Outlook:

Utilizarea tabelelor în dezvoltarea e-mailului

În dezvoltarea web modernă, puteți folosi containere, cum ar fi div-uri, pentru a conține conținut, cu tabele folosite exclusiv pentru date tabulare. Cu toate acestea, pentru a poziționa corect elemente precum div-urile într-o pagină HTML, sunt adesea necesare atribute CSS precum float și position.

Outlook nu acceptă aceste atribute. Pentru a vă structura corect e-mailurile pentru o capacitate maximă de redare între dispozitive/client/browser, dezvoltatorii folosesc tabele pentru a crea e-mailuri.

În timp ce tabelele funcționează pentru dezvoltatorii de e-mail de ani de zile, ele sunt restrictive în ceea ce privește ceea ce se poate realiza în ceea ce privește designul e-mailului. Designerii trebuie să gândească în termeni de rânduri și coloane pentru ca desenele lor să fie ușor de construit cu tabele.

Imagini de fundal cu VML

Text live. Text live. Text live. Este mantra agentului de marketing prin e-mail. Aveți cât mai mult text live în e-mailurile dvs. pentru a vă asigura că e-mailurile ajung în căsuța de e-mail (mai degrabă decât spam), sunt accesibile tuturor și pot fi citite cu imaginile dezactivate.

Imaginile de fundal vă pot permite să suprapuneți text live peste o imagine, indiferent dacă este un model sau o fotografie frumoasă. Imaginile de fundal pot crea un sentiment frumos de profunzime design-urilor tale de e-mail, fiind în același timp accesibile.

Cu toate acestea, Outlook nu acceptă imagini de fundal cu HTML pur. Outlook necesită utilizarea VML pentru ca imaginile de fundal să funcționeze. Din fericire, nu trebuie să înveți VML în întregime pentru a putea folosi imagini de fundal în e-mailul tău. Campaign Monitor are un instrument excelent care vă va genera codul VML și HTML pentru a vă oferi imagini de fundal rezistente la glonț în e-mailurile dvs.

Nu există suport pentru GIF-uri animate

Având în vedere lipsa suportului video în e-mail și marketerii prin e-mail care determină să își facă e-mailurile mai dinamice și mai captivante, umilul GIF animat este modalitatea perfectă de a aduce puțină viață e-mailurilor tale.

Cu toate acestea, Outlook nu acceptă GIF-uri animate. În timp ce imaginea se va încărca și va apărea utilizatorului, va fi randat doar primul cadru al animației.

Dacă aveți abonați care deschid e-mailuri în Outlook și utilizați GIF-uri animate, faceți ca primul cadru al animației să conteze. Păstrați GIF-ul simplu și animația nu este parte integrantă a mesajului, ci mai mult ca un beneficiu suplimentar pentru cei care pot vedea animația completă.

Nu există suport pentru umplutură pe etichetele p, div și a

Umplutura este un atribut CSS grozav care poate introduce spațiu elementelor tale. Este un atribut CSS util pentru a poziționa elementele într-un e-mail sau pentru a crea spațiu în jurul elementelor pentru a îmbunătăți designul.

O soluție ușoară pentru aceasta este utilizarea atributelor HTML cellspacing și cellpadding în tabel pentru a crea spațiu în jurul elementelor din interiorul unui tabel.

Pentru a introduce padding în paragrafele dvs. — eticheta p — utilizați atributul de stil mso-line-height-rule:exactly; combinat cu înălțimea liniilor pentru a oferi copiei și textului dvs. puțin spațiu de respirație, făcându-l mai ușor de urmărit:

 <p>Your text here</p>

Nu este doar Outlook

În timp ce clientul de desktop a pus probleme dezvoltatorilor de e-mail de ani de zile, există acum o nouă versiune Outlook.com pe care să o soluționeze dezvoltatorii de e-mail, care în sine și-a generat propria cotă de necazuri de redare. Multe dintre ele sunt diferite de ciudateniile găsite în Outlook. (Desigur.)

O schimbare nu a fost un pas în direcția corectă – Outlook.com exclude tot ceea ce este plasat într-un set de interogări media. Deci, nu există nicio modalitate de a face diferența între versiunea mobilă sau cea desktop a unui e-mail.

Există totuși niște vești bune. Există câteva erori de randare care au fost în versiunile mai vechi ale Outlook.com care au fost reparate. Cel mai notabil: hack-ul float/margin. Pentru ca versiunea mai veche a Outlook.com să înțeleagă aceste atribute CSS, acestea trebuiau scrise fie folosind litere mari, fie un amestec de litere mari și mici. Acum nu contează cazul.

Anterior, pentru ca Outlook.com să înțeleagă atributul marjă, trebuia să utilizați:

 Margin: 10px;

Dar acum poți folosi:

 margin: 10px;

Pentru o listă mai completă de modificări, dezvoltatorul de e-mail Remi Parmentier a scris un blog grozav ce trebuie să știți despre noul Outlook.com și la ce ar trebui să se uite dezvoltatorii de e-mail.
Stăpânirea Outlook

Păstrarea codului dvs. relevant

Dacă ați lucrat vreodată ca dezvoltator de e-mailuri, de multe ori se poate simți că postările de obiectiv ale capacității de redare a e-mailului se mișcă mai mult decât ar trebui. Pe măsură ce dezvoltarea e-mailului continuă să evolueze, vor exista întotdeauna noi tehnici care trebuie „traduse” în Outlook.

De exemplu, când a fost introdusă dezvoltarea hibridă/spongioasă a e-mailurilor pentru a se asigura că aplicația mobilă Gmail a redat o versiune mobilă a unui e-mail, dezvoltatorii de e-mail au creat și noi tehnici pentru a permite Outlook să redeze acele e-mailuri.

Pe măsură ce dezvoltatorii de e-mail împing mai departe, mulți dintre cei care aspiră să creeze e-mailuri fără tabel, aceste noi tehnici vor trebui simplificate pentru numeroasele versiuni de Outlook care sunt încă în uz.

Este corect să spunem că dezvoltatorii de e-mail inovatori și talentați nu au fost niciodată mai solicitați. VML nu a fost încă stăpânit în e-mail și, atâta timp cât Outlook folosește Word ca motor de randare, acesta va fi un domeniu cheie în care dezvoltatorii de e-mail pot continua să-și dezvolte cunoștințele și valoarea.

Crearea e-mailurilor necesită timp

Cu toate aceste provocări pe care Outlook le impune dezvoltatorilor de e-mail, precum și lista tot mai mare de clienți de e-mail și dispozitive care trebuie să fie suportate, nu este de mirare că o mare parte a timpului petrecut în marketing prin e-mail este în dezvoltarea și testarea e-mailurilor HTML.

În Starea producției de e-mail din 2016, peste 44% dintre respondenți au declarat că au petrecut mai mult de 3 ore în dezvoltarea e-mailului. Aceasta nu este o perioadă scurtă de timp și trebuie luată în considerare atunci când se analizează un întreg flux de lucru de marketing prin e-mail.

Outlook a fost întotdeauna o fiară dificilă pentru dezvoltatorii de e-mailuri. Din păcate, nu poate fi neglijat, deoarece are o cotă de piață considerabilă a clienților de e-mail, care ar putea fi mai mare dacă lucrați în sectorul de marketing B2B. Pur și simplu, Outlook nu poate fi ignorat.

Te chinui să-ți faci e-mailurile să funcționeze în Outlook?

Am colaborat cu Microsoft pentru a acorda prioritate erorilor de redare a e-mailurilor în Outlook, pentru a identifica problemele mai rapid și pentru a anunța îmbunătățiri și remedieri pentru comunitate.

Ajutați-ne să îmbunătățim Outlook și să trimitem eroarea dvs. de redare.

Trimiteți o eroare de randare Outlook →