Renderowanie wiadomości e-mail w klientach poczty e-mail: wyzwania i obejścia

Opublikowany: 2019-01-15

W tym artykule

Jako marka korzystająca z e-mail marketingu musisz zadbać o to, aby Twoje e-maile dla subskrybentów były wyświetlane dokładnie tak, jak zamierzałeś .

Większość wiadomości e-mail otrzymywanych w skrzynce odbiorczej zawiera następujące informacje:

Klient poczty wyświetlający komunikat „Kliknij tutaj, aby pobrać obrazki” lub „Pokaż obrazki: dla tej wiadomości/zawsze dla tego nadawcy”.
Wiadomość e-mail z linkiem „Wyświetl wiadomość e-mail w przeglądarce” lub „Kliknij tutaj, aby wyświetlić wiadomość online” u góry.

Ten pierwszy jest spowodowany przez klientów poczty e-mail wyłączających obrazy od nieznanego nadawcy jako krok bezpieczeństwa. To ostatnie jest krokiem podejmowanym przez programistów poczty e-mail, aby upewnić się, że wysyłane wiadomości e-mail są wyświetlane bez żadnych usterek, a wiadomość jest przekazywana, niezależnie od różnych klientów poczty e-mail lub urządzeń, z których korzystają subskrybenci .

Ale jest wyzwanie.

Klienci poczty e-mail grają według własnych zasad i inaczej renderują e-maile!

Udział w rynku klientów poczty e-mail Litmus pokazuje, że Apple Mail ( 44% włącznie z pocztą iOS na iPhone'a i iPada), następnie Gmail ( 29% włącznie z komputerami stacjonarnymi i telefonami komórkowymi), Outlook ( 12% włącznie z Outlook i Outlook.com) i Yahoo ! Poczta ( 6% włącznie z komputerami stacjonarnymi i urządzeniami mobilnymi) to najczęściej używane klienty poczty e-mail według stanu na październik 2018 r. Wszystkie te klienty poczty e-mail napotykają pewne wyzwania związane z wyświetlaniem wiadomości e-mail dokładnie tak, jak została ona zaprojektowana.

Przyjrzyjmy się bliżej różnym wyzwaniom, które możesz napotkać podczas renderowania wiadomości e-mail w różnych klientach poczty e-mail, oraz ich obejściom .

Klienty poczty e-mail: wyzwania i obejścia

Apple iPhone

Apple iPhone obsługuje interaktywne elementy poczty e-mail, takie jak kinematografia, GIF, filmy, odliczanie, suwaki, obrazy siatkówki itp., A zatem zapewnia bezbłędne wrażenia użytkownika . Jest zatem najpopularniejszym klientem pocztowym.

Problemy z renderowaniem w zaktualizowanych modelach: Aktualizacja modeli iPhone'a o większe ekrany prowadzi do problemów z renderowaniem wiadomości e-mail. Aby rozwiązać ten problem i zapewnić renderowanie wiadomości e-mail na wszystkich urządzeniach iPhone, zaktualizuj dowolne zapytania o media przy użyciu punktu przerwania 320 pikseli do 414 pikseli dla iPhone'a 8 plus. Oprócz utrzymywania stałej szerokości urządzenia, możesz nawet zachować płynną szerokość.

Brak obsługi selektora ~, gdy jest używany z :hover lub :checkedselectors: iOS9 nie obsługuje ogólnego selektora rodzeństwa ~, gdy jest on połączony z selektorami pseudoklas :checked i :hover. Aby uzyskać podobne wyniki, można użyć selektora sąsiedniego rodzeństwa + zamiast ~.

Rozmiar tekstu zostaje zmieniony: Mały tekst automatycznie zmienia rozmiar. Zachowaj minimalny rozmiar czcionki wynoszący 22 piksele dla nagłówków i 14 pikseli dla tekstu głównego.

E-maile responsywne są automatycznie skalowane w iOS10 i iOS11: Automatyczne skalowanie nieodpowiadających wiadomości e-mail prowadzi do tego, że e-maile wyglądają na przesunięte lub pomniejszone. Aby rozwiązać ten problem, dodaj „padding:0;” do tagu <body> i aby wyłączyć autoskalowanie, użyj <metaname=”x-apple-disable-message-reformatting”>.

Gmail

Gmail obsługuje GIF-y i inne elementy wizualne, które dodają e-mailom estetyki. Gmail jest jednym z najwygodniejszych klientów poczty e-mail zarówno na komputery stacjonarne, jak i urządzenia mobilne pod względem użyteczności.

Gmail na komputery

Wycinanie wiadomości: Gmail wycina wiadomości o rozmiarze większym niż 102 KB i ukrywa treść za linkiem „Wyświetl całą wiadomość”. Aby tego uniknąć, utrzymuj rozmiar wiadomości poniżej 102 KB i unikaj używania zbędnych atrybutów stylu i tagów.

Selektor atrybutu nieobsługiwany: Selektor atrybutu używany do wybierania elementów nie jest obsługiwany. Zamiast tego użyj selektora .class.

Usuwa CSS w bloku <style>: jeśli blok <style> przekracza 8142 znaków lub zawiera zagnieżdżone @declarations, Gmail usuwa go. Aby rozwiązać ten problem, użyj osadzonych stylów, które są krótkie i bezbłędne.

Obrazy tła nieobsługiwane w przypadku identyfikatorów innych niż Gmail: jeśli identyfikator inny niż Gmail jest skonfigurowany w Gmailu, nie obsługuje obrazów tła. W takich przypadkach upewnij się, że używasz odpowiedniej rezerwy jako tła.

Rozmiar czcionki zwiększony o 50%: rozmiary czcionek Gmaila wzrosły o prawie 50%. Aby obejść ten problem, użyj zawartości przeznaczonej na urządzenia mobilne z większymi obrazami i zwięzłymi menu oraz trzymaj się układu jednokolumnowego bez konieczności powiększania lub szczypania.

Margines, dopełnienie, liczba zmiennoprzecinkowa i akapit nie są obsługiwane: Gmail nie renderuje akapitu i elementu zmiennoprzecinkowego. Aby renderować margines i dopełnienie, użyj układu opartego na tabeli z<td>.

Gmail dla telefonów komórkowych

<style> i <link> nie są obsługiwane w nagłówku: Czasami nagłówek nie obsługuje tagów <style> lub <link>. Aby rozwiązać ten problem, nadpisz domyślny kolor łącza, dodając styl koloru do każdego znacznika <a> w kodzie.

Obrazy pocięte białą linią: Pomiędzy dwoma lub więcej pociętymi obrazami pojawia się biała linia. Użyj „display:block” w tagu obrazu, aby usunąć białą linię.

Daty i liczby zmieniają kolor na niebieski na iPhonie: Gmail na iPhone'a automatycznie zmienia liczby i daty na niebieski. Użyj elementu niełączącego o zerowej szerokości, „tekst-dekoracja:” i łącz z otoczeniem „tekst-dekoracja: brak”. Ponadto, aby uniknąć niebieskiej linii, zdefiniuj ważne, aby zastąpić styl wbudowany.

Płynne e-maile wyglądają odpychająco: w aplikacji Gmail płynne e-maile nie wyglądają imponująco. Aby rozwiązać ten problem, stwórz iluzję pływających elementów, używając „display:inline-block” wraz z „text-align: center”.

Perspektywy

Outlook i Outlook.com są szeroko stosowanymi klientami poczty e-mail w środowisku korporacyjnym . Ci klienci poczty e-mail napotykają kilka problemów z renderowaniem, które sprawiają, że jest to trudne zadanie dla programistów poczty e-mail .

Brak obsługi max-width i min-width: Outlook nie obsługuje max- width i min-width w CSS. Aby rozwiązać ten problem, użyj płynnych układów o stałej szerokości w zapytaniu o media.

CSS nie jest obsługiwany w sekcji head: CSS używany w sekcji head kodu HTML jest usuwany automatycznie. Wbudowany CSS, aby rozwiązać ten problem.

Usuwa odstępy między akapitami i marginesami: program Outlook usuwa odstępy między akapitami i marginesami z kodu. Użyj układu opartego na tabeli i td/tr, aby dodać dodatkową przestrzeń.

GIF nie jest obsługiwany: Outlook renderuje tylko pierwszą klatkę GIF w wiadomościach e-mail. Upewnij się, że pierwsza ramka przekazuje wiadomość lub ustaw odpowiednią rezerwę, używając statycznego obrazu.

Obramowania RGB nie są obsługiwane w Outlook.com: w przypadku koloru tła użyj kodu szesnastkowego zamiast obramowań RGB.

Dodano niepotrzebne odstępy: Outlook.com dodaje niepotrzebne odstępy po obrazach. Aby usunąć dopełnienie, ustaw właściwość wyświetlania na „img{display:block;}”.

Wieśniak! Poczta

min-device-width i max-device-width nie są obsługiwane w Mediaqueries: w przypadku poczty internetowej i aplikacji na Androida użyj atrybutu width i/lub stylu zamiast ofmin lub max-device-width. To będzie kontrolować układ.

Tagi zmiennoprzecinkowe nie działają: tagi zmiennoprzecinkowe nie działają w Yahoo!Mail. Aby rozwiązać ten problem, nadaj align="top" odpowiedniemu obrazowi.

Powód takich rozbieżności między różnymi klientami poczty e-mail

Silnik renderujący jest główną przyczyną, dla której różne klienty poczty e-mail renderują tę samą wiadomość e-mail w różny sposób. Silnik renderujący to mózg każdego klienta poczty e-mail. Kiedy klient pocztowy otrzymuje wiadomość e-mail, jest to długa ściana kodu HTML otoczona animacją CSS. Silnik renderujący tworzy strukturę opartą na kodzie określonym w HTML i dodaje określone style zgodnie z CSS. Każdy niepotrzebny kod jest usuwany i nie renderowany na etapie przetwarzania końcowego.

Niektórzy klienci poczty e-mail, tacy jak Apple Mail, Microsoft Outlook (do 2003 r.), przyjęli zastrzeżony silnik renderujący, którego używają w swojej przeglądarce. Webmail używa hybrydy własnego silnika renderującego zmieszanego z przeglądarką, w której jest otwierany. Z tego powodu ten sam kod musi być napisany w różnych składniach, aby uniknąć rozebrania.

Poniżej znajdują się popularne klienty poczty e-mail i silnik renderujący używany przez każdego z nich:

Apple Mail → Motore Safari Webkit
Poczta iOS → Pakiet Motore Safari Webkit
Outlook 2000 – 2003 → Internet Explorer 6.x (Trójząb)
Lotus Notes 6.5 e 7 → Internet Explorer 6.x (Trójząb) e Notatki Rich Text (oddzielnie dla IMAP / POP3)
Outlook 2007 e kolejne wersje → Microsoft Word
Outlook na MAC → Motore Safari Webkit
Mozilla Thunderbird → Motore Mozilla Gecko
Gmail i Yahoo! Poczta → Silnik renderowania własności połączony z silnikiem renderowania przeglądarki

Typowe błędy, których należy unikać podczas wysyłania do wielu klientów poczty e-mail

Unikaj obrazu tła za ważnym wezwaniem do działania : Obraz tła nie jest obsługiwany w większości klientów poczty e-mail. Nieobsługiwane klienty poczty e-mail zastępują obraz kolorem tła. Jest to szczególnie problematyczne, jeśli kolor tła pasuje do koloru czcionki tekstu na pierwszym planie.
Wbudowany CSS za każdym razem :Niektórzy klienci poczty e-mail usuwają wszystkie arkusze stylów określone między tagiem <style>, podczas gdy prawie wszystkie obsługują wbudowane style CSS. Więc zawsze graj bezpiecznie, wstawiając swój kod CSS.
Outlook obsługuje wymiary obrazu w procentach i obsługę reszty w pikselach: Na szczęście kod specyficzny dla Outlooka można dodać między kodem warunkowym Outlooka, tj. <!–[ifgte mso 9]> ….. Kod tutaj…… </endif>, który jest ignorowany przez innych klientów poczty e-mail .
Kod e-mail przy użyciu <table> zamiast <div>: Podczas gdy kodowanie witryny internetowej przeszło do tworzenia struktury za pomocą <div>, niektórzy klienci poczty e-mail, tacy jak Outlook2007, nadal mają problemy z renderowaniem <div>, więc twórcy poczty e-mail nadal trzymają się niezawodnej metody kodowania < tabela> układ. Chociaż jest to niewygodne, kontynuuj kodowanie wiadomości e-mail tak, jakby był rok 1999…

Zawijanie

Krótko mówiąc, Twoje e-maile nie będą wyglądać tak samo we wszystkich dostępnych klientach pocztowych. Rozważ te wyzwania i obejścia podczas tworzenia kolejnej kampanii e-mailowej , aby jak najlepiej wykorzystać swoje wiadomości e-mail .