1
Rozdział
O czym jest poradnik?

Kodowanie mailingu nie jest trudne, bywa jednak problematyczne

Tylko odpowiednia wiedza i duża ilość przeprowadzonych testów może dać zadowalający efekt. Dziś, rozwój technologii CSS zdecydowanie wyprzedza możliwości klientów pocztowych, zarówno tych desktopowych, jak również webowych. Jakość i możliwości interpretacji właściwości CSS różnią się w zależności od używanych narzędzi, których szeroko rozumiana kompatybilność pozostawia wiele do życzenia. Narzędzia do obsługi poczty elektronicznej, mimo że obsługują określone właściwości CSS, często interpretują je w sposób nieadekwatny do dokumentacji przygotowanej przez twórców kaskadowych arkuszy stylów.

raport css

Poradnik spełnia trzy główne cele

    1. 1. Najważniejszy z nich to prezentacja podstaw merytorycznych umożliwiających przygotowanie szablonu e-mailingu, którego wygląd w poszczególnych klientach pocztowych i webmailach nie będzie różny od zamierzeń jego projektantów.
    2. 2. Kolejne zadanie to zaprezentowanie koderom oraz osobom związanym z e-marketingiem podstawowych błędów popełnianych przy przygotowywaniu projektów mailingowych.
    3. 3. Poradnik jest także próbą przekonania do stosowania metodologii graceful degradaton, w której tworzyć można nowoczesny szablon dbając, aby był poprawnie wyświetlany również przez „słabsze” aplikacje.

Projektowanie mailingów z myślą o standardach kodowania

Prowadzone przez nas badania dowiodły jak ważne jest projektowanie szablonów mailingowych ze znajomością nie tylko najnowszych standardów kodowania, ale również ze świadomością najczęstszych dysfunkcji narzędzi dostępnych na rynku. W celu pełnego przedstawienia wsparcia CSS przez poszczególne aplikacje pocztowe prezentujemy wyniki badań dla najpopularniejszych z nich, analizując dodatkowo wpływ silników przeglądarek internetowych na sposób wyświetlania wiadomości email.

Podczas badań nad zastosowaniem technologii CSS w e­mail marketingu użyto następującego sprzętu i oprogramowania:

Sprzęt

Aplikacje

Pobierz pełny raport CSS

Niniejszy poradnik został wydany także w formie raportu CSS. Zachęcamy do zapoznania się z pełną wersją.

pobierz za darmo raport CSS

2
Rozdział
Wyniki badań

Badaniu poddane zostały liczne szablony przygotowane na zlecenie klientów FreshMaila. Testowe newslettery zawierały 114 różnych właściwosci i wartości CSS (także CSS3), elementy HTMLFormat HTML + TXTWiadomość, która zawiera format HTML i TXT. Programy pocztowe, które nie będą mogły odtworzyć wiadomości w formacie HTML, wyświetlą ją w formacie TXT. Należy pamiętać, że wyświetlenie wiadomości w formacie TXT uniemożliwi zraportowanie jej w kontekście otwarć. oraz elementy dodatkowe, takie jak m.in. preheadery.

content2

Wyniki badań dają bardzo szerokie spojrzenie na możliwości poszczególnych programów desktopowych, aplikacji pocztowych i webmaili oraz stanowią solidną bazę wiedzy podczas tworzenia własnego newslettera.

Techniki email marketingowe idą coraz bardziej do przodu

Rozwijają się języki za pomocą których odbywa się kodowanie mailingu. CSS3, jak i HTML5, dają duże pole do popisu. Jednak co na to aplikacje pocztowe?

Wnioski z analizy

Cechą wspólną wszystkich programów pocztowych jest bowiem poprawna obsługa elementów tabeli HTML, czyli <table>, <tr>,<td> i to właśnie na nich należy budować strukturę całego newslettera. Wykorzystanie natomiast elementów takich jak <div> i <p> powoduje wiele problemów, dotyczących m.in. niewłaściwego rozmieszczenia oraz komplikacji z ostylowaniem poszczególnych elementów, np. tekstu.

Warto również wiedzieć, że niewłaściwą a często spotykaną praktyką, jest stosowanie właściwości margin, position (relative/absolute) i float do pozycjonowania elementów newslettera. Badania pokazały, że duża część programów pocztowych nie oferuje wsparcia dla tych właściwości. Dodatkowo atrybut margin działa tylko na elementach blokowych.

Tegoroczne badania pokazały, że niekwestionowanym liderem we wspieraniu atrybutów CSS są programy desktopowe instalowane na komputerach Mac: Apple Mail, Outlook 2011 oraz multiśrodowiskowa Mozilla Thunderbird oraz natywna aplikacja pocztowa dla iPad'a i iPhone’a.

Programy te poprawnie wyświetlają zaokrąglone rogi, gradienty, grafikę w tle i niestandardowe fonty. Wśród aplikacji webowych najlepiej radzi sobie natomiast poczta WP.pl, jednak wymagane jest odblokowanie w niej “niebezpiecznych” elementów.

Na uwagę zasługuje również poczta Windows Live 2012, w której wykorzystać można większość elementów CSS, w przeciwieństwie do większości programów pocztowych od firmy Microsoft (Outlook.com, Outlook 2007, 2010, 2013)

Aplikacje mobilne

Aplikacje mobilne, które cały czas są jeszcze nowością na polskim rynku, wbrew przypuszczeniom radzą sobie przyzwoicie. Można mieć więc nadzieję, że z roku na rok będzie w tej kategorii coraz lepiej.

Chcąc nadać odpowiedniej skali problemowi, przeanalizowaliśmy jak rozkłada się % sprawdzanych maili marketingowych w każdym typie programów pocztowych. Dane zostały pobrane z systemu FreshMail, więc dotyczą zachowań odbiorców kampanii naszych Klientów. Jednak ze względu na fakt, że posiadamy ponad 25 000 użytkowników systemu, wyniki można uogólniać na populację. Dla porównania przedstawiamy także wyniki z 2013 roku.

Ranking popularności skrzynek pocztowych

3
Rozdział
Praktyczne porady dla osób kodujących mailingi

Przygotowaliśmy kilka porad, które pomogą poznać Ci specyfikę kodowania mailingów. Wczytaj się dokładnie w poniższy rozdział, a po więcej szczegółów zaglądnij do Raportu CSS.

Kodowanie w UTF - 8

To najpopularniejszy i jedyny zalecany system kodowania znaków w mailingach, rzadziej spotykany jest ISO-8859-2, a już prawie wyjętym z użytku jest Windows-1252. UTF-8 zapewnia poprawne wyświetlanie liter, cyfr, znaków diakrytycznych i specjalnych języków prawie całego świata. Poprawna deklaracja kodowania wygląda następująco:

Szerokość

Optymalną szerokością szablonu jest 600px. Daje to pewność, że mailing wyświetli się poprawnie na notebookach z wyświetlaczem o rozdzielczości 1024x768px, na monitorach komputerów stacjonarnych o rozdzielczości 1920x1080px, a także na wyświetlaczach Retina (2560×1600px).

Zrzut ekranu 2015-02-18 o 12.10.09

Style inline

Tylko style inline dają gwarancję, że mailing wyświetli się poprawnie w każdym programie pocztowym. Część programów dobrze radzi sobie ze stylami w sekcji head, z takiego rozwiązania należy jednak korzystać tylko wtedy, gdy chcemy użyć dodatkowych styli. Styli w head można użyć przykładowo, gdy chcemy dodać niestandardowe fonty czy obsługę media queries.

Przestrzeń barw HEX i RGB

Do tła newslettera, do jego elementów i koloru fontów należy używać przestrzeni barw HEX oraz RGB. Przykładowo kolor czerwony zapisany w HEX to: #ff0000, a w RGB (255, 0, 0). Istnieją także inne przestrzenie barw takie jak HSL oraz z przeźroczystością - HSLa i RGBa, jednak nie są obsługiwane w wielu programach pocztowych. Dlatego najlepszym wyborem jest korzystanie z HEX i RGB.

Właściwości fontu

Kolor, rodzinę, wielkość i wyrównanie fontu należy definiować na najbliższym elemencie <td> od tekstu. Kolor należy zapisać w RGB lub HEX, a wielkość fontu w pixelach (px). W przypadku rodziny fontu (font-family) należy korzystać z tzw. bezpiecznych fontów, są to:

  • Georgia, serif
  • Times New Roman, Times, serif
  • Arial, Helvetica, sans-serif
  • Tahoma, Geneva, sans-serif
  • Verdana, Geneva, sans-serif.

Do wyrównania powinno się używać właściwości text-align:

  • left
  • right
  • center.

Obrazki

Stosując w mailingach obrazki, należy ich używać w formatach .gif, .jpg lub .png. Pozwalają one zachować poprawną jakość przy odpowiedniej wadze, która powinna łącznie zajmować nie więcej niż 120 kb, a iloczyn szerokości i wysokości pojedynczego pliku graficznego nie powinien przekraczać 99 999px. Aby grafika wyświetlała się poprawnie, powinna zawierać właściwości: border:none; display:block, ponadto każdy pojedynczy obraz powinien mieć określoną szerokość i wysokość.

Najwygodniejszym sposobem, aby sprawdzić czy obrazki nie przekraczają dozwolonej wielkości jest użycie Inspektora Kodu we FreshMailu.

Alt

Jest to tekst alternatywny (z możliwością stylowania), który pojawia się w miejscu, gdzie grafika nie została jeszcze wyświetlona (jeśli program nie zaciąga jej automatycznie jak np. Gmail). Często stosowaną praktyką jest więc umieszczenie w alcie tekstu nakłaniającego do pobrania obrazków, krótkiej informacji o promocji/ofercie i zachęty do działania. Należy zawsze pamiętać, aby zwrócić uwagę na ilość tekstu w alcie. Zbyt długie zdanie, spowoduje że komunikat nie wyświetli się w ogóle (Chrome, Opera) albo tekst zostanie zawinięty do nowej linii (Mozilla Firefox).

altPL

Background image - czyli obraz w tle

Poprawne użycie background image polega na zastosowaniu grafiki jako tła mailingu. Powinna to być grafika o wymiarach ok. 1600px x 600px (niektóre programyFormat HTML + TXTWiadomość, która zawiera format HTML i TXT. Programy pocztowe, które nie będą mogły odtworzyć wiadomości w formacie HTML, wyświetlą ją w formacie TXT. Należy pamiętać, że wyświetlenie wiadomości w formacie TXT uniemożliwi zraportowanie jej w kontekście otwarć. nie obsługują właściwości powtarzania tła (background-repeat)), bez dodatkowych elementów rozpraszających. Należy wiedzieć, że nie jest to odpowiednie miejsce do wstawiania tekstów czy call to actionCall to action"Wezwanie do działania", metoda wskazania potencjalnemu klientowi co powinien teraz wykonać na stronie internetowej, landing page. Najczęściej przyjmuje wygląd graficznego przycisku.. Dodatkowo należy pamiętać, aby w <body> dodać kolor zastępczy, gdy grafika nie zostanie wyświetlona. Chcąc zrobić to poprawnie, należy umieścić deklarację tła na elementach <body> i <td>.

Przycisk jako obrazek

Przyciski call to action można stworzyć na dwa sposoby:

  • za pomocą kodu CSS - właściwości przycisku można określić za pomocą kodu CSS, jednak niesie to ze sobą ryzyko, że na każdym programie pocztowym przycisk będzie wyglądał trochę inaczej, ze względu na różnice w obsługiwanych właściwościach CSS.
  • osadzając jako grafikę - chcąc mieć pewność, że przycisk wszędzie będzie wyglądał identycznie, należy osadzić go jako obrazek w elemencie <img>. Obecnie zdecydowana większość programów pocztowych pobiera automatycznie grafiki, jeśli jednak nie, można pod przyciskiem stworzyć atrakcyjny alt.

Animowane gify

To bardzo skuteczny i prosty sposób na podniesienie atrakcyjności newslettera. Należy jednak pamiętać, aby animowany gif był zoptymalizowany pod kątem rozmiaru, ilości klatek oraz liczby kolorów, ponieważ zbyt duża grafika spowoduje długie ładownie animacji.

  • Optymalna wielkość to 50-200 kb.
  • Ilość klatek w animowanym gifie powinna zawierać się pomiędzy 2 a 6 klatek.
  • Ostatnia optymalizacja dotyczy ilości kolorów w zakresie od 2 do 256, opcja ta dostępna jest w zaawansowanych programach graficznych.

Należy przygotować się na to, że część programów pocztowych nie obsługuje animowanych gifów. Dobrą praktyką jest więc przygotowanie animacji tak, aby ostatnia klatka była pierwszą. To najlepsza metoda, gdy na ostatniej klatce znajduje się najważniejsza informacja.

animatedGIF2-PL.png

Responsive Email Design (RED)

To sztuka tworzenia newsletterów pod urządzenia mobilne. Rosnąca z roku na rok liczba mailingów otwieranych na smartfonach i tabletach pokazuje, że jest to technologia, o której warto pomyśleć, planując kampanię mailingową. Cechą charakterstyczną responsywnych mailingów jest ich uproszczony układ - zazwyczaj 1 - 2 kolumnowy, a jego budowa opiera się na tabelach z wykorzystaniem atrybutów <align>, szerokości oraz stosowania media queries.

ReesponsivePL

Video mailing

Mailingi zawierające wideo są coraz częściej wykorzystywaną formą przyciągnięcia uwagi. Należy jednak wiedzieć, że tylko wybrane programy pocztowe obsługują znacznik video, dla niektórych klientów stosuje się więc tzw. fallbacki, czyli wczytanie zastępczej animacji w formacie gif lub statycznego obrazka.

Link podglądu i link rezygnacji

Pierwszy odpowiada za podgląd wiadomości w przeglądarce, a drugi za możliwość wypisania się z bazy, czyli tzw. link rezygnacji, który zgodnie z prawem i dobrymi praktykami musi być umieszczony w każdym mailingu.

Powyższe linki można umieścić na dwa sposoby:

  • poprzez znaczniki <previewlink> i <resignlink>,

Zrzut ekranu 2015-02-18 o 12.43.37

  • jako wartość w atrybucie href: $$preview_href$$ i $$resignlink_href$$ - w tej opcji linki można ostylować.

Zrzut ekranu 2015-02-18 o 12.43.47

Graceful degradation

Jest to metoda polegająca na kodowaniu newsletterów dla programów z najlepszym wsparciem CSS: (Mozilla Thunderbird, Apple Mail) przy jednoczesnym zachowaniu poprawnego wyświetlania się mailingu w pozostałych klientach pocztowych. Najlepszymi przykładami zastosowania graceful degradation są gradienty i zaokrąglone rogi.

Gradient - przejście koloru z jednego w drugi

Rzadko stosowny jako tło całości newslettera, zazwyczaj używany do zwiększenia atrakcyjności wyglądu przycisków call to action. Najnowsze testy wykazały, że gradient jest wspierany na wielu klientach pocztowych, jednak w kodzie html należy zawsze zadeklarować kolor bezpieczny, np. uśredniony kolor gradientu za pomocą deklaracji background-color.

Zrzut ekranu 2015-02-18 o 12.32.56

Zaokrąglone rogi przy użyciu CSS - (ang. border radius)

Używane są do uatrakcyjnienia krawędzi newslettera, obrazków oraz do przycisków. Zaokrąglone rogi nadają ciekawą formę i stanowią dobry sposób na wyróżnianie elementów. Gdy program pocztowy nie wspiera zaokrąglonych rogów, wyświetli element w formie prostokąta.

Warto zdawać sobie sprawę z tego, że prawie niemożliwe jest, aby mailing wyświetlił się idealnie na wszystkich programach pocztowych dokładnie odwzorowując graficzną kreację. Dlatego należy przede wszystkim zadbać o jego poprawność. Podpowiedzią przy kodowaniu pod konkretne programy może być analiza listy odbiorcówLista odbiorcówBaza danych zawierająca adresy email odbiorców, którzy wyrazili zgodę na przesyłanie przez dysponującego listą wiadomości komercyjnych.  . We FreshMailu można sprawdzić z jakich klientów pocztowych korzysta większość subskrybentów i mailing skodować z dbałością o najbardziej popularne skrzynki.

 

4
Rozdział
Przepis na idealny mailing

Email marketing od wielu lat jest w ścisłej czołówce najskuteczniejszych form marketingu internetowego. Jednym z ważniejszych składników wpływających na skuteczność mailingu jest jego kreacja wizualna. Niestety z powodu niedopracowania technologicznego klientów pocztowych, z których korzystają użytkownicy, należy znaleźć „złoty środek”, który będzie łączył cechy wyrafinowania graficznego z wyrachowaniem technologicznym. Dzięki temu, przygotowana kreacja u każdego z użytkowników będzie wyglądać identycznie, gwarantując poprawność prezentacji.

Od czego zacząć?

Bazując na doświadczeniu i najlepszych praktykach każdą pracę przy mailingach, zaczyna się od stworzenia makiety projektu. Makieta ma na celu zaprezentowanie układu elementów i architektury informacji. Dzięki temu nanoszenie poprawek jest znacznie szybsze i i lepiej dostosowane do potrzeb kampanii. Kolejnym etapem jest stworzenie kreacji przez grafika. Po zaakceptowaniu grafiki projekt trafia do kodera, który zamienia makietę na kod i dostarcza gotowy szablonu mailingu.

Korzystając z wcześniejszych rad, pamiętaj także o tym, aby szablon maila składał się z czterech podstawowych elementów:

  • element pozycjonujacy (wrapper),
  • nagłówek (header),
  • główna zawartość dokumentu (main body),
  • stopka (footer).

Dla poniższego przykładu stosujemy następujące założenia:

  • mailing jest wyśrodkowany w stosunku do obszaru okna,
  • szerokość szablonu wynosi 600px,
  • mailing zawiera:
    • preheader,
    • obraz w tle,
    • gradient,
    • niestandardowy font,
    • animację CSS.

Kod przykładowego mailingu

Kod przykładowego mailingu