Kod mailingu powinien by\u0107 oparty na strukturze tabel i zgodny ze specyfikacj\u0105 HTML 4.01,\u00a0 Powinien by\u0107 wolny od b\u0142\u0119d\u00f3w i zgodny ze standardem W3C. Unikaj umieszczania JavaScript\u2019u, animacji Flash oraz pozycjonowania (position: absolute i position: relative). Nie korzystaj r\u00f3wnie\u017c z nowoczesnych uk\u0142ad\u00f3w Flexbox i CSS Grid ani ze znacznik\u00f3w HTML5<\/strong> (np. <header>, <nav>, <article>, <section>, <figure>). Rekomendujemy tak\u017ce, aby nie u\u017cywa\u0107 znacznik\u00f3w strukturalnych i formularzy, takich jak <p>, <h1>\u2013<h6> czy <form> \u2013 struktura tre\u015bci oraz nag\u0142\u00f3wki powinny by\u0107 realizowane wy\u0142\u0105cznie za pomoc\u0105 kom\u00f3rek tabeli (<td>) i styl\u00f3w inline.<\/p>\n W sekcji <head> dokumentu nale\u017cy zawrze\u0107 deklaracj\u0119 widoku dla urz\u0105dze\u0144 mobilnyc<\/strong>h: <meta name=”viewport” content=”width=device-width, initial-scale=1″>, kt\u00f3ra zapewnia prawid\u0142owe skalowanie i renderowanie szablonu na ekranach smartfon\u00f3w oraz tablet\u00f3w.<\/p>\n Je\u015bli u\u017cywasz polskich czcionek lub znak\u00f3w specjalnych, zalecamy kodowanie w standardzie UTF-8<\/strong> (ewentualnie ISO-8895-2, pami\u0119taj\u0105c, \u017ce to kodowanie ma mniejsz\u0105 bibliotek\u0119 znak\u00f3w). Upewnij si\u0119, \u017ce deklaracja kodowania pliku index.html i index.txt jest zgodna z u\u017cywanym kodowaniem.<\/p>\n Rekomendowana szeroko\u015b\u0107 kreacji to 600px<\/strong>, poniewa\u017c wi\u0119kszo\u015b\u0107 klient\u00f3w pocztowych posiada w\u0142a\u015bnie tak\u0105 szeroko\u015b\u0107 okna podgl\u0105du. Wszystkie style nale\u017cy umieszcza\u0107 inline w poszczeg\u00f3lnych znacznikach, nie umieszczaj\u0105c ich w sekcji head, gdy\u017c programy pocztowe bardzo cz\u0119sto wycinaj\u0105 nag\u0142\u00f3wek dokumentu.<\/p>\n Aby pozby\u0107 si\u0119 niepotrzebnych margines\u00f3w i odst\u0119p\u00f3w, dodaj do znacznika tabeli trzy kluczowe atrybuty: border=”0″, cellpadding=”0″ oraz cellspacing=”0″<\/strong>. Do wypo\u015brodkowania tabeli na ekranie u\u017cyj atrybutu align=”center”. W celu ustawienia margines\u00f3w wewn\u0119trznych mo\u017cesz doda\u0107 puste kom\u00f3rki tabeli lub u\u017cy\u0107 stylu padding-top lub padding-bottom w kom\u00f3rkach <td>, pami\u0119taj\u0105c przy tym o uwzgl\u0119dnieniu jego warto\u015bci w ca\u0142kowitej szeroko\u015bci kom\u00f3rki. Je\u017celi chcesz doda\u0107 obramowanie, najlepiej umie\u015bci\u0107 je jako styl konkretnej kom\u00f3rki, na przyk\u0142ad style=”border: 1px solid #000000;”. T\u0142o ca\u0142ej wiadomo\u015bci lub poszczeg\u00f3lnych sekcji mo\u017cna ustawi\u0107 jako jednolity kolor, u\u017cywaj\u0105c atrybutu bgColor=”#ffffff” bezpo\u015brednio w kom\u00f3rce <td>.<\/p>\n Zalecanymi formatami plik\u00f3w s\u0105 .jpg, .png oraz .gif.<\/strong><\/p>\n Nazwy plik\u00f3w graficznych nie powinny zawiera\u0107 spacji, my\u015blnik\u00f3w, polskich znak\u00f3w ani symboli specjalnych \u2013 nale\u017cy stosowa\u0107 wy\u0142\u0105cznie ma\u0142e litery, cyfry oraz znak pod\u0142ogi. D\u0142ugo\u015b\u0107 nazwy pliku grafiki nie powinna przekracza\u0107 35 znak\u00f3w.<\/strong> Warto r\u00f3wnie\u017c pami\u0119ta\u0107 o umieszczeniu opisowego tekstu alternatywnego w znacznikach img za pomoc\u0105 atrybutu alt, co pozwoli odbiorcy zrozumie\u0107 przekaz w przypadku zablokowania pobierania obraz\u00f3w przez program pocztowy oraz jest dobr\u0105 praktyk\u0105 dla WCAG. Aby usun\u0105\u0107 niechciane puste odst\u0119py pojawiaj\u0105ce si\u0119 pod grafikami w serwisach Gmail, WP czy Onet, dodaj do ka\u017cdego znacznika img atrybuty border=”0″ oraz style=”display: block;”.<\/p>\n Grafiki w tle nie s\u0105 wy\u015bwietlane w programach z rodziny Microsoft Outlook, dlatego zalecamy unikanie tego rozwi\u0105zania i umieszczanie obraz\u00f3w w tradycyjny spos\u00f3b.\u00a0<\/strong><\/p>\n W kreacjach e-mail najlepiej u\u017cywa\u0107 bezpiecznych, standardowych czcionek systemowych, takich jak Arial czy Times New Roman.<\/strong> Formatowanie tekstu nale\u017cy definiowa\u0107 inline bezpo\u015brednio w znaczniku kom\u00f3rki tabeli td, na przyk\u0142ad: <td style=”font-family: Arial, sans-serif; font-size: 10px; color: #000000;”>text<\/td><\/p>\n Je\u015bli chcesz u\u017cy\u0107 innych czcionek, pami\u0119taj, \u017ce w przypadku braku wybranego fontu na urz\u0105dzeniu odbiorcy system automatycznie wy\u015bwietli kolejn\u0105 wskazan\u0105 w kodzie czcionk\u0119 zapasow\u0105. Dobrym przyk\u0142adem jest czcionka Calibri, kt\u00f3ra jest standardem na urz\u0105dzeniach z systemem Windows, ale nie wyst\u0119puje domy\u015blnie w systemie iOS na urz\u0105dzeniach firmy Apple (iPhone, iPad). Zdefiniowanie w kom\u00f3rce tabeli zapisu style=”font-family: Calibri, Arial, sans-serif;” sprawi, \u017ce u\u017cytkownik sprz\u0119tu Apple zamiast niedost\u0119pnej czcionki Calibri zobaczy bezpieczny Arial, dzi\u0119ki czemu wygl\u0105d wiadomo\u015bci pozostanie sp\u00f3jny. Nale\u017cy przy tym pami\u0119ta\u0107, \u017ce ka\u017cdy font jest inny (rozmiar liter, odst\u0119py), co mo\u017ce powodowa\u0107 r\u00f3\u017cnice w uk\u0142adzie tekstu i wygl\u0105dzie kreacji.<\/p>\n Prawid\u0142owo przygotowana paczka .zip do importu do systemu SARE powinna zawiera\u0107 plik index.html z kodem kreacji, plik index.txt z wersj\u0105 tekstow\u0105 przygotowan\u0105 w tym samym kodowaniu co plik HTML oraz grafiki, do kt\u00f3rych odwo\u0142uje si\u0119 kod. Nazwa pliku .zip powinna sk\u0142ada\u0107 si\u0119 wy\u0142\u0105cznie z liter (bez polskich znak\u00f3w), cyfr lub znaku pod\u0142ogi.<\/p>\n Plik zawieraj\u0105cy wersj\u0119 HTML musi by\u0107 nazwany index.html lub index.htm, przy czym wielko\u015b\u0107 liter ma znaczenie. Plik ten nie mo\u017ce znajdowa\u0107 si\u0119 w \u017cadnym podkatalogu \u2013 musi le\u017ce\u0107 bezpo\u015brednio w katalogu g\u0142\u00f3wnym archiwum. Do\u0142\u0105czenie wersji tekstowej w pliku index.txt jest niezwykle wa\u017cne, poniewa\u017c jej obecno\u015b\u0107 znacz\u0105co obni\u017ca punktacj\u0119 antyspamow\u0105 wiadomo\u015bci. Wszystkie grafiki mog\u0105 znajdowa\u0107 si\u0119 w katalogu g\u0142\u00f3wnym lub w osobnym folderze, pod warunkiem zachowania poprawnych \u015bcie\u017cek w kodzie. Ca\u0142kowita waga paczki .zip nie powinna przekracza\u0107 100\u2013150 kB, przy czym sam plik index.html nie powinien wa\u017cy\u0107 wi\u0119cej ni\u017c 102 kB, aby unikn\u0105\u0107 obcinania widoku wiadomo\u015bci przez poczt\u0119 Gmail.<\/strong><\/p>\n Przed wysy\u0142k\u0105 zalecamy przetestowanie wy\u015bwietlania wiadomo\u015bci w popularnych przegl\u0105darkach oraz na popularnych platformach pocztowych, takich jak Gmail, WP, Interia, Onet, O2, Outlook czy Thunderbird. Na samej g\u00f3rze kreacji warto umie\u015bci\u0107 link do podgl\u0105du www, kt\u00f3ry pozwoli u\u017cytkownikowi na otwarcie wiadomo\u015bci w przegl\u0105darce w przypadku problem\u00f3w z wy\u015bwietlaniem. W tym celu u\u017cyj stopki SARE: <a href=”%www_version%”>.<\/strong><\/p>\n Nale\u017cy r\u00f3wnie\u017c pami\u0119ta\u0107 o bezwzgl\u0119dnym umieszczeniu w stopce obu wersji (index.html oraz index.txt) linku umo\u017cliwiaj\u0105cego wypisanie si\u0119 z newslettera (tak\u017ce s\u0105 w stopkach SARE), co stanowi wym\u00f3g prawny RODO i chroni reputacj\u0119 domeny. Do wyboru jest standardowy link <a href=”%remove_link%”> lub wersja, kt\u00f3ra przekierowuje u\u017cytkownika do kr\u00f3tkiego formularza badania przyczyn rezygnacji <a href=”%remove_link2%”>.<\/p>\n","protected":false},"excerpt":{"rendered":" Aktualnie na rynku dost\u0119pnych jest wiele program\u00f3w i klient\u00f3w pocztowych. Przestrzeganie wytycznych pomo\u017ce Ci odpowiednio przygotowa\u0107 mailing w formacie HTML.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[855],"tags":[77,1152,1384,1385,1386],"class_list":["post-4078","post","type-post","status-publish","format-standard","hentry","category-kampanie-mailowe","tag-mailing","tag-format-html","tag-wytyczne-html","tag-klient-pocztowy","tag-program-pocztowy"],"acf":[],"yoast_head":"\nSzeroko\u015b\u0107 kreacji<\/h2>\n
Grafiki<\/h2>\n
Czcionki<\/h2>\n
Paczka .zip<\/h2>\n
Testowanie i wysy\u0142ka<\/h2>\n