Dlaczego moje e-maile wyglądają źle w kliencie Outlook?
Opublikowany: 2018-07-04Spójrzmy prawdzie w oczy. Tworzenie e-maili to dość łatwe zadanie. Ale sformatowanie tych e-maili tak, aby były zgodne z Outlookiem, to nie lada zadanie. Rzeczywiście, trudniej niż myślisz.
Outlook jest najczęściej używanym, ale starym klientem poczty e-mail, jaki kiedykolwiek znajdziesz. Nie obsługuje jednak kilku ulepszeń, które można znaleźć w innych klientach poczty e-mail, takich jak Gmail.
Wypróbuj to:
Jeśli użyłeś obrazu PNG z przezroczystością tła, Outlook zwariuje! Nie wie, jak renderować takie obrazy. Podobnie możesz się zastanawiać, dlaczego twoje zaokrąglone przyciski (utworzone za pomocą właściwości CSS border-radius) wyglądają kwadratowo w kliencie Outlooka. Ponieważ Outlook nie obsługuje border-radius i kilku innych właściwości CSS.
Oto powody, dla których Twoje e-maile z programu Outlook wyglądają okropnie i co możesz zrobić, aby ulepszyć swój projekt e-maili.
Dlaczego moje e-maile wyglądają źle w Outlooku?
Największym wyzwaniem dla marketerów e-mail jest teraz zbudowanie szablonu wiadomości e-mail dla programu Outlook. Dzieje się tak, ponieważ od programu Outlook 2007 firma Microsoft przestała używać przeglądarki Internet Explorer do renderowania wiadomości e-mail i zaczęła używać programu Microsoft Word jako silnika renderującego. Ta zmiana była najlepsza dla użytkowników biurowych Microsoft, ponieważ pozwalała im po prostu kopiować lub wklejać zawartość z programu Word lub Excel do wiadomości e-mail programu Outlook. Ale utrudnił scenariusz dla konstruktora poczty e-mail opartego na HTML. Ponieważ e-mail w formacie HTML wygląda inaczej w programie Outlook, aby przezwyciężyć pewne wyzwania, wykonaj poniższe czynności, aby ulepszyć kampanie e-mailowe.
Wyzwania związane z renderowaniem wiadomości e-mail w programie Outlook
Przed zaprojektowaniem kampanii e-mailowej e-mail marketer musi wziąć pod uwagę wiele. Musi znać swoją subskrypcję klienta korzystającego z programu Outlook. Wersja komputerowa, wersja mobilna i wersja internetowa programu Outlook całkowicie różnią się między sobą renderowaniem wiadomości e-mail. Jeśli chodzi o renderowanie wiadomości e-mail w programie Outlook, należy zwrócić uwagę na następujące kwestie.
Dlaczego obraz jest przycinany i ładuje się powoli?
Jeśli chodzi o włączanie obrazów do wiadomości e-mail, Outlook ma pewne ograniczenia dotyczące rozmiaru obrazu.
Biuletyny e-mailowe odgrywają ważną rolę w kampaniach e-mail marketingowych. Są one dynamiczne poprzez dodanie do nich obrazów. Czasami, gdy do szablonu kampanii dodawany jest długi obraz, zostaje on przycięty lub przeskalowany w miejscu docelowym. Wynika to z tego, że Outlook obcina górną część obrazu, która przekracza wysokość 1728 pikseli. Tak więc w tym przypadku musimy zmienić rozmiar obrazu poniżej 1728 pikseli, aby pojawił się bez przycinania.
W sytuacjach, gdy nie można zmienić rozmiaru obrazu, najlepszą alternatywą jest przycięcie obrazu na dwa oddzielne obrazy, a następnie wykorzystanie go w kampanii.
Obraz nie zmienia rozmiaru
Outlook nie działa dobrze z obrazami ograniczonymi przez HTML. Oznacza to, że jeśli szablon wiadomości e-mail zostanie dodany z obrazem, którego rozmiar został zmieniony za pomocą kodu HTML, program Outlook wyświetli obraz tylko w oryginalnym rozmiarze, a nie w zmienionej wartości. Dlatego musimy upewnić się, że rozmiar obrazu został zmieniony na długo, zanim zostanie użyty w dowolnej automatyzacji poczty e-mail.
Obrazy tła
Najlepszą strategią „zachwytu” klienta jest zbudowanie e-maila z obrazem w tle przedstawiającym markę. Możemy sprawić, że obrazy tła będą bardziej celowe, nakładając na obraz tekst na żywo. Tekst na żywo pomoże nam również przekazać cel wiadomości e-mail nawet w sytuacjach, gdy klient nie jest wyświetlany z obrazem.
Jednak program Outlook nie obsługuje obrazów tła w formacie HTML. Aby obrazy tła mogły być oglądane przez subskrybenta, musimy użyć VML (Vector Markup Language).
Wprowadź poniższy kod w tagu <body> kodu HTML, aby obraz tła obejmował całe okno wiadomości 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">Powyższy kod działał idealnie przy wyświetlaniu obrazu tła z wiadomościami e-mail otwieranymi w programach Outlook 2007, 2010 i 2013. Ale Windows Mail 10 wymagał pewnej modyfikacji w kodzie, aby dodać obraz ze źródłem umożliwiającym obraz tła.
Poniższy kod sprawi, że górna warstwa obrazu będzie przezroczysta i pomoże naprawić obraz tła.
<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>Animowane GIF-y nie pasują
Wideo mówi więcej niż słowa.
Ale technicznie rzecz biorąc, szablon wiadomości e-mail wymaga złożonego kodowania do obsługi filmów. Myśląc o alternatywach, jako e-mail marketer postrzegam GIF jako dynamiczną opcję. GIF to animowane obrazy, które przekazują wiadomość w najprostszej formie. Outlook nie obsługuje GIF-ów.
Obraz GIF jest ładowany, ale klientowi jest renderowana tylko pierwsza ramka pliku GIF.
Jeśli masz subskrybentów programu Outlook na liście e-mailowej, upewnij się, że pierwsza ramka obrazu dzieli główny kontekst GIF-a.
Rozważ użycie części animacji, aby być dodatkową zaletą dla subskrybentów z innymi klientami poczty e-mail.
Właściwość promienia granicy
Mówiąc o e-mail marketingu, przycisk Call to action to funkcja, która sprawia, że e-mail generuje lead. Ile razy kliknęliśmy zaokrąglony przycisk CTA?
Właściwość promienia obramowania jest powszechną właściwością CSS, ale nie działa dobrze z Outlookiem. W programie Outlook abonenci otrzymują przyciski CTA z kwadratowymi obramowaniami.
Dodatkowe puste miejsca
Czasami puste miejsca nad obrazem, jak widzieliśmy w opcji podglądu wydruku po wyrenderowaniu wiadomości e-mail w programie Outlook.
Jak wspomniano wcześniej na blogu, dzieje się tak, ponieważ program Outlook 2007 używa programu Microsoft Word do renderowania wiadomości e-mail w formacie HTML.
Dlatego e-mail wygląda nieco inaczej niż rzeczywisty projekt.
Podstawowy problem z czcionką
Jeśli urządzenie subskrybenta nie ma podstawowego stylu czcionki, Outlook wyrenderuje całą wiadomość e-mail czcionką Times New Roman, ignorując czcionkę zastępczą wymienioną w kodzie.
<!--[if mso]> <style> h1 { font-family: Primary font, Fallback font; } </style> <![endif]-->Szablon e-maila powinien być idealny
Prowadzisz kampanię e-mailową dla sklepu eCommerce. Zaprojektowany szablon powinien pomóc w wysyłaniu skutecznych wiadomości e-mail, ponieważ nie jest to stary tradycyjny marketing terenowy, w którym klienci mogą spotkać się z Tobą osobiście.
Wygląd marketingowca określa wiarygodność marki. Co więc teraz wysyłamy, aby reprezentować naszą markę?
E-maile. Szablon projektu Twojej wiadomości e-mail daje pierwsze wrażenie Twojej marki na kliencie. Im lepiej e-mail wygląda z treścią, tym lepsza jest marka
Nie mamy jednak możliwości korzystania z zaawansowanych opcji formatowania, aby nasz e-mail wyglądał atrakcyjnie. Możemy zobaczyć, że wiadomość e-mail wygląda idealnie w Outlooku, ale tak nie będzie, gdy będzie renderowana przez innych odbiorców wiadomości e-mail.
Powinieneś trzymać się tabel w html e-maila. Nie próbuj używać elementów div z pozycją i pływakami, ponieważ program Outlook ich nie obsługuje. Niestety na razie nie ma obejścia tego problemu.
Opcja wypisania się jest koniecznością
Zarządzając sklepem eCommerce, zawsze chcemy, aby nasi klienci byli zaangażowani w naszą markę.
Jak to zrobić?
Biuletyny. Przekaż klientom potencjalne informacje o trendach i aktualizacjach w Twojej niszy biznesowej.
Ale ostatecznie to klient decyduje się podążać za Twoją marką lub nie. Gdy klient zasubskrybuje u nas, powinien mieć możliwość rezygnacji z listy subskrypcji w dowolnym momencie.
Przycisk rezygnacji z subskrypcji jest niezbędny w każdym biuletynie wysyłanym do naszych klientów, a jeśli nasi klienci nie zobaczą tego przycisku,
Czego oczekiwać?
Możemy zostać Spamowani!
Wysyłanie e-maili z Outlooka naraża naszą markę na takie ryzyko, ponieważ nie daje tej standardowej opcji.
Linki zostają zmienione na podkreślony niebieski/fioletowy tekst
Jako e-mail marketerzy musimy w pełni wykorzystać e-mail, który wysyłamy do klientów.
Możemy dołączyć linki do subskrypcji, linki do naszych popularnych blogów, linki przekierowujące do naszej witryny, aby osiągnąć zaangażowanie klientów.
Gdy wiadomość e-mail w formacie HTML jest wysyłana z programu Outlook, takie łącza są wyświetlane w kolorze niebieskim/fioletowym z podkreśleniem podczas przeglądania w różnych klientach poczty e-mail.
Aby uniknąć tego problemu, użyj znacznika <font> i otocz tekst znacznikiem <span> i atrybutem stylu.
Spróbuj użyć następującego kodu-
<a> <span> <font color="#E3A216"> Click me </font> </span> </a>Outlook może być w porządku, aby wypełnić osobistą skrzynkę odbiorczą.
Ale mówiąc biznesowo – wyjdź poza ramy.