gru
3
2014

Mailing – Poprawna konstrukcja szablonu maila HTML/CSS i prawidłowy wygląd w programie pocztowym

Tworząc kampanię mailingową, powinieneś zwrócić uwagę nie tylko na estetyczny wygląd wiadomości oraz jego treść. Pierwszym ważnym elementem jest sama konstrukcja maila. To decyduje, czy mail zostanie prawidłowo wyświetlony w programie pocztowym klienta. Trzymając się kilku zasad unikniemy problemów.

Know-how konstrukcji HTML/CSS maila:

  1. Konstrukcję maila najlepiej zbudować w oparciu o tabelę. Budowanie na DIVach jest mocno ryzykowne. Nie wszystkie programy pocztowe wyświetlą to dobrze.
  2. Kodowanie znaków tylko UTF-8.
  3. Maksymalna szerokość maila to 640px.
  4. Nie używamy arkuszy styli CSS w sekcji <head>...</head> wiadomości. Gmail tego nie czyta. Wszystkie style umieszczamy bezpośrednio w tagach HTML, np. <table style="..."> <td style="..."> <div style="...">.
  5. Dla tabeli konstrukcji szablonu maila ustaw domyślne odstępy <table border="0" cellpadding="0" cellspacing="0">.
  6. Duże obrazki.
    Nie należy wstawiać jednego dużego obrazka (rozmiar w kB). Może nie przejść spamTestu. Obrazek należy pociąć na kilka mniejszych. Najlepiej jest ciąć w poziomie. Cięcie w pionie grozi ułożeniem obrazków jeden pod drugim zamiast obok siebie, aby ułożyły się w całość.
  7. Do każdego obrazku img dołącz atrybuty alt="...", title="..." oraz border="0".
  8. Nie dawaj spacji w kodzie HTML pomiędzy pociętymi obrazkami.
  9. Dla komórki td lub div, który zawiera pocięty obrazek, należy ustawić w stylach atrybut line-height: 0; oraz width. Dzięki temu unikniemy odstępów pomiędzy fragmentami rysunku.
  10. W komórkach tabeli można użyć DIV, ale bez atrybutu float. Pływające DIVy są źle wyświetlane.
  11. Każdy link ostyluj osobno.
  12. Do linków dodaj także atrybut title="..." oraz target="_blank".
  13. Outlook nie wyświetli poprawnie atrybutu background-image: url(...);
    Jeżeli obrazek służy jako tło dla tekstu, można:
    • Zrasteryzować tekst i zapisać go razem z rysunkiem jako jedno zdjęcie.
    • Podzielić rysunek na kilka fragmentów i wszystko umieścić w osobnym komórkach, a dla tekstu dać tło zbliżone do tła rysunku. Wówczas będziemy mieli kontrolę nad tekstem, np. gdy zmienia się dynamicznie link “Zrezygnuj z newslettera…”.
    • Usunąć obrazek i wstawić tło jako jeden kolor lub gradient przy pomocy styli.
  14. Outlook robi przerwy pomiędzy obrazkami?
    Użyj align="left" oraz margin-right dla każdego rysunku,
    np. <img align="left" style="margin-right: 0 !important;" src="..." />
    oraz dodaj do jego styli mso-line-height-rule: exactly !important;
  15. Klient pocztowy Onet.pl wymaga definiowana dla każdego DIVa atrybutów font-size i font-family, pomimo ustawienia ich w DIV nadrzędnym (rodzic).
  16. Obrazki umieścić bezpośrednio w wiadomości jako “inline attachment” czy wrzucić na serwer?
    Obrazki umieszczone na serwerze powodują, ze program pocztowy pyta czy wyświetlić zdalną wiadomość. Jest to pewnego rodzaju problem, natomiast z drugiej strony unikamy dużego rozmiaru wiadomości (kilobajty) , dzięki czemu nasz mail nie jest traktowany jako spam. Ostatecznie polecam umieścić je na serwerze, mamy też możliwość ich późniejszej zmiany.

Przykład szablonu HTML maila

Dodatkowe informacje:

  • Dodatkową wiedzę, możecie zaczerpnąć z poradnika FreshMail. Oprócz wytycznych tworzenia szablonu, znajdziecie także raport obsługi atrybutów CSS przez wybrane programy pocztowe.
  • Idealny przykład szablonu mailingu.
  • Do testowania własnego szablonu maila polecam usługi FreshMail. Zakładamy tam darmowe konto i tworzymy nową kampanię. Kilkanaście minut pracy, a jesteśmy pewni, że mail przejdzie SpamTest oraz będzie miał dobry wygląd na wszystkich klientach poczty.

Autor wpisu: Arkadiusz Krakiewicz

Programista i właściciel sklepu jednocześnie, dzięki temu rozumie potrzeby osób prowadzących sprzedaż w internecie. Od 2006 związany z eCommerce. Zaczynał jako freelancer tworząc sklepy oraz strony www. Aktualnie zajmuje się: programowanie w PHP, Symfony 2, Android, PrestaShop, osCommerce, OpenCart, WordPress.

9 komentarzy + Dodaj komentarz

  • Wszystko jasno i czytelnie opisane, nie trzeba szukać nic dalej, dzięki.

  • Tworząc mailing samodzielnie trafiłem na dość dziwny problem którego nie potrafię rozwiązać a mianowicie stworzyłem treść html następnie wysłam ją z programu pocztowego Mozilli na mojego maila na Gmailu i wszystko do tej pory jest ok. Gdy próbuję przekazać wiadomość z gmaila poprzez przeglądarkę na inne adresy email dalej jest ok. Problem pojawia się gdy tą wiadomość przekazuję z portalu o2 z poczty przez przeglądarkę i prawdopodobnie z WP też. Cały czas chodzi mi o opcję przekaż dalej podczas której gdy wiadomość przekaże z o2.pl na gmail to nie załączają sie obrazki albo wcześniej załączały się jako załączniki. Nawet jak używam idealnego przykładu szablony mailigu to pojawia się ten sam problem. Sprawdzałem otrzymane newsletery np. od gruponu przekazywałem je z o2.pl na gmail i było wszystko ok stąd nie jest to problem poczty o2 a raczej tworzonego przezmnie mailingu. Jeśli zna Pan odpowiedz to chętnie poznam rozwiązanie

  • Fajnie opisane ale wrzuciłem Twój kod do analizatora kodu HTML w programie Anomail 2015 i przyczepił się do TBODY mówiąc, że tego nie powinno być bo niektóre programy pocztowe tego nie obsługują oraz nie spodobał mu się fragment mso-line… i krzyczy, że to należy usunąć bo to jest fragment tylko dla Outlooka i w webmailach moze byc problem czy jakos tak

  • Najlepiej sprawdzić w realu jak jest.
    To, że Anomail 2015 zgłasza błędy, to nie znaczy, że wiadomość źle się wyświetla.
    Szczerze mówiąc, też mso-line mi się nie podoba, ale to ma wpływ na Outlooka :)
    Dodatkowo, oprócz walidacji Anomail, zobaczysz, że i tak program pocztowy robi swoją interpretację :)

  • Łukasz, spróbuj przekonwertować wszystkie grafiki do base64 i w takiej formie dołączyć do kodu wiadomości.

  • Niestety nie do końca z tym kodowanie UTF-8. Od pięciu lat przygotowuję dla szefa mailingi, zawsze stosowałam ISO-8859-2. Ostatnim razem zmieniłam na UTF-8 i część klientów otrzymała znaczki zamiast polskich liter. Chyba jednak wciąż nie wszystkie programy pocztowe radzą sobie z utf-8…

  • Szablon był przygotowywany dla programu Pierwsza Wizyta. Współczynnik otwarcia maila wyniósł 73%, a więc naprawdę nieźle. Oznacza to, że mail do spamu nie trafił. ;) Wezwanie do działania (CTA) jasne i klarowne, a przede wszystkim dobrze podlinkowane. CTR wyniósł 43 %, co jest naprawdę niezłym wynikiem, jeśli weźmiemy pod uwagę grupę docelową (dentyści).
    Dane z analyticsa pokazały, że ruch przypływał zarówno z urządzeń stacjonarnych jak i mobilnych. Co świadczy o tym, że nie było problemu z szablonem na różnych urządzeniach. Generalnie good job :)

  • 1. , 3., 10 Buduję maile o dynamicznej szerokości (komp./tablet/komórka). Wydaje się to rozwiązaniem o niebo lepszym niż sztywne tabele. Testuję w programach pocztowych na przeglądarki, komputery, urządzenia. Nie widzę problemów, jednak jest skok technologiczny, programy się rozwijają, a podane wskazówki bardziej pasują do 2006 roku zamiast 1016 ;-)
    4. Gmail jednak czyta style z head.

  • Narzędzia marketing automation to potężne “zabawki”, które wymagają determinacji od marketerów i sprzedawców, aby właściwie zadziałać. To kolejny “młotek”, który trzeba umieć odpowiednio używać. To prawda, że jest to ultra nowoczesny “młotek”, przecież obsługuje powtarzalne czynności, zapamiętuje zestaw ruchów i potrafi po wykryciu typu materiału, dostosować rodzaj operacji i siłę uderzenia. Jednak bez dobrego operatora będzie bił na oślep, co skończy się rzuceniem go półkę i powrotem do “Excela”. Dobrze przygotowanie do wdrożenia marketing autoamtion to postawa, która zaprocentuje z czasem. Link do przewodnika do wdrożenia Mautic: https://www.mymautic.pl/aut
    Może komuś się przyda…

Dodaj komentarz

Anti-Spam

O mnie

Arkadiusz Krakiewicz
Programista aplikacji webowych dla branży eCommerce. Jednocześnie jako właściciel sklepu zna od "podszewki" potrzeby osób prowadzących sprzedaż w internecie.
W swoich rozwiązaniach stawia na funkcjonalność i wydajność aplikacji pod kątem obsługi klienta.
[X]
Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką Plików cookies.
Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.
Więcej w Tips & Tricks
utf8
Ajax (JavaScript) + UTF8 i polskie znaki diakrytyczne

W trakcie przesyłania danych przy pomocy Ajax spotkałem się z problemem kodowania polskich liter w UTF8. Poniżej przedstawiam trzy rozwiązania...

Zamknij