Dlaczego w stopce mailowej nie można używać flexboksa?

Silnik renderujący Outlooka dla Windows, odziedziczony po Microsoft Word, nie obsługuje flexboksa ani grida. Elementy układają się wtedy jeden pod drugim, co niszczy każdy układ kolumnowy. Tabele pozostają jedynym niezawodnym mechanizmem pozycjonowania.

Czy znaczniki działają w podpisie?

Nie w sposób niezawodny. Wiele klientów poczty usuwa blok podczas czyszczenia HTML, a podpis wklejony w pole konfiguracji zwykle traci wszystko, co nie jest zapisane inline. Style muszą być podane w atrybucie style każdego elementu.

Czy można użyć własnej czcionki?

Nie w sposób niezawodny: czcionki webowe nie ładują się w większości klientów poczty. Użyj czcionki systemowej i zadeklaruj listę czcionek zastępczych.

Stopka mailowa w HTML: zasady zgodności, których trzeba przestrzegać

HTML podpisu e-mail to nie HTML strony internetowej. Tabele, style inline, wymiary w atrybutach: zasady, dzięki którym stopka wygląda tak samo w Outlooku, Gmailu i na telefonie.

HTML w e-mailu nie podlega tym samym zasadom co HTML strony internetowej. To, co działa w nowoczesnej przeglądarce, może się rozsypać w Outlooku, a kod w pełni poprawny według W3C może dać bezużyteczny wynik. Oto rzeczywiste ograniczenia i ich przyczyny.

Skąd biorą się te ograniczenia

Nie wszystkie klienty poczty korzystają z silnika renderującego przeglądarki. Outlook dla Windows – w wersji klasycznej, wciąż bardzo popularnej w firmach – wyświetla HTML za pomocą silnika Microsoft Word. Word nigdy nie był do tego projektowany, a jego obsługa CSS kończy się na ograniczonym podzbiorze.

Poczta w przeglądarce z kolei czyści przychodzący HTML ze względów bezpieczeństwa: usuwa skrypty, często znaczniki <style>, czasem całe atrybuty.

Podpis musi więc wyświetlać się poprawnie na najniższym wspólnym mianowniku. Nowy Outlook poprawia sytuację – zobacz co zmienia się w 2026 roku – ale dopóki stary klient działa na firmowych komputerach, ograniczenie pozostaje.

Zasada 1 – Tabele do budowy układu

flexbox i grid nie są obsługiwane przez silnik Worda. Elementy układają się wtedy jeden pod drugim i każdy układ kolumnowy znika.

Pozycjonowanie musi więc opierać się na tabelach:

<table cellpadding="0" cellspacing="0" border="0" role="presentation">
  <tr>
    <td style="padding-right:16px;vertical-align:top">
      <img src="..." width="120" height="40" alt="Firma" />
    </td>
    <td style="vertical-align:top">
      <div style="font-weight:700">Imię Nazwisko</div>
    </td>
  </tr>
</table>

Liczą się trzy szczegóły. cellpadding="0" cellspacing="0" border="0" neutralizuje domyślne odstępy, różne w poszczególnych klientach. role="presentation" informuje czytniki ekranu, że tabela służy do układu, a nie do danych. A vertical-align musi być podane wprost: wartości domyślne się różnią.

Zasada 2 – Wszystkie style inline

Zewnętrzny arkusz stylów jest niedostępny. Znacznik <style> jest często usuwany. A gdy wklejasz podpis w pole konfiguracji klienta, znika wszystko, czego nie zapisano w atrybucie style.

Każdą właściwość trzeba więc zadeklarować na danym elemencie. To rozwlekłe, powtarzalne i nie ma alternatywy.

Zasada 3 – Wymiary obrazów w atrybutach

Outlook często ignoruje width i height zadeklarowane w CSS. Obraz wyświetla się wtedy w rozmiarze natywnym: plik o szerokości 1200 px zajmuje całą szerokość wiadomości.

Podaj wymiary w atrybutach HTML, a dla nowoczesnych klientów powtórz je w CSS:

<img src="https://cdn.przyklad.pl/logo.png"
     width="180" height="48" alt="Firma"
     style="display:block;border:0;width:180px;height:48px" />

display:block usuwa zbędny odstęp pod obrazem; border:0 usuwa niebieską ramkę, gdy obraz jest klikalny. Szczegóły znajdziesz w artykule jak wstawić logo, żeby się nie rozsypało.

Zasada 4 – Czcionki systemowe z listą zastępczą

Czcionki webowe nie ładują się niezawodnie. Zadeklaruj realistyczną listę:

font-family: Arial, Helvetica, sans-serif;

Lepiej samemu wybrać czcionkę zastępczą, niż zostawić ten wybór klientowi poczty.

Zasada 5 – Jednostki bezwzględne

Jednostki względne – rem, em, procenty przy rozmiarach tekstu – zachowują się nieregularnie. Używaj pikseli dla rozmiarów czcionek, marginesów wewnętrznych i wymiarów obrazów. Procenty są dopuszczalne przy szerokości tabel.

Zasada 6 – Jawne linki

Link musi zawierać pełny protokół, także w przypadku telefonu:

<a href="tel:+48600123456" style="color:#1A1A1A;text-decoration:none">+48 600 123 456</a>

Bez jawnego style niektóre klienty stosują własny podkreślony niebieski, który będzie się gryzł z Twoją identyfikacją wizualną.

Zasada 7 – Treść dostępna bez obrazów

Zdalne obrazy są domyślnie blokowane dla nieznanych nadawców. Jeśli Twój podpis opiera się na obrazie, odbiorca zobaczy pusty prostokąt w miejscu Twoich danych kontaktowych.

Imię i nazwisko, stanowisko, telefon i dane wymagane prawem muszą pozostać tekstem. A każdy obraz ma sensowny alt – nazwę firmy dla logo, nazwę serwisu dla ikony.

Dobrze wiedzieć: zawsze testuj z wyłączonymi obrazami. To najszybszy sposób, by sprawdzić, czy podpis pozostaje użyteczny w najgorszym scenariuszu.

Czy ten HTML trzeba pisać ręcznie?

Można, ale to złe wykorzystanie czasu. Typowe błędy – niedomknięta tabela, pominięty cellspacing, brak wymiaru, styl utracony przy kopiowaniu – trudno wychwycić podczas czytania kodu, a ujawniają się tylko w niektórych klientach.

Edytor wizualny, który od razu generuje HTML zgodny z tymi zasadami i pokazuje podgląd w Outlooku dla Windows, Outlooku w przeglądarce, Gmailu, Apple Mail i na telefonie, eliminuje większość problemu. Tak działa edytor Signally, dostępny bezpłatnie.

Zyskujesz nie tylko czas, ale i niezawodność. Scentralizowany szablon gwarantuje, że powyższe zasady są przestrzegane we wszystkich podpisach w organizacji, także u osób, które nigdy nie słyszały o cellpadding.