De ce e-mailurile mele arată rău cu clientul Outlook?
Publicat: 2018-07-04Să recunoaștem adevărul. Crearea de e-mailuri este o sarcină destul de ușoară. Dar formatarea acelor e-mailuri pentru a fi compatibile cu Outlook este o sarcină destul de mare. De fapt, mai greu decât crezi.
Outlook este cel mai folosit, dar vechi, client de e-mail pe care îl veți găsi vreodată. Cu toate acestea, nu acceptă mai multe progrese pe care le găsiți în alți clienți de e-mail, cum ar fi Gmail.
Mostră asta:
Dacă ați folosit o imagine PNG cu transparență de fundal, Outlook se va speria! Nu știe cum să redea astfel de imagini. În mod similar, s-ar putea să vă întrebați de ce butoanele dvs. rotunjite (create folosind proprietatea CSS cu rază de margine) arată Square în clientul Outlook. Deoarece Outlook nu acceptă border-radius și alte câteva proprietăți CSS.
Iată motivele pentru care e-mailurile tale Outlook arată groaznic și ce ai putea face pentru a-ți îmbunătăți designul e-mailului.
De ce e-mailurile mele arată rău cu Outlook?
Cea mai mare provocare pentru agenții de marketing prin e-mail acum este să construiască un șablon de e-mail pentru Outlook. Acest lucru se datorează faptului că, din Outlook 2007, Microsoft a încetat să mai folosească Internet Explorer pentru a reda e-mailurile și a început să folosească Microsoft Word ca motor de randare. Această schimbare s-a potrivit cel mai bine pentru utilizatorii Microsoft Office, deoarece le-a permis doar să copieze sau să lipească conținut din Word sau Excel în e-mailurile Outlook. Dar, a făcut scenariul dificil pentru generatorul de e-mail bazat pe HTML. Deoarece e-mailul HTML arată diferit în perspectiva, pentru a depăși anumite provocări, urmați pașii de mai jos pentru a îmbunătăți campaniile de e-mail.
Provocări în redarea e-mailurilor cu Outlook
Un agent de marketing prin e-mail trebuie să ia multe în considerare înainte de a proiecta o campanie de e-mail. El trebuie să cunoască abonamentul său de client care utilizează Outlook. Versiunea desktop, versiunea mobilă și versiunea web a Outlook diferă complet una de cealaltă în ceea ce privește redarea unui e-mail. Când vine vorba de redarea e-mailurilor cu Outlook, următoarele sunt lucrurile pe care trebuie să le urmăriți.
De ce imaginea este tăiată și se încarcă lent
Când vine vorba de includerea imaginilor în e-mailuri, Outlook are anumite limitări în ceea ce privește dimensiunea imaginii.
Buletinele informative prin e-mail joacă un rol major în campaniile de marketing prin e-mail. Ele sunt dinamice prin adăugarea de imagini în ele. Uneori, când o imagine lungă este adăugată la șablonul campaniei, aceasta este tăiată sau redimensionată la capătul de recepție. Acest lucru se datorează decupărilor Outlook din partea de sus a imaginii care depășește 1728px înălțime. Deci, în acest caz, trebuie să redimensionăm imaginea sub 1728px pentru a o face să apară fără tăiere.
În situațiile în care imaginea nu poate fi redimensionată, cea mai bună alternativă este decuparea imaginii în două imagini separate și apoi folosirea acesteia în campanie.
Imaginea nu este redimensionată
Outlook nu funcționează bine cu imaginile care sunt limitate cu HTML. Adică, dacă șablonul de e-mail este adăugat cu o imagine care este redimensionată folosind HTML, Outlook va afișa imaginea doar în dimensiunea originală, nu în valoarea redimensionată. Deci, trebuie să ne asigurăm că imaginea este redimensionată cu mult înainte de a fi utilizată în orice automatizare a e-mailului.
Imagini de fundal
Cea mai bună strategie de a „uimi” un client este să construiți un e-mail cu o imagine de fundal care prezintă marca. Putem face imaginile de fundal mai utile prin suprapunerea textelor live pe imagine. Textul live ne va ajuta, de asemenea, să transmitem scopul e-mailului chiar și în momentele în care clientul nu este afișat cu imaginea.
Cu toate acestea, Outlook nu acceptă imagini de fundal cu HTML. Trebuie să folosim VML (Vector Markup Language) pentru ca imaginile de fundal să fie vizualizate de abonat.
Introduceți codul de mai jos în eticheta <body> a HTML-ului dvs. pentru ca imaginea de fundal să acopere întreaga fereastră de e-mail
<div> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="/IMAGE.png" color="#000000"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="IMAGE.png">Codul de mai sus a funcționat perfect în afișarea imaginii de fundal cu e-mailurile deschise în Outlook 2007, 2010 și 2013. Dar Windows Mail 10 avea nevoie de unele modificări în cod pentru a adăuga imaginea cu sursa ei permițând imaginea de fundal.
Codul de mai jos va permite ca stratul superior al imaginii să fie transparent și ajută la fixarea imaginii de fundal.
<td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" src="/Image Live URL Here" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"> <v:fill opacity="0%" color="#f7901e" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> <!-- HTML Content Here --> </div> <!--[if gte mso 9]> </v:textbox> </v:fill> </v:rect> </v:image> <![endif]--> </td>GIF-urile animate nu se potrivesc
Videoclipul vorbește mai mult decât cuvintele.
Dar, din punct de vedere tehnic, un șablon de e-mail are nevoie de codare complexă pentru a susține videoclipuri. Gândindu-mă la alternative, în calitate de agent de marketing prin e-mail, văd GIF-ul ca fiind o opțiune dinamică. GIF-urile sunt imagini animate pentru a transmite un mesaj în cea mai simplă formă. Outlook nu acceptă GIF.
Imaginea GIF se încarcă, dar numai primul cadru al GIF este redat clientului.
Dacă aveți abonați Outlook în lista de e-mail, asigurați-vă că primul cadru al imaginii împărtășește contextul principal al GIF-ului.
Luați în considerare utilizarea părții de animație pentru a fi un avantaj suplimentar pentru abonații cu alți clienți de e-mail.
Proprietatea razei frontierei
Vorbind de marketing prin e-mail, butonul Call to action este o caracteristică care face ca e-mailul să genereze un client potențial. De câte ori am făcut clic pe butonul CTA cu vârf rotund?
Proprietatea razei marginii este o proprietate CSS comună, dar aceasta nu funcționează bine cu Outlook. Cu Outlook, abonaților li se oferă butoane CTA cu margini pătrate.
Spații libere suplimentare
Uneori, spații goale deasupra imaginii, așa cum obișnuiam să vedem în opțiunea de previzualizare la imprimare, după ce e-mailul este redat cu Outlook.
După cum sa spus mai devreme în blog, acest lucru se datorează faptului că Outlook 2007 folosește Microsoft Word pentru a reda e-mailurile HTML.
Prin urmare, e-mailul arată puțin diferit de designul real.
Problemă cu fontul principal
Dacă dispozitivul abonatului nu are stilul de font principal, Outlook va reda întregul e-mail în Times New Roman, ignorând fontul alternativ menționat în cod.
<!--[if mso]> <style> h1 { font-family: Primary font, Fallback font; } </style> <![endif]-->Șablonul de e-mail ar trebui să fie perfect
Derulați o campanie de e-mail pentru un magazin de comerț electronic. Șablonul pe care îl proiectați ar trebui să vă ajute la trimiterea de e-mailuri eficiente, deoarece acesta nu este vechiul marketing de câmp tradițional în care clienții vă pot întâlni în persoană.
Aspectul persoanei de marketing definește credibilitatea mărcii. Deci, ce trimitem acum pentru a ne reprezenta marca?
E-mailuri. Șablonul de design al e-mailului tău oferă clientului prima impresie despre brandul tău. Cu cât un e-mail arată mai bine cu conținutul, cu atât mai bine este marca
Cu toate acestea, nu avem libertatea de a folosi opțiuni avansate de format pentru a face e-mailul nostru să arate atractiv. S-ar putea să vedem că e-mailul arată perfect în Outlook, dar acesta nu va fi scenariul atunci când este redat de alți destinatari de e-mail.
Ar trebui să rămâneți la utilizarea tabelelor în html-ul dvs. de e-mail. Nu încercați să utilizați elemente div cu poziție și floats, deoarece Outlook nu le acceptă. Din păcate, nu există nicio soluție pentru aceasta până acum.
Opțiunea de dezabonare este obligatorie
Gestionând un magazin de comerț electronic, dorim întotdeauna să menținem clienții noștri implicați cu marca noastră.
Cum să o facă?
Buletine informative. Oferiți clienților informații potențiale despre tendințele și actualizările din nișa dvs. de afaceri.
Dar, în cele din urmă, clientul este cel care decide să-ți urmeze marca sau nu. Odată ce un client s-a abonat la noi, ar trebui să i se ofere opțiunea de a renunța din lista de abonamente în orice moment.
Butonul de dezabonare este obligatoriu în fiecare buletin informativ pe care l-am trimis clienților noștri și dacă clienții noștri nu ajung să vadă acest buton,
Să te aștepți la ce?
S-ar putea să fim spammați!
Trimiterea de e-mailuri din Outlook pune marca noastră în acest risc, deoarece nu oferă această opțiune standard.
Linkurile sunt modificate în text subliniat albastru/violet
În calitate de agenți de marketing prin e-mail, trebuie să folosim complet e-mailul pe care îl trimitem clienților.
Putem include link-uri de abonament, link-uri către blogurile noastre trendy, link-uri de redirecționare către site-ul nostru pentru a obține implicarea clienților.
Când un e-mail HTML este trimis din Outlook, astfel de legături apar în text albastru/violet subliniat atunci când este vizualizat pe diferiți clienți de e-mail.
Pentru a evita această problemă, utilizați eticheta <font> și împachetați textul cu o etichetă <span> și un atribut de stil.
Încercați să utilizați următorul cod -
<a> <span> <font color="#E3A216"> Click me </font> </span> </a>Outlook poate fi bine pentru a vă completa căsuța de e-mail personală.
Dar, vorbind de afaceri, uită-te din cutie.