Kompatybilność z klientami poczty

E-mail symulacyjny zadziała tylko wtedy, gdy wyrenderuje się tak, jak go zaprojektowano. W przeciwieństwie do strony WWW — która działa w jednej z kilku nowoczesnych przeglądarek — e-mail otwierany jest w dziesiątkach klientów, każdy z własnym silnikiem renderującym, a wiele z nich pozostaje lata za standardami sieci. Ten przewodnik opisuje praktyczne zasady pisania HTML e-maili, które przetrwają drogę do skrzynki. Stanowi uzupełnienie rozdziału Projektowanie skutecznych kampanii, który zajmuje się stroną treści.

Treść e-maila wpisujesz w edytorze kodu HTML w Kroku 2 kreatora kampanii (zob. Kampanie §4.2). Wszystko poniżej dotyczy tego, jaki HTML/CSS tam umieścić.

31.1 Dlaczego HTML e-maila to nie HTML strony WWW

Nie istnieje jeden „standard e-maila”. Każdy klient sam decyduje, ile HTML i CSS obsługuje:

Klient / silnik	Czego się spodziewać
Outlook (Windows, 2007–2021)	Renderuje silnikiem Microsoft Word. Brak obsługi `float`, `position`, obrazów tła (bez obejść), nowoczesnego CSS oraz niezawodnych `margin`/`padding` na `<div>`. Najbardziej restrykcyjny cel.
Outlook 365 / outlook.com / nowy Outlook	Oparty na webview, znacznie lepszy — ale wciąż w pewnych kontekstach usuwa `<style>` i przepisuje CSS.
Gmail (web i aplikacja)	Dobra obsługa CSS, ale historycznie usuwa `<head>`/`<style>` w niektórych widokach, przycina długie wiadomości i proxuje obrazy.
Apple Mail (macOS i iOS)	Renderowanie najwyższej klasy, niemal jak w przeglądarce. Respektuje `@media`. Privacy Protection wstępnie ładuje obrazy (wpływa na śledzenie otwarć).
Mobilne klienty webview (aplikacje Gmail/Outlook, Samsung Mail)	Zmienne; zakładaj wąski ekran i niespójną obsługę `@media`.

Złota zasada: projektuj pod najgorszy klient używany przez Twoich odbiorców, a potem ulepszaj. W korporacyjnej symulacji phishingu prawie zawsze oznacza to Outlooka na Windows. Jeśli e-mail działa w Outlooku, działa niemal wszędzie.

31.2 Układaj treść tabelami, nie `div`-ami

Nowoczesny układ CSS (flexbox, grid, float) nie działa w Outlooku. Niezawodne, sprawdzone od dekad podejście to zagnieżdżone tabele HTML z kolumną treści o stałej szerokości (zwykle 600px), wyśrodkowaną w tabeli tła o pełnej szerokości.

<!-- Wrapper o pełnej szerokości trzyma tło; tabela wewnętrzna trzyma treść. -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"
       style="background-color:#f4f4f4;">
  <tr>
    <td align="center" style="padding:24px 12px;">
      <!-- Kolumna treści 600px, wyśrodkowana -->
      <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"
             style="width:600px; max-width:600px; background-color:#ffffff;">
        <tr>
          <td style="padding:32px; font-family:Arial, sans-serif; font-size:16px;
                     line-height:24px; color:#333333;">
            Witaj {{first_name}}, Twoje konto wymaga uwagi…
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Kluczowe punkty:

Ustaw cellpadding="0" cellspacing="0" border="0" na każdej tabeli — w przeciwnym razie Outlook doda domyślne odstępy.
role="presentation" informuje czytniki ekranu, że tabela służy do układu, a nie do danych.
Odstępy realizuj przez padding na <td>, nie margin na elementach wewnętrznych — margin jest w Outlooku zawodny.
Używaj atrybutu width oraz stylu width/max-width; Outlook czyta atrybut, nowoczesne klienty czytają styl.

31.3 Wstawiaj CSS inline

Wiele klientów usuwa bloki <style> z <head> (Gmail historycznie robi to w kilku widokach). Bezpieczny domyślny wybór to style inline na każdym elemencie:

<td style="font-family:Arial,sans-serif; font-size:16px; color:#333; padding:16px;">…</td>

Blok <style> w <head> rezerwuj wyłącznie dla tego, co tego wymaga — głównie reguł @media dla responsywności (§31.5) i stanów :hover — i traktuj je jako ulepszenie, które część klientów zignoruje. Nigdy nie polegaj na klasie zdefiniowanej w <head> dla układu, który musi działać wszędzie.

Pozostałe zasady inline:

Używaj czcionek bezpiecznych dla sieci (Arial, Helvetica, Georgia, Tahoma, Verdana) z fallbackiem generycznym. Niestandardowe czcionki webowe działają tylko w kilku klientach.
Zawsze ustawiaj jawnie font-family, font-size, line-height i color na komórkach z tekstem — nie polegaj na dziedziczeniu.

31.4 Niezbędnik przetrwania w Outlooku

Silnik Outlooka na Windows (Word) jest źródłem większości problemów typu „u mnie w teście wyglądało dobrze, a u połowy odbiorców się rozsypało”. Praktyczne zabezpieczenia:

Kuloodporne przyciski. Przycisk <a> stylowany CSS-em zapada się w Outlooku. Użyj przycisku opartego na tabeli, opcjonalnie z VML dla Outlooka:

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#0067b8"
        style="border-radius:4px; mso-padding-alt:14px 28px;">
      <a href="{{landing_url}}"
         style="display:inline-block; padding:14px 28px; font-family:Arial,sans-serif;
                font-size:16px; color:#ffffff; text-decoration:none;">
        Zweryfikuj konto
      </a>
    </td>
  </tr>
</table>

Zwróć uwagę na mso-padding-alt — właściwość wyłącznie dla Outlooka, przywracającą padding, który silnik Word usuwa.

Komentarze warunkowe. Celuj w Outlooka konstrukcją , aby dodać poprawki (np. stałe szerokości, VML) ignorowane przez inne klienty.
Unikaj background-image na elementach — Outlook ignoruje większość z nich. Użyj jednolitego bgcolor lub prawdziwego <img>.
Odstępy pod obrazami. Outlook dodaje białą przestrzeń pod obrazami. Ustaw display:block; i border:0; na każdym <img> oraz font-size:0; line-height:0; na komórkach zawierających wyłącznie obraz.
Nie polegaj na border-radius, box-shadow, gradientach ani max-width w Outlooku — są ignorowane. Traktuj je jako dodatek dla zdolniejszych klientów.

31.5 Responsywność: komputer i telefon

Symulacja musi być użyteczna na telefonie — duża część odbiorców czyta pocztę najpierw na urządzeniu mobilnym, a rozsypany układ mobilny czyta się jak „fałszywka”.

Zacznij od pojedynczej kolumny o stałej szerokości (≤600px), która już wygląda akceptowalnie na komputerze i degraduje się łagodnie — wiele klientów mobilnych nie respektuje @media niezawodnie, więc układ bazowy musi bronić się sam.

Ulepsz zapytaniami @media w bloku <style> w <head> dla klientów, które je obsługują (Apple Mail, większość natywnych aplikacji mobilnych):

<style>
  @media only screen and (max-width:600px) {
    .container { width:100% !important; }
    .stack    { display:block !important; width:100% !important; }
    .mobile-pad { padding:16px !important; }
  }
</style>

Składaj kolumny na telefonie. Dwukolumnowy wiersz na komputerze powinien stać się dwoma pełnoszerokościowymi blokami jeden pod drugim na telefonie (wzorzec .stack powyżej).
Cele dotyku: przyciski o wysokości co najmniej ~44px, przyjazne pełnej szerokości na telefonie.
Rozmiary czcionek: tekst podstawowy ≥14px (16px bezpieczniej); cokolwiek mniejszego jest nieczytelne na telefonie i wygląda podejrzanie.

31.6 Obrazy

Hostuj obrazy, nigdy ich nie osadzaj. URI data: w base64 są usuwane przez Gmaila i Outlooka. Wgraj obrazy do Biblioteki mediów §10 i odwołuj się do hostowanego adresu URL. (To również powód, dla którego platforma serwuje obrazy kampanii z prawdziwego adresu URL.)
Zawsze dołączaj tekst alt. Wiele klientów domyślnie blokuje obrazy, więc pierwsze wrażenie z e-maila często jest bez obrazów. Sensowny alt na logo i kluczowych obrazach utrzymuje spójność wiadomości — a dobry pretekst powinien czytać się także przy wyłączonych obrazach.
Ustawiaj jawnie atrybuty width i height, aby układ nie skakał podczas ładowania obrazów i aby zastępcze ramki przy zablokowanych obrazach miały właściwy rozmiar.
Retina: eksportuj obrazy w rozmiarze 2× względem wyświetlanego i ogranicz przez width/height dla ostrości na ekranach o wysokiej gęstości.
Nie buduj całego e-maila jako jednego dużego obrazu — to uruchamia filtry antyspamowe, łamie się przy wyłączonych obrazach i uniemożliwia zaznaczanie/personalizację.

31.7 Tryb ciemny

Wiele klientów (Apple Mail, Outlook, aplikacja Gmail) zmienia kolory e-maili w trybie ciemnym, czasem nieprzewidywalnie odwracając tła i tekst.

Nie zakładaj białego tła — logo ciemne na przezroczystym tle zniknie na ciemnym tle. Użyj logo z bezpiecznym tłem lub wersji działającej na obu.
Przetestuj tryb ciemny przynajmniej w Apple Mail i aplikacji mobilnej Gmail.
Unikaj czystego tekstu #000000 na czystym #ffffff; lekko odchylone wartości odwracają się łagodniej.

31.8 Linki i preheader

Nie rozbijaj adresów URL. Nie przenoś linku do nowej linii ani nie wstawiaj go jako surowego tekstu w środku zdania. W PhishSpot śledzony link wstawiasz przez {{landing_url}} (zob. §30.2) — platforma obsługuje klucz odbiorcy, więc tag scalający umieszczasz tylko pod przyciskiem lub linkiem.
Preheader — fragment podglądu pokazywany na liście skrzynki — domyślnie jest pierwszą linią treści. Dodaj celowy preheader (ukryty lub widoczny) blisko góry, aby podgląd w skrzynce wspierał pretekst, a nie pokazywał „Wyświetl w przeglądarce” czy przypadkowego URL-a:
```
<div style="display:none; max-height:0; overflow:hidden; mso-hide:all;">
  Wymagane działanie na Twoim koncie przed piątkiem.
</div>
```

31.9 Testuj za każdym razem

Nic nie zastąpi zobaczenia e-maila w prawdziwych klientach:

Wyślij testowy e-mail z kampanii (Akcje kampanii → Wyślij testowy e-mail) do kontrolowanych przez siebie skrzynek — najlepiej po jednej w Outlooku desktop, Gmailu (web + aplikacja) i Apple Mail (Mac + iOS).
Sprawdź podgląd per odbiorca w Raporty i analityka §11.5, który renderuje dokładny e-mail otrzymany przez każdego odbiorcę, z przełącznikiem desktop/mobile.
Obejrzyj z wyłączonymi obrazami i w trybie ciemnym co najmniej raz.

Lista kontrolna renderowania przed wysyłką:

Układ zbudowany na zagnieżdżonych tabelach, stała kolumna treści ≤600px
Cały istotny CSS jest inline; <style> tylko dla @media/:hover
Przyciski oparte na tabeli/VML (przetrwają Outlooka)
Obrazy hostowane (bez base64), z alt, jawnymi wymiarami, display:block
Renderuje się na komputerze i telefonie; kolumny się składają; tekst ≥14px
Wygląda akceptowalnie z wyłączonymi obrazami i w trybie ciemnym
Ustawiony preheader; śledzony link wstawiony przez {{landing_url}}

Zobacz też: Projektowanie skutecznych kampanii · Kampanie · Biblioteka mediów · Raporty i analityka · Whitelist filtra antyspamowego