Technologia CSS w aplikacjach pocztowych.

Grudzień 2013 Technologia CSS w aplikacjach pocztowych. Wytyczne dla projektantów newsletterów na rok 2014 Patroni medialni:

Spis treści 2 3 5 7 19 28 29 30 31 33 Wstęp Metodologia badań Wyniki badań Praktyczne porady dla projektantów mailingów i developerów Przepis na idealny mailing Kod przykładowego mailingu Przydatne linki O systemie FreshMail Zapraszamy do współpracy / kontakt

Wstęp Opracowany raport jest piątym z kolei dotyczącym wykorzystania technologii CSS w aplikacjach pocztowych. Badania, jak co roku poprzedzone zostały analizą dostępnej na rynku literatury. Ze względu na duże zainteresowanie poprzednimi raportami postanowiliśmy po raz kolejny przeprowadzić badania i podzielić się naszą wiedzą i doświadczeniem w tworzeniu profesjonalnych szablonów mailingowych. Kodowanie mailingów 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. Od czasu wydania zeszłorocznego raportu, na rynku pojawiły się dwie nowości. CSS3, jak i HTML5, które wprowadziły trochę pozytywnego zamętu. Obecny raport uwzględnia te języki i zachęca do testowania ich w kontekście tworzenia nowoczesnych mailingów.

Wstęp 4 Niniejsza publikacja jest przewodnikiem spełniającym trzy główne cele. 1 Najważniejszy z nich to prezentacja podstaw merytorycznych umożliwiających przygotowanie szablonu mailingu, którego wygląd w poszczególnych klientach pocztowych i webmailach nie będzie różny od zamierzeń jego projektantów. 2 Kolejne zadanie to zaprezentowanie koderom oraz osobom związanym z emarketingiem podstawowych błędów popełnianych podczas przygotowywania projektów mailingowych. 3 Raport 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. Całość raportu to także unikalna baza wiedzy na temat właściwości CSS obsługiwanych przez poszczególne aplikacje pocztowe, która będzie znakomitym źródłem informacji i dobrych praktyk dla web developerów. Udanej lektury Zespół FreshMail

Metodologia badań 5 W ramach badań nad technologią CSS wykonaliśmy szereg testów opartych na specjalnie przygotowanych szablonach emailingowych, które dostarczyły informacji na temat interpretacji właściwości CSS w poszczególnych narzędziach. Badaliśmy je także podczas codziennych zmagań z szablonami, które przygotowujemy dla naszych Klientów. Prowadzone przez nas badania dowiodły jak ważne jest projektowanie szablonów emailingowych 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. Nie ulega wątpliwości, że badania nad zastosowaniem technologii CSS w email marketingu są nieco niewdzięczne. Ilość wyjątków oraz różnego rodzaju problemów, zależnych nawet od sposobu formatowania kodu (np. problem białych znaków w kodzie po znaczniku <img>) sprawiają, że bardzo trudno stworzyć dokument kompletny, który pozbawiony byłby najmniejszych błędów. Nie mniej warto posiadać wiedzę przedstawioną w raporcie i na bieżąco ją wzbogacać.

Metodologia badań Sprzęt i oprogramowanie 6 Podczas badań nad zastosowaniem technologii CSS w email marketingu użyto następującego sprzętu i oprogramowania: AMD AthlonTM 64 X2 Dual Core Prosessor 4200+ 2,2 GHz 2 GB Ram Windows 7 Professional 32-Bitowy MacBook PRO Inetl Core Duo, 1,83GHz 2 GB RAM Aplikacje webowe: Aplikacje desktopowe: Aplikacje mobilne: Gmail.com Yahoo! Mail Wp.pl Interia.pl Onet.pl Outlook.com o2.pl Mozilla Thunderbird 11 Microsoft Outlook 2003 Microsoft Outlook 2007 Microsoft Outlook 2010 Microsoft Outlook 2013 Windows Live Mail 2011 Apple Mail 5.2 Android (Default) Gmail (ios/android)

Wyniki badań 7 Sposób interpretacji CSS jest różny w poszczególnych aplikacjach pocztowych. Na poniższych stronach przedstawiamy zestawienie wsparcia właściwości CSS dla 16 najpopularniejszych w Polsce aplikacji pocztowych. Techniki email marketingowe idą rok rocznie coraz bardziej do przodu. Rozwijają się języki za pomocą których można kodować mailingi. CSS3, jak i HTML5, dają duże pole do popisu. Jednak co na to aplikacje pocztowe? Tegoroczne badania pokazały, że niekwestionowanym liderem we wspieraniu atrybutów CSS3 jest Apple Mail. Odbiorcy korzystający z tego programu otrzymają najlepiej wyświetlające się mailingi. Zaokrąglone rogi buttonów, gradient na przyciskach, dowolność obrazka w tle, to wszystko dostać mogą użytkownicy Apple Maila. Po drugiej stronie barykady znajduje się Outlook. Microsoft nie polepszył niestety wspieralności CSS w swoim Kliencie i Outlook 2013 nadal pozostaje daleko w tyle. Można zapomnieć o gradiencie czy zaokrąglonych rogach, nie mówiąc już o obrazku w tle. Po środku znajduje się cała reszta aplikacji. Restrykcyjny Gmail, WP czy Onet bardzo różnorodnie się zachowują i aby dokładnie wiedzieć, co w której aplikacji ma prawo zadziałać należy zapoznać się ze szczegółowymi wynikami badania. 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ę. 11% maili marketingowych otwieranych jest na urządzeniach mobilnych 35% maili marketingowych otwieranych jest na aplikacjach webowych 54% maili marketingowych otwieranych jest na programach desktopowych

Tabela zbiorcza Analiza właściwości CSS 8 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL gradient - tło mailingu gradient - tło z trickiem div gradient - button text-shadow border-radius multikolumn box-shadow text-overflow -> div czcionka zewnętrzna -> link czcionka zewnętrzna -> @import w head czcionka zewnętrzna -> @import w body

Tabela zbiorcza Analiza właściwości CSS 9 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL background - body background-image background-repeat background-position background-size (px) background-size (%) background-size :cover (mniejszy bok) background-size :contain(dłuższy bok) background - table background background-repeat background-position

Tabela zbiorcza Analiza właściwości CSS 10 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL background-size (px) background-size (%) background-size: cover (mniejszy bok) background-size: contain (dłuższy bok) background - td background background-repeat background-position background-size (px) background-size (%) background-size: cover (mniejszy bok)

Tabela zbiorcza Analiza właściwości CSS 11 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL background-size: contain (dłuższy bok) display:block display:inline display: inline-block style element <style></style> element w sekcji<head> <style></style> element w sekcji<body> link element <link></link> element w sekcji<head> <link></link> element w sekcji<body>

Tabela zbiorcza Analiza właściwości CSS 12 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL selektory e * e > f e:link e:active e:hover e:focus e+f e[foo]

Tabela zbiorcza Analiza właściwości CSS 13 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL e.classname e#id e:first-line e:first-letter właściwości tła background-color właściwości obramowania border border-color border-collapse

Tabela zbiorcza Analiza właściwości CSS 14 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL border-spacing border-style border-width listy list-style-position list-style-type czcionki font-family font-size font-style

Tabela zbiorcza Analiza właściwości CSS 15 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL font-variant font-weight marginesy i wcięcia margin padding właściwości tekstu color direction letter-spacing line-height

Tabela zbiorcza Analiza właściwości CSS 16 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL text-align text-decoration text-indent text-transform word-spacing white-space pozycjonowanie bottom clear clip

Tabela zbiorcza Analiza właściwości CSS 17 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL float left position right top vertical-align z-index rozmiar height width

Tabela zbiorcza Analiza właściwości CSS 18 GMAIL.COM OUTLOOK.COM INTERIA.PL WP.PL ONET.PL YAHOO! MAIL OUTLOOK '07 / '10 / '13 OUTLOOK '03 THUNDERBIRD WINDOWS LIVE MAIL APPLE MAIL ANDROID (DEFAULT) GMAIL (IOS / ADROID) O2.PL min-height min-width inne właściwości cursor empty-cells opacity overflow visibility

Praktyczne porady dla projektantów mailingów i developerów 19 W codziennej pracy nauczyliśmy się kilku trików podnoszących szanse dostarczenia wiadomości e mail do skrzynki adresata w niezmienionej formie. Poniżej dzielimy się tą praktyczną wiedzą i zachęcamy do jej stosowania. Struktura Czyli o czym należy pamiętać i co warto wiedzieć zanim zabierzesz się za kodowanie. Konwencja - kod html mailingu musi być poprawny i bez błędów. Wszystkie znaczniki języka HTML, typu: table, td, tr, img itd. muszą być domknięte. Wiedza wcale nie tajemna, ale warta zapamiętania. Poprawny układ <html> <head> </head> <body> </body> </html> HTML HEAD BODY Tabele - mailingi jeszcze długo będą oparte o tabele. Szablony oparte na divach nie sprawdzają się bowiem w sporej liczbie klientów pocztowych ponieważ nie trzymają nadanego im układu. Dlatego też jest konieczność stosowania tabel, aby utrzymać odpowiedni kształt mailingu. Tabele są jednak dobrą opcją gdyż są dobrze zdefiniowane i łatwo nimi operować. Przy budowaniu mailingu ważne jest, aby sumaryczna szerokość poszczególnych komórek tabeli była równa całej szerokości tabeli nadrzędnej. Komórki można scalać w obrębie wiersza (colspan -> poziomo), natomiast nie może ich scalać w obrębie jednego rzędu (rowspan -> pionowo).

Praktyczne porady dla projektantów mailingów i developerów 20 Zanim zaczniesz Aby nie musieć poprawiać jak skończysz przeczytaj o czym warto wiedzieć zanim zaczniesz. Kodowanie znaków - zgodnie ze standardami panującymi w sieci, szablony kodujemy w standardzie UTF-8. Starsze kodowania jak iiso-8859-2 czy cp-1250 sprawdzają się tylko w wysyłkach kampanii do polskich odbiorców. W przypadku międzynarodowych wysyłek lub nawet odbiorcy wiadomości na obcojęzycznych aplikacjach zamiast polskich znaków zobaczą krzaki lub inne dziwne znaczki. Reasumując używamy UTF-8. Charset - kodowanie znaków UTF-8 <meta http-equiv="content-type" content="text/html; charset=utf-8"/> Charset - kodowanie znaków iso-8859-2 <script> oraz <link> - to dwa znaczniki, których używania nie zalecamy. Za pomocą <script> osadzamy kod JavaScript, a za pomocą <link> zewnętrze arkusze styli css. Większość programów pocztowych pomija jednak te dwa znaczniki w szablonie mailingów. Szerokość mailingu - wiele źródeł podaje, że optymalna szerokość mailingu wynosi około 650px. Bierze się to przede wszystkim z praktyki. Żaden program lub aplikacja pocztowa nie udostępnia nam całej powierzchni monitora na wyświetlenie maila. Zawsze znajdzie się okienko ze strukturą katalogów, listą wiadomości czy reklamą, zwłaszcza na aplikacjach webowych. Efektem tego jest fakt, że tylko niewielka część ekranu pozostaje na wyświetlenie Twojego maila. Obecnie najpopularniejszą rodzielczością monitorów, z których korzystają internauci jest 1366px na 768px, która stanowi prawie 25% całego rynku (ranking.pl -> 15.10.2013-11:37). Rekomendujemy więc szerokość nie większą niż 640px, a efektem jest optycznie nie za szeroko i nie za wąsko, miejsce na zdjęcia a także na tekst. Szerokość maxymalna równa 600px pozwoli dotrzeć z poprawnym komunikatem do 80% rynku. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"/>

Praktyczne porady dla projektantów mailingów i developerów 21 Kodowanie czas zacząć Zatroszcz się o wszystkie poniższe elementy, a efekt finalny na pewno będzie zadowalający Wymiary - Dobrą praktyką jest podawanie wymiarów poszczególnych elementów, tabel oraz obrazów zarówno w znaczniku html (width= 10 height= 10 ) oraz w css (style= width: 10px; height:10px ). Wymiarować należy każdy element, aby szablon stał się sztywny i nie rozjeżdżał się. Wymiary podaje się w pikselach. Stylowanie - Szablony stylować należy za pomocą css-ów, wpisując właściwości inline w elementy. Wiele programów pocztowych nie pozwala na linkowanie zewnętrznych arkuszy styli, a także pomija te zawarte w sekcji head oraz body. Skala monitora 1024x768 Stosowanie popularnych skrótów dla właściwości CSS, nie jest mile widziane w niektórych klientach pocztowych. W związku z tym warto z nich zrezygnować stosując pełne definiowanie właściwości (np.: padding-let:0px; padding-right:10px; padding-top:0px; padding-bottom:20px stosujemy zamiast padding:0 10px 20px 0px). Podczas stylowania należy zadbać zarówno o odpowiednich klientów pocztowych, jak i o różne przeglądarki.

Praktyczne porady dla projektantów mailingów i developerów 22 Dla niektórych właściwości (np. border-radius) trzeba zadeklarować również właściwości pod różne przeglądarki. Szczegółowa analiza poniższych tabeli będzie pomocna. Stylowanie inline <span style="font-weight:bold">treść</span> Zaciągnięcie styli zewnętrznych <link rel="stylesheet" href="style.css" media="all"/> <style> w sekcji head lub body <style type="text/css" media="screen"> span{ font-weight:bold; } </style> Obrazki - Treści obrazkowe bardzo uatrakcyjniają wygląd mailingu, ich poprawne użycie wymaga jednak trochę pracy. Obrazki powinny być dostosowane wielkością oraz szerokością do wymiarów komórki tabeli, w której się znajdują. Oczywiście możliwe jest załączenie większego obrazka i zeskalowanie go za pomocą parametrów html-owych, lecz obrazek jest wtedy ciężki i waga samego maila się bardzo zwiększa, co negatywnie wpływa na ocenę wiadomości przez filtry antyspamowe. W kodzie wiadomości powinieneś zadeklarować więc wymiary obrazka za pomocą znaczników html (width=, height = ) oraz jak wskazuje dobra praktyka koderska, także za pomocą właściwości css (style= width: yy px; height: yy px; ). Obrazki powinny być pobierane z absolutnych adresów URL, tzn. przed wysyłką kampanii, obrazki powinny zostać wysyłane na zewnętrzne serwery i stamtąd pobierane do mailingu. Jeśli korzystasz z FreshMaila, dzieje się to automatycznie. ALTy - Zazwyczaj w programach pocztowych obrazki domyślne się nie wyświetlają. Użytkownik musi pobrać obrazki, więc zanim to uczyni zobaczy szablon maila z ALTami, czyli tekstami widocznymi pod obrazkami. ALTy można stylować za pomocą css-a. Sposób wyświetlania ALTów jest zależny od przeglądarki i programu pocztowego, którego używa czytelnik do odbierania poczty.

Praktyczne porady dla projektantów mailingów i developerów 23 Gdy ALT ma długość maksymalnie 14 znaków jak np. pobierz obrazy to nie powinno być żadnych problemów z jego pojawianiem się w mailingu. Problemy mogą się pojawić w momencie gdy długość tekstu jest większa niż szerokość obrazka. Analizując poniższe tabele można zauważyć, że tylko Mozilla Firefox w całości wspiera ALTy, dłuższy tekst jest zawijany do nowej lini i wspierane jest pełne jego stylowanie. Natomiast Chrome oraz oparta na tym samym silniku renderującym norweska Opera w przypadku gdy tekst jest za długi, w ogóle nie wyświetlają takiego alta. Programy dekstopowe także różnie interpretują ostylowanie ALTów. Dodatkowo programy rodziny Outlook dodają od siebie informacje o pobraniu obrazów a dopiero później wstawiają treść ALTa. Preheader - to tekst, który pojawia się w niektórych skrzynkach Pocztowych zaraz za tematem (przede wszystkim w mobilnych aplikacjach, w Gmailu oraz w Outlooku). Jest to dodatkowe miejsce na przekaz marketingowy. Można go personalizować i wstawić do niego znaczki, które są coraz bardziej popularnym elementem tematów mailingów. Dobrze zrobiony preheder, widoczny jest tylko na etapie zamkniętego maila, więc nie komponuj kreacji w odniesieniu do niego, bo nie każdy go zobaczy. Design w mailingu Graceful degradation - to metoda polegająca na kodowaniu maila pod klienta pocztowego, który najlepiej wspiera css z zachowaniem poprawnego wyświetlania się tej wiadomości na słabszych klientach. Zmiany, zmiany Co zmieniło się w skrzynkach pocztowych? o2 i Interia idą w ślady Gmaila wprowadzając zakładki tematyczne. Zobacz jak wpływa to na efektywność kampanii mailingowych. Pełne wsparcie Więcej > Brak wsparcia

Praktyczne porady dla projektantów mailingów i developerów 24 Background-image - wstawiając obrazek jako tło maila należy pamiętać, że nie będzie się on wyświetlał np. na Outlooku. Warto więc zadbać o to, aby kolor tła był dopasowany do koloru zdjęcia wstawionego jako tło. W przypadku nie wyświetlenia się obrazka pozwoli to zachować spójność wyglądu. Gradient - to łagodne przejście z jednego koloru w drugi. Zabieg ten pozwala uatrakcyjnić formę wypełnienia tła maila oraz tła jego elementów.

Praktyczne porady dla projektantów mailingów i developerów 25 Zaokrąglone rogi - użycie w zdjęciach czy buttonach delikatnie zaokrąglonych rogów, złagodzi odbiór maila i nada mu ciekawszą formę. widoczny od razu po otwarciu maila, gdyż wymagał pobrania obrazków, aby go zobaczyć. Stosując nowoczesne techniki można za pomocą css a skodować button (gradientowe tło oraz zaokrąglone rogi nie są problemem dla css a), który będzie widoczny od razu po otwarciu maila. Pamiętaj jednak, aby uważać na słowa typu darmowy, oferta specjalna, kup teraz itp., są bowiem bardzo spamogenne, dlatego zanim wyślesz mailing, zrób testy antyspamowe. Button jak obrazek - do tej pory buttony call to action wstawiano jak grafikę, gdyż bardzo często posiadał gradientowe tło oraz zaokrąglone rogi. Minusem takiego rozwiązania był fakt, że taki button nie był

Praktyczne porady dla projektantów mailingów i developerów 26 Jestem PRO: Ukryte atrybuty - aby Twój szablon był lepszy zadbaj o na pierwszy rzut oka niewidoczne elementy: Należy pamiętać, aby każdy link w newsletterze posiadał swój atrybut title, krótko opisujący stronę do której kieruje. Warto pamiętać o atrybucie _blank dla linków. Jest on bardzo ważny ponieważ wymusza on otwarcie linka w nowej karcie przeglądarki. Jego brak może zakończyć się próbą otwarcia linka w oknie poczty a tym samym zawieszeniem aplikacji desktopowej obsługującej pocztę elektroniczną. Testy: Każdy projekt maila należy przetestować w jak największej liczbie programów pocztowych, aby zyskać pewność, że odbiorca zobaczy wiadomość w sposób, w jaki sobie życzysz. Z FreshMailem możesz to robić automatycznie bez konieczności instalowania jakichkolwiek aplikacji. Wiadomość email powinna posiadać link rezygnacji pozwalający na łatwe wypisanie się z subskrypcji. W przypadku FreshMaila, aby stworzyć link rezygnacji wystarczy w stopce dokumentu zamieścić. Znacznik $$resignlink$$ lub zapisać dowolny tekst pomiędzy znacznikami <resignlink> i </resignlink>.

Praktyczne porady dla projektantów mailingów i developerów 27 Testy antyspamowe - We FreshMailu istnieje możliwość sprawdzenia przed wysłaniem wiadomości, czy email nie zostanie potraktowany jako spam. Kampania testowa pozwoli wysłać realnego maila na Twoją skrzynkę pocztową. Możesz wtedy ostatecznie zobaczyć jak Twój mail będzie się prezentował. Ważne jest, aby unikać newsletterów będących jednym wielkim obrazkiem. Taka wiadomość ma spore szanse, aby trafić do folderu spam w skrzynkach Twoich odbiorców. Jeśli koniecznie chcesz wysłać dużą grafikę, warto pociąć ją na kilka mniejszych obrazków. Filtry antyspamowe analizują składnię każdej wiadomości. Należy unikać stosowania słów sugerujących, że Twoja wiadomość ma charakter testowy (np. Lorem ipsum). Należy unikać krzykliwych czcionek mogących sugerować filtrom antyspamowym, że email jest wiadomością niepożądaną. Porada: FreshMail posiada funkcję FreshMail Inspektora, która wykrywa ponad 30 najczęściej popełnianych błędów przez marketerów. Warto zawsze pamiętać o odpowiednim sprawdzeniu swojej wiadomości zwłaszcza, że nic nas to nie kosztuje :) Porada: FreshMail posiada funkcję spam testu - dzięki niemu możesz w łatwy sposób sprawdzić czy Twoja wiadomość nie zostanie zakwalifikowana jako spam przez następujące zabezpieczenia: Outlook 2003, Outlook 2007, Home.pl, Gmail.com, Onet.pl, GG.pl, o2.pl, Wp.pl, Interia.pl

Przepis na idealny mailing 28 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ąć? Na bazie wiedzy na temat technologii CSS w aplikacjach pocztowych sugerujemy przyjąć następujący schemat przygotowania szablonu maila. Rozpoczynamy standardowo, tworząc szkic makiety naszego szablonu, który będzie zrozumiały i atrakcyjny dla odbiorcy. Następnie projekt trafia do grafika, wraz z wytycznymi dotyczącymi standardów kodowania szablonów, przy czym stale nadzorujemy pracę kreacji i konsultujemy poszczególne odsłony szablonu, aby na koniec przystąpić do jego kodowania. Przygotowanie makiety funkcjonalnej -> graficzny projekt szablonu -> kodowanie szablonu (CSS + HTML) Poniżej pobrać możesz kod przykładowego, prawidłowo skodowanego mailingu. Skorzystamy z wcześniejszych rad i dorzucimy kilka nowych. Szablon maila powinien składać się z czterech podstawowych elementów: element pozycjonujący (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ść dokumentu wynosi 610px

Kod przykładowego mailingu 29 Kiknij na monitorze, aby pobrać przykładowy kod mailingu

Przydatne linki 30 Poniżej linki, które mogą okazać się pomocne wszystkim Front End Developerom zmagającym się z kodowaniem mailingów. www.freshmail.pl/blog www.freshmail.pl/wiedza-i-pomoc www.freshmail.pl/inspirujace-newslettery www.email-standards.org www.smartinsights.com/archive/email-marketing blog.returnpath.com blog.wordtothewise.com

O systemie FreshMail 31 FreshMail to wszystko czego potrzebujesz, aby wysyłać efektywne newslettery i mailingi. Intuicyjny system, piękne szablony, które łatwo dopasujesz do swoich potrzeb, rozbudowane raporty oraz wiele funkcjonalności, które pozwolą Ci łatwo i szybko tworzyć skuteczne kampanie email marketingowe. FreshMail to nie tylko niezawodny system do email marketingu, to także zespół profesjonalistów, specjalizujących się w kompleksowej obsłudze działań z zakresu email marketingu. Na szczególną uwagę zasługuje także FreshMail Designer - intuicyjny edytor szablonów. Dostajesz do rąk narzędzie dające Ci pełną samodzielność w kreowaniu pięknych i skutecznych newsletterów. Znajomość HTML jest zbędna. Obecność grafika, też nie jest już potrzebna. Biblioteka szablonów i łatwy sposób edycji to ogromna oszczędność czasu i gwarancja profesjonalnego szablonu. Ludzie FreshMaila to eksperci z pasją podchodzący do swojej pracy i czerpiący satysfakcje z sukcesów swoich Klientów. Jednak nie sztuka nazywać się ekspertem, sztuka jest to udowodnić - nam się udało. Jesteśmy najczęściej nagradzaną agencją za kreatywne działania email marketingowe w Polsce.

Usługi z zakresu email marketingu 32 FreshMail to nie tylko samo narzędzie do wysyłki maili, to także zespół ludzi z doświadczeniem w zakresie email marketingu, których efektywne działania zostały wielokrotnie nagrodzone i wyróżnione w prestiżowych konkursach marketingowych. Co możemy Ci zaproponować? Strategia komunikacji email marketingowej przeanalizujemy Twoją komunikację w Internecie, zoptymalizujemy sposoby pozyskiwania informacji o Klientach, a także zaproponujemy nowe. Skrupulatnie przyjrzymy się Twoim produktom i konsumentom oraz zasugerujemy segmentację grup komunikacji marketingowej. Budowanie bazy adresowej powiedz tylko jakie dane chcesz zbierać, a my zaproponujemy Ci efektywną strategię pozyskania adresów do Twojej bazy. Planowanie kampanii jeżeli nie masz własnej bazy, zaproponujemy Ci kampanię email marketingową przy użyciu zewnętrznych dostawców baz danych. Kreacja czy wiesz, jak wielkie znaczenie ma dobrze dobrany komunikat i właściwie skrojona kreacja? Dobrze zaprojektowany mailing może oznaczać kilkukrotnie wyższą efektywność jeśli chodzi o klikalność, ale przede wszystkim wyższy stopień zapamiętania samego przekazu zawartego w newsletterze. Ale to dopiero początek naszej współpracy. Skuteczne działania emarketingowe to proces ciągłej, długookresowej komunikacji z klientem.

Zapraszamy do współpracy 33 Pomoż w rozwoju raportu Raport ma na celu pomoc w codziennym zmaganiach z projektowaniem i wdrażaniem szablonów emailowych. Wszelkie konstruktywne uwagi oraz spostrzeżenia czytelników są mile widziane. Zapraszamy wszystkich zainteresowanych Front End Developerów do współpracy przy tworzeniu kolejnych jego wersji. Odezwij się do nas na css@freshmail.pl sprzedaz@freshmail.pl 12 617 60 11 Przetestuj FreshMaila! Załóż darmowe konto na www.freshmail.pl