Tabele HTML w wiadomości e-mail: co może pójść nie tak?

Jeśli pracujesz w branży e-mail od dłuższego czasu, prawdopodobnie napotkałeś wiele problemów z kampaniami e-mailowymi. E-mail marketing jest pełen wyzwań, od brakujących obrazów po problemy z dostarczalnością. Być może jednak nie brałeś pod uwagę tego, co może pójść nie tak z tabelami — z rzeczywistym kodem — który stanowi podstawę Twoich e-maili.

Niestety wiele rzeczy może się nie udać w przypadku tabel HTML. Dzisiaj chcieliśmy opisać niektóre z najczęstszych problemów występujących w tabelach HTML i dać kilka wskazówek, jak upewnić się, że nie napotkasz tych samych problemów we własnych wiadomościach e-mail.

Dlaczego korzystamy z tabel

Najpierw krótkie przypomnienie, dlaczego używamy tabel HTML do kodowania wiadomości e-mail. Jak wspomnieliśmy w przeszłości, kampanie e-mail marketingowe wymagają własnych specjalnych zagadnień związanych z kodowaniem. Chociaż sieć WWW i poczta e-mail są oparte na tych samych technologiach (HTML i CSS), aplikacje poczty e-mail nie są zgodne z tymi samymi standardami, co przeglądarki internetowe. Każda aplikacja pocztowa ma własny silnik renderujący, który określa, jaki kod jest obsługiwany i jak są wyświetlane wiadomości e-mail. Złą wiadomością dla nas jest to, że wszystkie te silniki renderujące obsługują różne tagi HTML i właściwości CSS.

Z tego powodu w dużej mierze nie możemy używać tych samych zasad kodowania, które są używane w projektowaniu stron internetowych. Aby zapewnić prawidłowe wyświetlanie wiadomości e-mail w większości klientów poczty e-mail, musimy użyć tabel HTML do utworzenia struktury kampanii e-mail.

Chociaż ostatnio się to zmieniło, zwłaszcza po dużej aktualizacji Gmaila w zeszłym roku, niektórzy klienci poczty e-mail nadal nie obsługują wielu HTML i CSS. Najbardziej godna uwagi: rodzina klientów poczty e-mail Microsoft Outlook, które wykorzystują Microsoft Word jako silnik renderujący. Ponieważ Outlook jest nadal niezwykle popularny (obecnie nr 5 w naszym narzędziu do śledzenia udziału w rynku klienta poczty e-mail), projektanci wiadomości e-mail nadal muszą w pewnym stopniu korzystać z tabel, jeśli chcą, aby ich kampanie wyświetlały się prawidłowo dla subskrybentów.

A kiedy musimy polegać na tabelach HTML, istnieje wiele rzeczy, które mogą pójść nie tak…

Komplikowanie rzeczy

Jednym z najczęstszych problemów, jakie napotykamy podczas korzystania z tabel, są nadmiernie złożone układy. Dotyczy to zwłaszcza starszych szablonów wiadomości e-mail, które nie były aktualizowane od kilku lat.

Do niedawna większość e-maili składała się z wielu tabel. Tabele w tabelach w tabelach — praktyka znana jako zagnieżdżanie.

Zagnieżdżanie wielu tabel w innej tabeli może spowodować problemy w kodzie. Bardzo łatwo jest przypadkowo umieścić tabelę w niewłaściwym miejscu lub wkleić niezbędny znacznik HTML podczas przesuwania rzeczy. W przypadku niektórych klientów (patrząc na Ciebie, Lotus Notes) wiadomości e-mail są słabo renderowane, gdy zbyt głęboko zagnieżdżasz tabele. Z tego powodu zalecamy budowanie e-maili w podejściu modułowym, o czym pisał nasz przyjaciel Brian Graves. I staraj się ograniczyć do minimum liczbę zagnieżdżonych tabel. Zagnieżdżanie tabel jest prawie nieuniknione, ale utrzymanie maksymalnej głębokości zagnieżdżania na poziomie 4-6 tabel pomoże uniknąć problemów.

Podobnie jak w przypadku złożonego zagnieżdżania, zbyt złożone projekty również mogą być problematyczne. Często zdarza się, że widzisz wiadomości e-mail z wieloma kolumnami, ale kiedy zaczniesz dodawać zbyt wiele kolumn do wiadomości e-mail, narażasz się na potencjalną awarię.

Niektórzy klienci poczty e-mail mają problemy nawet z podstawową matematyką. Wiadomo, że niektóre wersje programu Microsoft Outlook dodają dodatkowe odstępy do kolumn tabeli, łamiąc układy wiadomości e-mail. Chociaż możesz pomyśleć, że użycie czterech komórek tabeli ustawionych na 25% szerokości ma sens, Outlook doda dodatkową przestrzeń do tych komórek i sprawi, że układ będzie szerszy niż 100%. Otrzymany e-mail umieści niektóre z tych komórek w osobnym wierszu, rujnując dobrze zaprojektowaną, doskonale zaplanowaną kampanię e-mailową.

Prosty układ e-maili pomaga uniknąć potencjalnych problemów z kampaniami i zapewnia zadowolenie subskrybentów.

Brakujące tagi

E-maile zazwyczaj zawierają dużo kodu. Większość zespołów poczty e-mail pracuje według bardzo szybkich i napiętych harmonogramów. Ta kombinacja może prowadzić do błędów, które mogą zrujnować kampanię e-mailową.

Dla szybkiego przypomnienia spójrzmy, jak pisany jest kod HTML. HTML składa się z tagów otaczających treść. W większości przypadków prawidłowe znaczniki wymagają zarówno znacznika otwierającego, jak i zamykającego. Weźmy tę tabelę HTML jako przykład:

 <table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table>

Widać, że istnieją trzy różne tagi: tabela, wiersz tabeli i komórka tabeli. Tagi te są otwierane, a następnie zamykane (oznaczone symbolem /).

Chociaż HTML jest wybaczającym językiem znaczników, klienty poczty e-mail i ich silniki renderujące często dławią się, gdy brakuje znaczników HTML. Niestety brakujące tagi zamykające to zbyt powszechny problem w wiadomościach e-mail. Te krótkie czasy realizacji mogą prowadzić do tego, że projektanci wiadomości e-mail będą kodować zbyt szybko i zapomnieć o zamknięciu tabeli, wiersza lub komórki. Chociaż u niektórych klientów może to być w porządku, u innych prowadzi to do zerwania kampanii.

Narzędzia takie jak W3C Markup Validation Service mogą pomóc w identyfikacji brakujących tagów. Brakujące tagi i niewłaściwie utworzone znaczniki są również powodem, dla którego zalecamy korzystanie z szablonów wiadomości e-mail lub narzędzi, takich jak części i fragmenty konstruktora, aby pomóc w tworzeniu wiadomości e-mail. Nie tylko pomagają upewnić się, że Twój kod jest dobrze napisany i odpowiednio przetestowany, ale mają dodatkową zaletę w postaci przyspieszenia przepływu pracy — pozwalając na dotrzymanie napiętych terminów i zadowolenie zespołu.

Brakujące atrybuty

Podobnie jak brakujące tagi mogą powodować problemy, brakujące atrybuty HTML w tabelach mogą prowadzić do dziwnie wyglądających projektów.

Atrybuty HTML to dodatkowe właściwości, które można ustawić w znacznikach HTML. Te właściwości kontrolują takie rzeczy, jak szerokości i wysokości elementów, wyrównanie, a nawet odstępy. Nieoczekiwane odstępy wokół komórek tabeli to jeden z najczęstszych problemów, które można napotkać w przypadku tabel HTML.

Prawie wszystkie aplikacje poczty e-mail (i przeglądarki internetowe) dodają własne style do tabel HTML. Tabele HTML są tradycyjnie używane do wyświetlania danych tabelarycznych i nie były pierwotnie przeznaczone do układania i projektowania treści. Z tego powodu musimy zastąpić domyślne zachowanie przeglądarek i aplikacji pocztowych, aby zapewnić prawidłowe wyświetlanie tabel.

Dodając do tabeli atrybuty cellpacing i cellpadding — i ustawiając oba na zero — możemy być pewni, że żaden klient poczty e-mail nie doda dodatkowego miejsca do lub wokół komórek tabeli.

 <table cellpadding="0" cellspacing="0"> </table>

Podobnie, jeśli napotkasz problemy z szerokością tabeli lub wyrównaniem zawartości tabeli, powinieneś upewnić się, że nie zapomniałeś atrybutów szerokości lub wyrównania tabel lub komórek tabeli.

Dowiedz się, jak rozwiązywać problemy

Chcesz dowiedzieć się, jak rozwiązywać problemy z własnymi kampaniami e-mailowymi i unikać wstydliwych problemów dla subskrybentów? Dołącz do nas na Litmus Live, aby wziąć udział w pełnych warsztatach dotyczących rozwiązywania problemów z pocztą e-mail jak profesjonalista. Omówimy najczęstsze pułapki związane z e-mailami, ich rozwiązania i najlepsze metody rozwiązywania problemów z kampaniami.

Zdobądź bilety na Litmus Live! Zarejestruj się już dziś, aby świętować z nami e-maile! Zarejestruj się teraz →