Jak przygotować szablon do wysyłek?

Zanim zaczniesz tworzyć szablon, musisz poznać podstawy merytoryczne umożliwiające przygotowanie szablonu e-mailingu. Poniżej znajdziesz wszystko, co powinieneś wiedzieć na temat tworzenia szablonu do wysyłek przez system FreshMail.

Wciąż trzeba mieć na uwadze fakt, że skrzynki pocztowe dostępne na rynku, nie zostały wyposażone w odpowiednio skonfigurowany interpreter poleceń kodu HTML, XHTML oraz CSS. Co to oznacza? Pamiętaj, że Twoi klienci prawdopodobnie korzystają z różnych programów pocztowych do odbierania poczty, a także otwierają mailingi w zwykłej przeglądarce internetowej, a czasem nawet w telefonie. Każdy z tych programów inaczej interpretuje kod, co może spowodować, że jeżeli nie poznasz odpowiedniej specyfikacji, mailing będzie wyglądał w każdym programie inaczej. Podstawowy cel podczas tworzenia mailingu powinien brzmieć – niezależnie od miejsca wyświetlania mailingu ma on wyglądać zawsze tak samo.

No dobrze – powiesz – ale skąd ja mam wiedzieć w jaki sposób dostawcy poczty interpretują kod? I tutaj, wykonaliśmy tę mrówczą pracę za Ciebie - przygotowaliśmy kilka niezbędnych źródeł. Przede wszystkim, musisz poznać podstawowe standardy kodowania mailingów [Standardy kodowania PDF]. Dowiesz się, jak poprawnie zbudować nagłówek wiadomości,  jak używać kaskadowych arkuszy stylów CSS, a także zobaczysz z jakich elementarnych części składa się każdy szablon.

Użyteczny będzie też nasz najnowszy raport „Technologia CSS w aplikacjach pocztowych. Wytyczne dla projektantów newsletterów.” Mimo, że rozwój CSS znacznie wyprzedza możliwości programów do odbierania poczty, dzięki takiemu zestawieniu dowiesz się jak pominąć wszystkie braki i zrobić wyśmienity szablon w CSS. Pełna wersja raportu [„Technologia CSS w aplikacjach pocztowych. Wytyczne dla programistów.” PDF]

Bogaty w tę widzę, możesz spokojnie zacząć przygotowywać szablon, który pokażesz z dumą swoim Klientom. Zanim to jednak zrobisz, krótka powtórka aby utrwalić wiadomości:

• Kodujemy w standardzie ISO-8859-2 (tzw. Latin-2). Pozostałe kodowania Windows-1250 oraz UTF-8 są zdecydowanie bardziej problematyczne, dlatego zalecamy korzystanie z tego pierwszego.


• Szablon musi mieć formę tabelaryczną sformatowaną za pomocą stylów CSS.


• Szerokość maila, którą rekomendujemy to ok. 600 px. Zazwyczaj, możemy polecić przedział pomiędzy 500 a 600 pikseli. Większe kreacje u użytkowników, którzy korzystają z ekranów o mniejszej rozdzielczości, mogą wymagać przewijania w poziomie, a jak wiadomo jest to niezgodne z utartymi zasadami użyteczności i projektowania.


• Konieczne, przy załączaniu w e-mailu elementów graficznych, jest stosowanie tagu alt, z odpowiednio przygotowaną treścią, przekonywującą do pobrania grafiki, gdy jest ona automatycznie blokowana (np. „Pobierz grafikę i zobacz co przygotowaliśmy dla Ciebie”). Do każdego obrazka dodajemy border="0" i display:block.


• Marginesy najlepiej określić za pomocą margin (cell – Margin, padding (cellPadding) wyznaczając w komórkach odpowiednią wartość wyrażoną w pikselach (TABLE cellMargin-10 cellPadding=5>). Trzeba jednak pamiętać, że padding może być niepoprawnie odczytywany przez programy typu Lotus.


• Najlepiej stosować czcionki Verdana, Tahoma, Arial lub Times New Roman z określeniem ich wielkości.


• Zalecamy też aby nie używać atrybutu <style> w sekcji HEAD.


• Grafiki powinny mieć rozszerzenia: JPG, JPEG, GIF, PNG (IMG src=”obrazek.gif”alt=”Pobierz grafikę, aby zobaczyć całą treść wiadomości”>). Grafika z płynnymi przejściami kolorów powinna mieć format JPG, ta składająca się z kilku kolorów powinna mieć format GIF lub PNG (8 bit).


• Grafiki umieszczane w tle (<table> <td> lub <tr>) mogą być niepoprawnie wyświetlane w niektórych programach pocztowych. Dlatego też zalecamy użycie atrybutu bgcolor i umieszczanie edytowalnego tekstu na tle o jednolitym kolorze.


• Wiadomość e-mail powinna posiadać link rezygnacji. Żeby go wstawić wystarczy aby w stopce dokumentu zamieścić link poprzez znacznik $$resignlink$$ lub zapisując dowolny tekst pomiędzy znacznikami <resignlink> i </resignlink>.


• Wszelkie bloki dokumentu zawierające kod powiązany z językiem Javascript lub Flash są przeważnie pomijane przez większość popularnych programów pocztowych.


• Import własnego szablonu do systemu Freshmail polega na spakowaniu plików dokumentu w formacie ZIP. Struktura takiego katalogu po rozpakowaniu powinna zawierać plik główny z rozszerzeniem .html, oraz pliki graficzne w dowolnym formacie wskazanym w dokumencie.


• Wiadomość nie powinna mieć więcej niż 100 kB aby nie zapychać skrzynek Twoich klientów:-)
• Zamiast <p> lepiej użyć znacznika <span>. Sprawia mniej problemów.
• Paddingi nie zadziałają. Wszelkie przestrzenie uzyskujemy tylko poprzesz zakodowanie pustych komórek tabel o określonych szerokościach.
• Wszystkie szerokości tabel i komórek w nich zawartch muszą zgadzać się co do piksela i muszą być określone (choćby HTML-owo).
• Im wiecej w newsletterze tekstu, tym lepiej. Obrazki nie zawsze otwierają się domyślnie. Czasami trzeba kliknąć "Pobierz obrazki", żeby je zobaczyć. Text widzimy od razu. Dlatego mailing, który powstał w oparciu tylko o obrazki to nie jest dobry pomysł. Nie mówiąc już o tym, że zbyt duże obrazki (rozmiarowo/wagowo) najprawdopodobniej spowodują, że newsletter wpadnie w spam. Jeżeli taka sytuacja się zdarzy, trzeba je pociąć na mniejsze.
• Atrybut line-height jest bardzo trudny do kontrolowania. W każdym kliencie pocztowym interpretowany jest nieco inaczej. Dlatego nie zaleca się projektowania kreacji newsletterów, w których występują boksy otoczone borderem z zaokrąglonymi rogami. Tych ostatnich nie da się bowiem skodować czystym HTML- em, czy CSS- em. Wstawianie borderów, jako grafiki jest z kolei bardzo ryzykownym przedsięwzięciem.
  
  
A teraz do dzieła:-) W przypadku pytań, zapraszamy do przestudiowania działu Baza Wiedzy lub kontaktowania się z nami na mail: info@freshmail.pl.