Renderowanie wiadomości e-mail w programie Outlook: jak nauczyłem się przestać się martwić i pokochać program Outlook

Opublikowany: 2021-07-02

Wszyscy tam byliśmy. Tworzysz piękną wiadomość e-mail z interesującymi plikami GIF, dostępnymi przyciskami i przyciągającymi wzrok obrazami. Następnie testujesz go i wygląda świetnie… z wyjątkiem Outlooka, w którym jest całkowicie zepsuty. Ludzie nie mogą angażować się tak, jak chcesz, ze zepsutym e-mailem.

Outlook od dawna jest plagą e-mail marketerów, ale czy musi tak być? Jak możemy z tym pracować? Czytaj dalej, aby dowiedzieć się, jak pokochałem Outlooka, pomimo wielu jego wad. omówię:

Wersje Outlooka
Wskazówki dotyczące dziwactw programu Outlook
Kod do wprowadzania poprawek

Wiele wersji programu Microsoft Outlook

Nazwa „Outlook” obejmuje kilka różnych klientów poczty e-mail z kilkoma różnymi silnikami renderowania i co najmniej dwoma różnymi ustawieniami wyświetlania. Wszystko to może być ogromnym bólem głowy, jeśli na to pozwolisz. Zanurzmy się i zobaczmy, czy możemy to trochę wyprostować.

Perspektywy 2007-2019

Są to klasyczne wersje programu Outlook dla systemu Windows. Używają one programu Word jako mechanizmu renderowania, co miało sens w czasach, gdy e-maile przypominały pisanie listów. Ach, prostsze czasy. Ale dla e-mail marketerów nie ogranicza się do renderowania wiadomości HTML.

120 DPI (punktów na cal) zwiększa złożoność. Użytkownicy systemu Windows mogą wybrać 120 DPI, aby zwiększyć rozdzielczość ekranu. Jeśli to zrobią, komputerowe klienty poczty e-mail uszanują to i zaktualizują obrazy i tekst, aby były większe. Które mogą siać spustoszenie w Twoim e-mailu.

Outlook dla komputerów Mac

To jest wersja Outlooka na komputery Mac. Wykorzystuje Webkit jako silnik renderujący. Co oznacza, że zwykle jest na równi z Apple Mail i iOS, jeśli chodzi o renderowanie wiadomości e-mail. Jeśli dobrze wygląda w Twojej przeglądarce, jest spora szansa, że będzie dobrze wyglądać tutaj.

Outlook.com i aplikacje mobilne Outlook

Ci klienci korzystają z silników renderujących opartych na Webkit lub Webkit, dzięki czemu zapewniają dobre renderowanie HTML i zwykle nie niszczą wiadomości e-mail.

Outlook Office 365

Istnieją dwie różne wersje programu Outlook Office 365 — komputerowy klient poczty e-mail i internetowy klient poczty e-mail. Wersja komputerowa jest podobna do programu Outlook 2007-2019 i wykorzystuje program Word jako silnik renderujący (trudny do obsługi poczty e-mail). Internetowy klient poczty e-mail używa Webkit lub Blink i renderuje wiadomości e-mail podobnie do Outlook.com (o wiele łatwiej).

Nigdy więcej zepsutych e-maili

Wyświetlaj podgląd wiadomości e-mail w ponad 90 klientach poczty e-mail, aplikacjach i urządzeniach — w tym we wszystkich wersjach programu Outlook — aby zapewnić subskrybentom bezbłędną obsługę marki.

Dowiedz się, jak →

Jeden Outlook, by wszystkimi rządzić

W styczniu firma Microsoft ogłosiła swoją wizję „One Outlook”, polegającą na zastąpieniu klientów stacjonarnych jednym klientem, który będzie działał wszędzie, począwszy od 2022 roku.

Nowy klient poczty e-mail będzie oparty na aktualnych aplikacjach internetowych programu Outlook. Mamy więc duże nadzieje, że będzie miał silnik renderujący oparty na Webkicie i będzie dobrze renderował wiadomości HTML. Niestety, wszystkie te stare klienty stacjonarne nie znikną po prostu, gdy to się stanie, więc nadal będą musiały być do pewnego stopnia obsługiwane.

Zrobić czy nie zrobić, nie ma wyboru

Czy kręci Ci się już głowa?

Jeśli tak, to zajmijmy się tym: Kluczowym wnioskiem jest to, że pracujemy z dwoma różnymi silnikami renderującymi — Word i Webkit. Webkit jest łatwiejszy do kodowania, a program Word jest trudniejszy. Ani naprawdę dobre, ani złe. Wymagają tylko różnych podejść i mają różne dziwactwa, które należy wziąć pod uwagę.

Przyjrzyjmy się niektórym typowym problemom z renderowaniem w klientach klasycznych programu Outlook i sposobom ich rozwiązywania.

Dołącz do obrazów atrybuty szerokości i wysokości

Outlook nie obsługuje stylów CSS dla szerokości i wysokości, a jeśli nie dodasz atrybutów szerokości i wysokości, Outlook wyświetli obraz w jego rzeczywistym rozmiarze. Jeśli używasz obrazów siatkówki (co powinno być), oznacza to, że otrzymasz gigantyczne obrazy, które zepsują twoje e-maile.

perspektywy — Obraz siatkówki bez atrybutu szerokości w programie Outlook, dzięki czemu wiadomość e-mail jest szersza

Dołącz tekst ALT

Nie pozwól, aby komunikat o zabezpieczeniach programu Outlook przemawiał za Twoimi obrazami. Upewnij się, że zawiera tekst ALT. Zwłaszcza, że Outlook domyślnie nie wyświetla obrazów, chyba że ludzie włączą tę funkcję.

Poczta e-mail w Outlooku z zablokowanymi obrazami

Korzystaj z tabel

Poczta e-mail przeszła długą drogę i możesz używać bloków <div> w wielu klientach poczty e-mail, ale Outlook nie jest jednym z nich. Program Outlook zignoruje większość stylów zastosowanych do znaczników <div>, w tym szerokości i dopełnienia. Dlatego ważne jest, abyś zamiast tego używał tagów <table> do treści.

Czy używaj kodu specyficznego dla Outlooka, aby rozwiązać problemy z renderowaniem

Może to nie rozwiązać wszystkich problemów, ale często dołączenie niektórych arkuszy CSS specyficznych dla programu Outlook może pomóc w rozwiązaniu problemu z renderowaniem, który widzisz tylko w programie Outlook. Możesz też ukryć mały blok, który nie działa w programie Outlook, i użyć kodu warunkowego, aby wyświetlić wersję, która będzie działać w określonej wersji programu Outlook. (Więcej o kodzie warunkowym później.)

Dodawaj wysokości linii do małych obrazów lub komórek tabeli

Program Outlook ustawia minimalną wysokość komórek tabeli i obrazów. Jeśli więc używasz komórki tabeli jako odstępnika lub masz mały obrazek, upewnij się, że dodałeś atrybut wysokości linii do elementu równej wysokości, na której mają się pojawiać. Na przykład:

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

Czy poprawnie dla problemów ze skalowaniem DPI

Na komputerach z systemem Windows istnieje globalne ustawienie, które ludzie mogą zmienić (lub w niektórych przypadkach domyślnie wyższe), które skaluje elementy tekstowe i graficzne, aby były większe i łatwiejsze do odczytania. Jest to świetne dla ułatwień dostępu, ale nie tak dobre dla Outlooka, ponieważ tylko niektóre elementy są skalowane, a inne nie.

Na szczęście jest poprawka. Najpierw musisz dodać przestrzeń nazw XML do tagu HTML:

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

Następnie dodaj trochę kodu, aby naprawić skalowanie obrazu tuż przed tagiem </head>:

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

I na koniec upewnij się, że wszystkie ustawione szerokości zostały uwzględnione jako właściwość CSS z pikselami, a nie jako atrybut w tabelach.

✗ Nie to z szerokością = „600″ :

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

Tak, w ten sposób ze stylem=”width:600px;” :

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

To rozwiąże większość twoich problemów dla klientów 120 DPI. Spójrz na to porównanie przed i po tej poprawce:

Outlook 2013 w 120 DPI (bez poprawki)	Outlook 2013 w 120 DPI (z poprawką)

Co za różnica, co?

Nie oczekuj, że efekty zawisu zadziałają

Outlook nie obsługuje pseudoklasy hover. Nadal powinieneś dołączyć go do tworzenia interakcji w celu zwiększenia dostępności poczty e-mail w innych klientach poczty e-mail, ale nie zdziw się, gdy nie działa w Outlooku.

Nie polegaj na animowanym GIF-ie, aby przekazać swój punkt widzenia

Klienty klasyczne programu Outlook nie obsługują animowanych plików GIF. Możesz ustawić początkową ramkę, aby wyświetlić obraz, który chcesz wyświetlić w Outlooku, lub możesz ukryć animowany plik GIF w Outlooku i użyć kodowania warunkowego, aby wyświetlić nieruchomy obraz, który chcesz. (Znowu, więcej o kodowaniu warunkowym dalej).

Nie używaj treści interaktywnych bez rozwiązania zastępczego

Interaktywne wiadomości e-mail to duże nie dla programu Outlook. Zależą one od kodowania AMP lub hackowania pól wyboru, które nie są obsługiwane w Outlooku.

W przypadku AMP dla poczty e-mail zamiast AMP zostanie wyświetlony plik HTML, więc bez dodatkowego kodowania. W przypadku interaktywności hackowania pola wyboru będziesz musiał ukryć zawartość interaktywną i pokazać awaryjną wersję programu Outlook. Ponownie, kodowanie warunkowe jest tutaj twoim przyjacielem.

Nie dodawaj dopełnienia ani marginesów do obrazów

Outlook usuwa dopełnienie i marginesy z obrazów. Pamiętaj, aby zamiast tego dodać dopełnienie komórki tabeli wokół obrazu. Lub jeśli masz obraz w tej samej komórce co kopia, dodaj margines do tagu wokół kopii (<h1>, <h2>, <p> itp.).

Strach to zabójca poczty e-mail: kod, którego potrzebujesz, aby stawić czoła obawom związanym z Outlookiem

Kodowanie świetnej wiadomości e-mail dla klientów poczty e-mail programu Outlook na komputery wymaga wyjścia poza „normalny” kod HTML i CSS. Istnieją trzy typy kodu, które pomogą nadać e-mailom blask w tych klientach: kodowanie warunkowe, właściwości MSO i VML.

Praca z czymś nowym może być przerażająca, ale obiecuję, że warto. A ten moment, kiedy zaczniesz działać prawidłowo? Poczujesz się, jakbyś właśnie wykonał bieg na Kessel w mniej niż 12 parseków.

Kodowanie warunkowe

Kodowanie warunkowe to kodowanie, które sprawdza, jakiego klienta poczty e-mail lub przeglądarki używa Twój subskrybent i pokazuje kod tylko wtedy, gdy spełnia warunek zawarty w komentarzu, taki jak:

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

Możesz nawet użyć tego, aby kierować reklamy na określone wersje klientów stacjonarnych Outlooka, dodając numery wersji:

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

Outlook nie jest jednak prosty, więc numery wersji nie odpowiadają nazwie klienta poczty e-mail:

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

A następnie możesz uzyskać bardziej skomplikowane kierowanie na zakres klientów z wartością mniejszą niż (lt), większą niż (gt), mniejszą lub równą (lte) lub większą lub równą (gte). Na przykład:

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

Więc jeśli widzisz tylko dzikie rzeczy dziejące się na konkretnym kliencie, możesz skierować go konkretnie i ukryć i pokazać dla niego lepszą treść.

Możesz także użyć komentarzy warunkowych, aby ukryć zawartość w Outlooku, mówiąc „jeśli ! mso”, co oznacza „jeśli nie mso”:

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

Należy pamiętać: kod warunkowy działa tylko na klientach klasycznych programu Outlook. Ponieważ w tym miejscu pojawia się wiele problemów, prawdopodobnie będziesz ich potrzebować bardziej niż jakakolwiek poprawka dla klientów poczty internetowej.

Ale istnieją również sposoby kierowania na klientów internetowych, ale nie ma możliwości kierowania na jednego klienta internetowego Outlooka na drugiego. Tak więc, gdy kierujesz reklamy na Outlook.com, będziesz także kierować reklamy na klienta sieci Web Office 365 (ale nie na klienta dla komputerów stacjonarnych).

Możesz atakować klientów sieci Web programu Outlook, wykorzystując fakt, że program Outlook dołącza „x_” do wszystkich nazw klas, ale nie robi tego w przypadku selektora atrybutów. Jeśli więc masz klasę „foo” i chcesz traktować ją inaczej dla klientów internetowych programu Outlook, możesz skierować ją za pomocą tego kodu:

[class~="x_foo"] { }

(Podziękowania dla Marka Robbinsa za tę poprawkę i dla Dylana Smitha za howtotarget.email.)

Właściwości MSO

Jak wspomniano powyżej, istnieje CSS specyficzny dla programu Outlook, który można dodać, który będzie miał wpływ tylko na komputerowe klienty poczty e-mail programu Outlook. Oto kilka, które są dość powszechne i być może już o nich słyszałeś:

mso-ukryj: wszystkie;

Ta właściwość ukryje wszystko przed komputerowymi klientami Outlook. Jest usuwany, gdy e-mail jest przekazywany dalej, więc uważaj, aby używać go samodzielnie, jeśli wiesz, że jest to funkcja, z której często korzystają Twoi subskrybenci. Możesz sparować go z kodem warunkowym „jeśli nie mso”, jeśli jesteś programistą „na wszelki wypadek”.

mso-line-height-rule: dokładnie;

Ta właściwość zapewnia, że program Outlook wyświetla wysokość linii określoną we właściwości wysokości linii. Bez tego Outlook niekoniecznie respektuje wysokość linii. Jeśli pracujesz w branży, w której precyzja jest kluczowa, prawdopodobnie dobrze znasz tę właściwość.

mso-padding-alt

Ten jest trochę mniej powszechny, ale od czasu do czasu musiałem go używać. Pozwala zadeklarować dopełnienie, które jest specyficzne dla programu Outlook. Jeśli więc normalne dopełnienie, które masz w komórce, nie renderuje się poprawnie w Outlooku, możesz użyć mso-padding-alt, aby ustawić wartości pasujące do twojego projektu dla Outlooka.

mso-ansi-rozmiar-czcionki

To kolejny, którego używam tylko okazjonalnie. Pozwala ustawić rozmiary czcionek specyficzne dla programu Outlook. Jeśli więc Outlook renderuje twoją czcionkę nieco większą niż inne klienty poczty e-mail, a kończysz z krótką końcową linią tekstu, którego nie chciałeś, dodaj mso-ansi-font-size i ustaw rozmiar czcionki, który dopasuje twoją kopię.

Istnieje wiele innych właściwości MSO, których możesz użyć, więc śmiało sprawdź, czy jest coś, co rozwiąże problem z renderowaniem.

VML

VML to skrót od Vector Markup Language. Jest to wersja SVG firmy Microsoft, ale język został przestarzały i jest bardzo rzadko używany (yay email!). Microsoft ma dokumentację VML zarchiwizowaną online, więc nadal możesz sprawdzić, jak używać jej do tworzenia wektorów w Outlooku, gdzie jest nadal obsługiwany. Teoretycznie, gdy Microsoft przejdzie na model „Jeden Outlook”, będziemy mogli zostawić VML w tyle.

Pamiętaj, aby dołączyć deklarację przestrzeni nazw VML. Zwykle dodaję go do elementu <html> w moim szablonie boilerplate, aby móc używać VML, gdy tylko potrzebuję:

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

Gdy już to zrobisz, możesz dodać dowolny VML do swojego kodu w ramach warunków warunkowych MSO:

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

Ten kod utworzy niebieski prostokąt o wymiarach 200 na 50 pikseli. Może nie jest to coś, czego faktycznie można użyć w wiadomości e-mail, ale możesz użyć VML, aby dodać przyciski z zaokrąglonymi rogami do kodu, obrazów tła i gradientów tła. Campaign Monitor ma dwa narzędzia stworzone przez Stig, które pomagają tworzyć obrazy tła lub przyciski z zaokrąglonymi rogami. Odkryłem, że to świetny sposób na dodanie VML, gdy dopiero się uczysz.

Możesz także użyć VML do tworzenia fałszywego pozycjonowania bezwzględnego, efektów cienia lub powrotu do obsługi grafiki CSS w Outlooku. Po zanurzeniu się w VML można zrobić wiele rzeczy.

Żyj długo i e-mailem

Outlook od dawna jest zmorą e-mail marketerów, ale nie musi tak być.

Za pomocą odpowiednich narzędzi możesz tworzyć piękne wiadomości e-mail, które są poprawnie renderowane w programie Outlook. Zapoznaj się z zasobami zawartymi w tym poście, aby zbudować swoje schematy kodowania programu Outlook i przetestuj je w wiadomościach e-mail za pomocą narzędzia Litmus Builder i podglądu wiadomości e-mail. Pomyśl o kodowaniu programu Outlook jako zagadce czekającej na rozwiązanie, a może się okazać, że pokochasz program Outlook i wszystkie jego dziwactwa.

Przetestuj swoje e-maile w Outlooku za pomocą Litmus

Zobacz, jak Twoje e-maile będą wyglądać w Outlooku i napraw wszelkie problemy, zanim naciśniesz Wyślij. Dzięki Litmus możesz mieć pewność, że tworzysz perfekcyjne e-maile, z którymi Twoi subskrybenci mogą się kontaktować.

Rozpocznij bezpłatny okres próbny →