Mail HTML w Outlooku i innych programach - przycisk, odstępy, tło

Klient składa zamówienie w Twoim sklepie, dostaje maila z dużym przyciskiem „Zapłać”, otwiera go w Outlooku i… zamiast przycisku widzi tylko wąski kolorowy pasek za samym napisem. W innym programie przycisku nie ma wcale, a tekst skleja się w jeden blok bez żadnego odstępu. A przecież wysłałeś sobie test na Gmaila i wszystko wyglądało pięknie.

To nie jest błąd jednego maila. Mail HTML w Outlooku, w Gmailu i w firmowym systemie zgłoszeń to trzy różne obrazki z tego samego kodu. Pokażę Ci, skąd biorą się trzy najczęstsze usterki: niewidoczny przycisk, zlane akapity i ramki bez tła, jak je naprawić i jak sprawdzić mail, zanim trafi do klientów.

Dlaczego mail HTML w Outlooku wygląda inaczej niż w Gmailu?

Stronę internetową otwiera przeglądarka, a przeglądarki rozumieją prawie cały CSS (style, które ustalają kolory, odstępy i wygląd). Maile czytają dziesiątki różnych programów i każdy obsługuje inną część tych stylów. Resztę po prostu wycina.

Dobrze to widać w zestawieniach serwisu caniemail.com, który testuje programy pocztowe. Przykład: Outlook 2013, 2016 i 2019 na Windows obsługuje odstęp wewnętrzny (padding) tylko w komórkach tabeli. Gmail obsługuje go wszędzie.

Do tego dochodzą programy, o których przy projektowaniu nikt nie myśli. U nas odpowiedzi klientów trafiają do systemu zgłoszeń (helpdesku). Niedawno przerabialiśmy mail z przyciskiem, który w Gmailu był w porządku, a w systemie zgłoszeń miał niewidoczny przycisk i tekst sklejony w jeden blok.

Nie projektujesz maila pod jeden program. Projektujesz go pod najgorszy, w którym może go otworzyć Twój klient.

Przycisk „Zapłać”, którego nie widać

Najgroźniejsza usterka, bo klient nie ma w co kliknąć. Przycisk „Zapłać” albo „Zobacz zamówienie” zwykle robi się z samego linku: czerwone albo zielone tło, biały napis, trochę odstępu dookoła.

Tło na linku znika, biały napis zostaje

W naszym przypadku system zgłoszeń wyciął tło ustawione na samym linku, a biały kolor napisu zostawił. Efekt? Biały tekst na białym tle, czyli przycisku nie ma.

W Outlooku na Windows dzieje się coś innego, ale skutek bywa podobny. Odstęp wewnętrzny na linku nie działa (to ten padding z caniemail), więc z dużego przycisku zostaje wąski kolorowy pasek tylko za literami.

Jak zrobić przycisk, który widać w każdej poczcie?

Tło przenosisz z linku do komórki tabeli. Komórka dostaje kolor na dwa sposoby naraz: starym atrybutem bgcolor i stylem background-color. Pełną nazwą, a nie skrótem background, bo skrót część programów obsługuje tylko częściowo (caniemail.com, background).

Odstęp, który robi z linku „przycisk”, też ustawiasz na komórce, nie na linku. Link w środku zostaje zwykłym białym napisem.

Zapasowy link tekstowy pod przyciskiem

Pod przyciskiem dodaj jedno zdanie ze zwykłym linkiem w kolorze, który dobrze widać na białym tle, np. „Przycisk się nie wyświetla? Otwórz zamówienie”.

To pas bezpieczeństwa: nawet jeśli jakiś program wytnie też tło komórki, klient i tak ma w co kliknąć.

Akapity zlane w jeden blok - puste linie zamiast marginesów

Gmail pokazuje odstępy wokół akapitów i list, bo zostawia im marginesy. System zgłoszeń, w którym czytamy pocztę, te marginesy zeruje i cały tekst skleja się w jedną ścianę. Outlook na Windows z kolei obsługuje marginesy tylko w podstawowej postaci: nie działa m.in. ustawienie auto, którym zwykle wyśrodkowuje się blok, ani marginesy ujemne (caniemail.com, margin), więc na marginesach nie warto budować układu maila.

Odstęp, który ma przetrwać w każdym programie, robisz pustą linią, a nie marginesem. Po każdym akapicie wstawiasz dwa znaczniki nowej linii (br), czyli jedną pustą linię. Pusta linia to nie styl CSS, więc program, który zeruje marginesy, jej nie wytnie.

Listom zeruj marginesy i zostaw tylko wcięcie z lewej. Odstęp przed listą i po niej też zrób pustą linią. Wtedy mail wygląda tak samo w Gmailu i w programie, który marginesy wycina.

Kolorowe ramki i alerty - komórka tabeli zamiast div

Ramka „Uwaga, płatność nieopłacona” albo jasnożółte pole z kodem rabatowym to zwykle blok (div) z tłem i odstępem w środku. W Outlooku na Windows odstęp w środku bloku znika i tekst klei się do krawędzi. W programie, który wycina tło, zostaje sam tekst bez ramki.

Naprawa jest ta sama co przy przycisku: ramka to komórka tabeli z kolorem zapisanym przez bgcolor i background-color i z odstępem ustawionym na komórce.

Zaplanuj też, co zostaje, gdy tło jednak zniknie. My dajemy w ramce pogrubiony tekst w kolorze alertu, np. czerwonym. Bez tła nadal widać, że to ostrzeżenie.

Czemu tekst w ramce jest większy niż reszta maila?

Bo komórka tabeli nie zawsze przejmuje wielkość czcionki z reszty maila. U nas czerwony alert wychodził większy niż tekst obok. Rozwiązanie: w każdej komórce wpisz jawnie krój i wielkość czcionki, nawet jeśli wydaje Ci się, że to powtórzenie.

Jak sprawdzić wiadomość HTML przed wysyłką do klientów?

Test na własnym Gmailu to za mało, bo Gmail jest wyrozumiały. Zanim mail pójdzie do klientów, przejdź te kroki:

Te same zasady obowiązują przy newsletterze w Outlooku. Inna rzecz to newsletter, który w ogóle nie dochodzi, ale to już sprawa serwera, nie wyglądu: przeczytaj, z jakiego maila i serwera wysyłać newsletter, a jeśli giną maile ze sklepu - wpis Maile z mojej strony nie dochodzą.

Najczęstsze pytania o mail HTML w Outlooku

Pamiętaj: mail, który klient dostaje po zakupie, to część Twojego sklepu tak samo jak koszyk. Jeśli przycisk „Zapłać” zniknie, klient nie zapłaci, a Ty nawet się o tym nie dowiesz.

Masz sklep internetowy i maile do klientów wyglądają u Ciebie różnie w różnych programach? Napisz do nas, podpowiemy, co poprawić.