Jak napisać kod HTML newslettera pod Outlook i innych klientów poczty?

W tym wpisie chciałbym pokazać jak stworzyłem kod HTML newslettera, który prawidłowo wyświetli się we wszystkich klientach poczty, także w Outlook. Dzięki temu poradnikowi będziesz w stanie samemu napisać dowolny szablon HTML dla treści swojego mailingu.

W poprzednim artykule opisywałem jak działa mailing od strony technicznej oraz pokazałem jak samemu stworzyć projekt graficzny newslettera. Zapraszam do przeczytania:

Jak stworzyć responsywny newsletter na wszystkich klientów poczty? (klik)

Jak pisać kod HTML newslettera pod Outlook?

Tworzenie kodu pod Newsletter nie jest proste i pisałem o tym w poprzednim artykule. Większość klientów poczty idzie z duchem czasu i aktualizuje oprogramowanie swoich aplikacji email tak aby prawidłowo odczytywały dzisiejsze wiadomości HTML. Niestety, nie wszyscy idą z duchem czasu i aktualizują oprogramowanie o nowe trendy HTML czy CSS. Problematyczny okazuje się Microsoft i ich aplikacja Outlook.

Outlook ma największe problemy z czytaniem wielu popularnych styli CSS (np. border-radius, zaokrąglenie krawędzi) oraz struktur takich jak div. Co prawda odczyta nam tag <div> ale nie współpracuje dobrze z tą strukturą i często występują problemy. Ponadto pewne rzeczy będą działać na jednej wersji outlook na innej już nie i jest to zależne od wersji aplikacji. Wymusza to na programiście mnóstwo dodatkowych czynności przy pisaniu kodu i testowaniu go. No więc jak to prawidłowo stworzyć?

Najlepszym sposobem jest testowanie na bieżąco. Nie jesteśmy w stanie sprawdzać każdą funkcjonalność, kod, styl czy ma wsparcie w danej aplikacji czy nie. Dlatego najlepiej podczas tworzenia widoku newslettera wysyłać na bieżąco gotowe elementy i sprawdzać jak wyświetlają się w poszczególnych klientach poczty. Newsletter wysłany na aplikacje mailowe może mieć zupełnie inny wygląd niż w przypadku poglądu na przeglądarce. Dopiero po wysłaniu wiadomości okazuje się jak newsletter wygląda jako wiadomość email w danej poczcie i aplikacji.

Newsletter musi być napisany prosto – najlepiej przy pomocy tabel, a style mają być nierozbudowane i należy korzystać z podstawowych funkcjonalności. To zapewni nas, że zbliżymy się do prawidłowego wyglądu na większości klientów poczty.

Tabela w HTML – czym jest i jak jej używać?

Tabela w HTML jest strukturą pozwalającą na pozycjonowanie treści w widoku. Jak w przypadku każdej tabeli mamy do czynienia z wierszami oraz kolumnami. Wewnątrz tabeli możemy układać elementy w pozycjach poziomych i pionowych.

Dlaczego używać tabeli w przypadku newsletterów?

Pozycjonowanie treści w widoku za pomocą tabel daje nam gwarancję, że każda przeglądarka, aplikacja czy urządzenie odczyta ją prawidłowo. W przypadku widoków opartych na strukturze div sytuacja w przypadku mailingu wygląda różnie. Możemy zaryzykować użycie divów w przypadku newslettera i większość klientów poczty odczyta tą strukturę ale jeśli chodzi o style napisane dla divów niestety ale mogą nie działać prawidłowo.

Próby tworzenia układów za pomocą divów kończyły się rozjechanymi układami w przypadku skrzynek pocztowych microsoft (outlook).

Jak używać tabel? 

To na prawdę proste. Co prawda jest dużo bardziej czasochłonne niż używanie zwykłych tagów div, ponieważ zamiast jednego tagu <div></div> musimy użyć 3 tagów:

1.  <table></table> – tag table jest tagiem tabeli i musi posiadać wewnątrz wiersze oraz kolumny,
2. <tr></tr> – wiersz tabeli,
3. <td></td> – kolumna tabeli.

Oczywiście, poza tym prostym układem kryje się dużo więcej tagów czy wartości tabel, których moglibyśmy używać. Są to takie tagi jak np. <thead> odpowiadający nagłówkowi tabeli czy <tfoot> odpowiadający stopce tabeli. Poza tym są funkcje takie jak scalanie kolumn itp. itd. Ale pytanie czy jest nam to wszystko potrzebne? Niekoniecznie. Większość widoków uda nam się stworzyć przy pomocy prostej konstrukcji nested tables czyli zagnieżdżonych tabel.

Na czym polega nested tables?

Tworzymy wewnątrz głównej tabeli kolejne tabele odpowiadające kolejnym elementom naszego widoku (oczywiście jeśli to potrzebne).

Outlook conditional CSS – wyświetlanie tylko w Outlook

Czasem zdarza się tak, że nasz newsletter wyświetla się poprawnie na wszystkich rodzajach klientów poczty a pewien element jest niemożliwy do przerobienia na aplikacje Outlook. Wówczas możemy użyć warunku dodającego pewien element lub styl tylko dla klienta Outlooka.

Przykład warunku: