W związku z licznymi pytaniami dotyczącymi zasad budowania profesjonalnego mailingu publikujemy nasze rekomendacje w tym zakresie. Przedstawiam poniżej 16 zasad jakim powinien podlegać profesjonalny mailing.
1. Kodowanie 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-1250. UTF-8 zapewnia poprawne wyświetlanie liter, cyfr, znaków diakrytycznych i specjalnych języków prawie całego świata.
2. Szerokość
Najbardziej 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). Zalecamy stosowanie w kodzie tabelki – tagi DIV nie są prawidłowo obsługiwane.
3. 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.
4. Barwy HEX i RGB
Należy je stosować 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.
5. Czcionki
Kolor, rodzinę, wielkość i wyrównanie fontu należy definiować na najbliższym elemencie 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.
6. Arkusze stylów – CSS
Nie są poprawnie obsługiwane, ani jako pliki zewnętrze, ani w postaci zdefiniowanej w sekcji. Nie należy ustawiać globalnych styli dla znaczników body, table, tbody, tr, td, img, a, czyli wszystkich głównych tagów html. Obsługiwane są tylko definicje stylów dla poszczególnych podrzędnych elementów mailingu. Nie jest także dopuszczalne używanie właściwości position. Zalecanym rozwiązaniem jest ewentualne użycie styli w znacznikach lub przypisanych bezpośrednio do danego znacznika.
7. 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ść. Dla znaczników img należy definiować atrybut border=”0”,
a w szczególności dla obrazków podlinkowanych. Nie zalecamy posługiwania się grafikami wielkości 1px i rozciągania ich za pomocą atrybutów width i height. Może to powodować problemy z prawidłowym wyświetlaniem kreacji między innymi w programami Outlook 2007. Aby zmniejszyć prawdopodobieństwo „wpadania” e-maili do folderów spam lub śmieci, należy unikać tworzenia kreacji w postaci HTML wyświetlającego pojedynczy plik graficzny. Zalecamy dodawanie tekstu i korzystanie z większej ilości plików graficznych.
8. 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).
9. 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 programy 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 action. Dodatkowo należy pamiętać, aby wdodać kolor zastępczy, gdy grafika nie zostanie wyświetlona. Chcąc zrobić to poprawnie, należy umieścić deklarację tła na elementachi.
10. 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 . Obecnie zdecydowana większość programów pocztowych pobiera automatycznie grafiki, jeśli jednak nie, można pod przyciskiem stworzyć atrakcyjny alt.
11. 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.
12. 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.
13. 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.
Ze względu na potrzebną wiedzę developerską nie zalecamy korzystania z tego elementu.
background-color: #fee451; 14. 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ść.
15. Elementy mailingu
• element pozycjonujacy (wrapper),
• nagłówek (header),
• główna zawartość dokumentu (main body),
• stopka (footer).
16. Elementy niezalecane
Nie zalecamy zamieszczania w kodzie HTML takich elementów jak Java Script, ramki, obiekty Active X, oraz elementy dynamicznego HTML.
Poprawność przygotowania pliku HTML można sprawdzić za pomocą dostępnego online validatora np.: http://validator.w3.org/
Tabela możliwych interpretacji stylów CSS przez różne programy pocztowe: http://www.campaignmonitor.com/css/