Utwórz doskonałe wiadomości we wszystkich klientach e-mail

Sep 13, 2025

Jak

W przypadku jakiejkolwiek kampanii marketingowej do pracy, wiadomość e-mail musi dotrzeć do skrzynki odbiorczej i wyróżniać się ze wszystkich innych. Jednak historia się tam nie kończy. Twój e-mail musi dobrze sprawdzić, czy chcesz, aby Twój abonenci otworzyć Twój e-mail, kliknij CTA i zostań przekonwertowany.

Renderowanie jest problemem, ponieważ każdy klient pocztowy i urządzenie postrzegają kod inaczej. Kod, który działa dobrze z jednym klientem e-mail, może utworzyć problem renderowania w innym. Aby jeszcze bardziej trudniejsze były trudniejsze, nawet najczęściej używani klienci poczty e-mail przychodzą z wynagrodzeń i problemów. W tym artykule spojrzę na wyzwania i obejście dla każdego z głównych klientów poczty e-mail.

Perspektywy

Nie byłoby to hiperbole, aby powiedzieć, że e-mailem deweloperzy drżą na myśl o Outlook. Oczywistym powodem jest liczne wyzwania renderujące przedstawione przez tego klienta poczty elektronicznej. Co jest zaskakujące, że każdy korporacje nadal mają perspektywy jako swój standardowy klient pocztowy i niewielka część abonentów jest nadal lojalna.

Spójrz na niektóre z wyzwań i hacków dla Outlook:

Wyzwanie: Outlook nie obsługuje marginesów & lt; p & gt; i & lt; a & gt;
Włamać się: Jeśli chcesz dostarczyć marże, użyj & lt; td & gt; etykietka; Wielkie litery powinny być używane poza tagiem i małą literą

Wyzwanie: Wyściółka jest obsługiwana tylko na pewnych atrybutach HTML (nie włączony & lt; div & gt; lub & lt; p & gt; Tagi)
Włamać się: Układ na bazie tabeli jest najbezpieczniejszym zakładem do przezwyciężenia tego problemu

Wyzwanie: Outlook jest jedynym klientem poczty e-mail, która nie obsługuje gifów
Włamać się: Ponieważ niektórzy klienci zobaczą tylko pierwszą ramę swojej animacji, powinno to obejmować wszystkie ważne informacje, biegnij tylko przez kilka milisekund, i ma sens jako samodzielny obraz

Wyzwanie: Outlook nie obsługuje czcionek Google i wdroży Times New Roman jako fallback
Włamać się: Umieść następujący kod ...

! - [Jeśli MSO] & GT;
& lt; styl Type = "Tekst / CSS" & GT;
.back-tekst {
Czcionka-rodzina: Arial, Sans-Serif;
}
& LT; / Style & GT;
& lt; [endif] - & gt;

Outlook.com.

Nowa wersja programu Outlook.com została wprowadzona na początku 2016 r., Ale wersja Legacy wciąż nie jest poza nim. Oto wyzwania i hacki konkretne dla tego klienta:

Wyzwanie: Niepotrzebna przerwa 4-5px jest dodawana poniżej obrazów
Włamać się: Ustaw właściwość wyświetlania jako "img {Wyświetlacz: blok;}" Aby usunąć wyściółkę

Outlook.com introduces unnecessary spacing between your images — Outlook.com wprowadza niepotrzebne odstępy między twoimi obrazami

Wyzwanie: Nie obsługuje granic RGB
Włamać się: Użyj kodów Szex, aby ustawić kolor tła HTML

Wyzwanie: Dodawanie # w href. Linki łamie tag kotwicy i przesuwa CSS do innego miejsca
Włamać się: Użyj nazwy domeny, a nie href #

Aplikacja natywna iPhone'a.

Native iPhone Email App jest najbardziej używanym klientem i obsługuje wszystkie interaktywne elementy, które zazwyczaj znajdziesz w wiadomości e-mail: gify, menu, akordeony, odliczania, suwaki i tak dalej. Ponadto umożliwia również marketer e-mail użycie obrazów Retina o wysokiej rozdzielczości dla niesamowitego doświadczenia użytkownika.

IOS10 stał się tym bardziej pożądany, ponieważ użytkownicy mogą teraz dostosować liczbę linii podglądu tekstu w wiadomościach e-mail, a nawet zdecydować się na listę anulowane. Niemniej jednak, pomimo tych silnych punktów, aplikacja iPhone natywna aplikacja ma również pewne niedociągnięcia. Spójrzmy.

iOS10 users can opt for list-unsubscribe — Użytkownicy IOS10 mogą wybrać listę anulatorskisz subskrypcji

Wyzwanie: Mały tekst jest automatycznie zmieniony
Włamać się: Minimalny rozmiar czcionki dla nagłówków powinien wynosić 22px, a dla tekstu ciała 14px

Wyzwanie: Uwolnienie nowych modeli iPhone'a może powodować problemy z renderowaniem
Włamać się: Układ płynu zapewnia prawidłowo wyświetlane wiadomości e-mail na wszystkich urządzeniach

Wyzwanie: W IOS9, kiedy wbudowany blok Elementy poziomu są obok siebie w kodzie z przestrzenią między końcami dwóch elementów, prowadzi do problemu zawijającym
Włamać się: Po prostu usuń przestrzeń

Wyzwanie: IOS10 nie obsługuje stałego pozycjonowania
Włamać się: Brak aktualnego obejścia ...

Gmail.

Gmail jest popularny, ponieważ jest to tak wygodne w użyciu. Nie oznacza to jednak, że jest bez jej wyzwań.

Wyzwanie: Jeśli twój plik HTML przekroczy 102 kB, Gmail klip go
Włamać się: Unikaj niepotrzebnych znaczników i atrybutów stylu, a nie kopiować kodu z Microsoft Word lub innych redaktorów tekstowych, jak to jest (to doda dodatkowe znaczniki do pliku HTML)

Wyzwanie: Gmail usunie CSS z & lt; style & gt; blok, jeśli przekracza 8142 znaków lub zawiera błędy lub zagnieżdżone @declacje.
Włamać się: Upewnij się, że wbudowane style są krótkie i wolne od literówek

Wyzwanie: Pływy, marginesy, akapity i wyściółki nie są obsługiwane
Włamać się: Użyj układu opartego na stole & lt; td & gt; Do wyściółki i marginesów

Wyzwanie: Obrazy tła nie działają dla identyfikatorów innych niż Gmail skonfigurowany w Gmailu
Włamać się: Zastosuj kolor tła jako fallback

Wyzwanie: Selektor atrybutu nie działa
Włamać się: Posługiwać się .klasa zamiast tego selektor.

Apple Mail.

Apple Mail jest może najbliższa rzeczą dla idealnego klienta poczty e-mail, którą mamy. Główną zaletą Apple Mail jest to, że jest to bardzo przebaczenie, jeśli chodzi o złe kodowanie e-mail. Co więcej, tak jak iPhone natywna aplikacja obsługuje interaktywność w e-mailach, eliminując w ten sposób konieczność wyświetlenia wiadomości e-mail w przeglądarce.

Powinieneś pamiętać o dwóch rzeczach podczas kodowania e-maili dla abonentów Apple Mail:

Unikaj używania czcionek Calibri
Hostuj swój e-mail i podaj linki do serwera, ponieważ linki wewnętrzne nie działają w Apple Mail

Wieśniak! Poczta

W miarę przybyli nowy i lepsi klienci e-mail, Yahoo! Mail jest rzadziej używane w tych dniach. Niektóre z jego wyzwań renderujących i hacki są omówione poniżej.

Wyzwanie: Nie obsługuje środek wyrównaj Atrybut HTML.
Hack: Użyj alig = "centrum"

Wyzwanie: Szerokość Min-Device i Max-Device-szerokość nie są obsługiwane przez zapytania medialne
Włamać się: Użyj atrybutu szerokości i wzmacniacz / lub w stylu zamiast min lub max-szerokość
Użyj szerokość atrybut zamiast min- lub Max-szerokość. , albo oddzielnie lub osadzony w & lt; style & gt; etykietka

Wyzwanie: Tagi pływaków nie działają
Włamać się: Dodaj wyrównać = "górny" do danego obrazu

Na tej notatce osiągnęliśmy koniec dyskusji na temat najbardziej typowych wyzwań renderujących dla klientów pocztowych. Spójrz tutaj Aby uzyskać więcej wyzwań i obejścia. Marketing e-mail, jeśli zostanie wykonany w prawo, może utorować nowe drogi do strategii marketingowej. Mając na uwadze te proste obejścia, a twoje abonenci nigdy nie zobaczą złamany układ e-mail w wiadomościach e-mail.

Powiązane artykuły:

15 niesamowitych projektów biuletynów e-mail
10 najlepszych narzędzi do biuletynu e-mail
Master Typografia HTML w e-mailu

Utwórz doskonałe wiadomości we wszystkich klientach e-mail

Perspektywy

Outlook.com.

Aplikacja natywna iPhone'a.

Gmail.

Apple Mail.

Wieśniak! Poczta

Jak - Najpopularniejsze artykuły

Jak storyboard w Photoshopie

Zacznij od malarza płomienia

Jak używać tekstur w Photoshopie

Utwórz materiał płytek w projektancie substancji

Utwórz śliskie animacje UI

Narysuj portret ołówkiem psa

Zrób animowany GIF w Photoshopie

Jak utworzyć stylizowany charakter 3D dla gier

Kategorie