Szablon newslettera: cztery przykłady do pobrania za darmo
Dobry szablon newslettera to jedna kolumna o szerokości maksymalnie 600 pikseli, z logo u góry, wyraźną hierarchią nagłówków i tekstu, jednym głównym przyciskiem, tekstami alternatywnymi przy każdym obrazie, przekazem zapisanym prawdziwym tekstem, linkiem rezygnacji i adresem nadawcy na dole. Kto utrwali te osiem elementów w szablonie wielokrotnego użytku, przy każdym wydaniu wymienia już tylko treść.
Poniżej najpierw cztery szablony startowe 2Mail jako przykład szablonu newslettera, każdy do pobrania za darmo jako HTML i z sytuacją, do której dany układ służy. Potem o tym, co powinno znaleźć się w każdym szablonie, gdzie coś się psuje w trybie ciemnym, na telefonie i w Outlooku, oraz jak zbudować taki szablon w kreatorze drag & drop od 2Mail.
Cztery szablony newslettera w HTML
To cztery szablony startowe, od których zaczynają Państwo pracę w kreatorze szablonów 2Mail. Wybierają Państwo jeden z nich, wymieniają tekst, kolory i obrazy, a wynik zapisują jako własny szablon. Wolą Państwo zacząć od zera? Wtedy zaczynają Państwo od pustego obszaru roboczego.
Newsletter
Nagłówek z kolorową linią pod spodem, krótki wstęp, dwa artykuły obok siebie, jeden przycisk i stopka z linkiem rezygnacji. Układ dla newslettera o stałym rytmie.
Pobierz jako HTML
Ogłoszenie („Announcement”)
Duży obraz u góry, nagłówek, krótki tekst, trzy punkty ze znakiem zaznaczenia i jeden wyraźny przycisk. Na premierę, nową usługę albo ofertę.
Pobierz jako HTML
Zaproszenie („Event Invitation”)
Nagłówek, wyróżniony blok z datą, nazwa wydarzenia, a pod nią miejsce i program obok siebie. Przycisk prowadzi do zapisów.
Pobierz jako HTML
Prosty tekst („Simple Text”)
Bez obrazów i bez przycisku: powitanie, Państwa tekst, podpis i stopka z linkiem rezygnacji. Czyta się jak osobistą wiadomość.
Pobierz jako HTMLObrazy to zrzuty ekranu samych szablonów startowych, a każdy plik do pobrania to ten sam plik: kod HTML, który kreator 2Mail generuje dla danego szablonu. Tekst przykładowy jest po angielsku; należy go zastąpić własną treścią. Są już Państwo klientem? Wtedy w kreatorze wystarczy wybrać „Start from template”: ten sam układ, ale edytowalny za pomocą bloków. Pobrany plik wczytuje się przez Templates → „Upload HTML”, a następnie edytuje w edytorze kodu.
Wzorzec, szablon, układ czy format?
Tych czterech słów używa się zamiennie i w praktyce oznaczają one to samo: stałą oprawę, w którą wlewają Państwo każde wydanie. „Szablon” i „wzorzec” odnoszą się do pliku wielokrotnego użytku, a „układ” i „format” raczej do jego podziału.
Układ newslettera
Układ to kolejność i rytm bloków: co stoi u góry, ile tematów idzie potem i gdzie trafia przycisk. Jedna kolumna to bezpieczny wybór; dwie kolumny są dopuszczalne przy siatce produktów, pod warunkiem że na telefonie układają się jedna pod drugą.
Nagłówek newslettera
Nagłówek to pas nad pierwszym tytułem: Państwa logo, podlinkowane do strony internetowej, i ewentualnie link do wyświetlenia wiadomości w przeglądarce. Powinien być niski i spokojny. Menu nawigacyjne z sześcioma linkami należy do strony internetowej, a nie do e-maila, i spycha treść w dół.
Format i wymiary
Powszechnie stosowany format to 600 pikseli szerokości, z obrazami dostarczanymi w podwójnej szerokości, aby pozostały ostre na telefonie. Długość jest dowolna, ale HTML powinien być lekki: Gmail ucina wiadomość, gdy kod przekracza około 100 kB, a wtedy znika też Państwa link rezygnacji.
Wygląd newslettera: osiem elementów dobrego szablonu
To nie preferencje projektowe, lecz elementy, z których każdy zapobiega konkretnemu problemowi: nieczytelności, filtrom antyspamowym, skargom albo zapomnianemu obowiązkowi prawnemu.
Jedna kolumna, 600 pikseli szerokości
Jedna kolumna czyta się wszędzie tak samo, od szerokiego ekranu po telefon. 600 pikseli to szerokość, którą praktycznie każdy klient pocztowy pokazuje bez poziomego paska przewijania.
Logo u góry
Odbiorca musi od razu widzieć, od kogo pochodzi wiadomość. Logo linkuje do Państwa strony i stoi w nagłówku, nad pierwszym tytułem — a nie jako wielki baner spychający treść w dół.
Wyraźna hierarchia
Jeden główny nagłówek, śródtytuły przy każdym temacie i krótkie akapity. Kto skanuje wzrokiem, musi w pięć sekund wiedzieć, o czym jest wiadomość. Prosimy używać rozmiarów pisma czytelnych także na małym ekranie.
Jeden główny przycisk
Każdy newsletter ma jedną rzecz, którą chcą Państwo, aby czytelnik zrobił: zamówił, zapisał się, przeczytał. Prosimy nadać temu działaniu przycisk zbudowany z tekstu, a nie z obrazu, aby pozostał widoczny również bez obrazów.
Teksty alternatywne przy każdym obrazie
Różne skrzynki pokazują obrazy dopiero po kliknięciu. Wtedy tekst alternatywny jest tym, co widzi czytelnik. Bez tekstów alternatywnych z bogatego graficznie newslettera zostaje sama pustka.
Przekaz w prawdziwym tekście
To, co mają Państwo do powiedzenia, prosimy umieścić w blokach tekstowych, a nie w jednym dużym obrazie. Filtry antyspamowe nie ufają wiadomości złożonej wyłącznie z grafiki, a kto ma zablokowane obrazy, nie zobaczy wtedy nic. Prawdziwy tekst zawsze pozostaje czytelny.
Link rezygnacji
Obowiązkowy i w Państwa własnym interesie: kto nie może się wypisać, klika „spam”, a to waży więcej niż wypisanie się. Prosimy umieścić link widocznie na dole, zwykłym językiem.
Adres nadawcy
Nazwa firmy i adres pocztowy na dole każdego newslettera. To obowiązek prawny, a zarazem sygnał zaufania: prawdziwa firma pod prawdziwym adresem.
Tryb ciemny, telefon i Outlook
Szablon, który dobrze wygląda w Państwa przeglądarce, nie jest jeszcze gotowy. Trzy środowiska dostarczają najwięcej niespodzianek.
Tryb ciemny
Klienty pocztowe w trybie ciemnym odwracają Państwa kolory albo je dostosowują. Ciemne logo na przezroczystym tle znika; biały tekst w kolorowym przycisku staje się nieczytelny. Prosimy używać logotypów z własnym tłem i testować w trybie ciemnym przed wysyłką.
Telefon
Duża część Państwa odbiorców czyta na telefonie. Jedna kolumna skaluje się sama, ale przyciski muszą być na tyle duże, aby dało się w nie trafić kciukiem, a rozmiary pisma poniżej 14 pikseli są na telefonie powiększane albo ignorowane.
Outlook
Wersja Outlooka na komputery używa własnego silnika renderującego, który nie zna wielu nowoczesnych rozwiązań CSS: obrazy tła, zaokrąglone rogi i część odstępów wypadają. Prosimy budować szablon na tabelach, trzymać skład prosty i wysłać test na konto Outlook.
Testowanie w prawdziwych skrzynkach nie jest więc formalnością. Prosimy utworzyć w 2Mail małą grupę testową z własnymi adresami i wysłać kampanię najpierw tam, do co najmniej trzech prawdziwych skrzynek: webmaila, telefonu i Outlooka na komputerze. To, co dobrze wygląda tam, wygląda dobrze niemal wszędzie.
Kreator szablonów 2Mail
Nie muszą Państwo pisać HTML-a. Kreator szablonów drag & drop w panelu zamienia powyższe osiem elementów w bloki, które Państwo przeciągają, wypełniają i zapisują.
Przeciąganie bloków
Tekst, obraz, przycisk, linia oddzielająca i kolumny: przeciągają Państwo bloki w wybranej kolejności i wypełniają je. Kreator pilnuje szerokości i struktury i buduje HTML na tabelach, z rozwiązaniami dla Outlooka.
Szablony wielokrotnego użytku
Prosimy zapisać swój układ jako szablon i używać go przy każdym wydaniu. Logo, kolory, stopka i link rezygnacji są stałe; wymieniają Państwo tylko treść. Dzięki temu każdy newsletter pozostaje rozpoznawalny i nie zapomną Państwo o obowiązkowym elemencie.
Podgląd na żywo na komputerze i telefonie
Podczas budowania widzą Państwo wiadomość w podglądzie na żywo i jednym kliknięciem przełączają się między widokiem na komputerze i na telefonie. Aby zobaczyć ją w prawdziwej skrzynce, prosimy wysłać kampanię najpierw do małej grupy testowej z adresami własnymi i współpracowników, a dopiero potem na swoją listę.
Budowa szablonu w pięciu krokach
Prosimy liczyć na pół dnia przy pierwszej wersji. Potem nowe wydanie kosztuje już tylko czas potrzebny na napisanie treści.
Prosimy wybrać strukturę
Prosimy zacząć od jednej kolumny o szerokości 600 pikseli i ustalić kolejność: logo, główny nagłówek, wstęp, dwa albo trzy tematy, przycisk, stopka. Prosimy naszkicować to na papierze przed otwarciem kreatora; idzie to szybciej niż przeciąganie tam i z powrotem.
Prosimy umieścić stałe elementy
Prosimy ustawić w kreatorze bloki wracające przy każdym wydaniu: logo, kolory, stopkę z nazwą firmy i adresem pocztowym oraz link rezygnacji. To ta część, której już nigdy Państwo nie ruszają.
Prosimy uzupełnić treść i główny przycisk
Prosimy napisać przy każdym temacie nagłówek i dwa do trzech zdań, dodać obraz z tekstem alternatywnym i umieścić jeden wyraźny przycisk. Prosimy sprawdzić w podglądzie na żywo, jak całość wygląda na komputerze i na telefonie.
Prosimy przetestować w prawdziwych skrzynkach
Prosimy utworzyć małą grupę testową z własnymi adresami i wysłać kampanię najpierw tam: do webmaila, na telefon i na konto Outlook. Prosimy obejrzeć ją także w trybie ciemnym. Prosimy poprawić to, co się przesuwa albo znika, i przetestować ponownie.
Prosimy zapisać go jako szablon
Prosimy zapisać przetestowany układ jako szablon wielokrotnego użytku. Kolejne wydanie zaczynają Państwo od tego szablonu i wymieniają tylko treść, dzięki czemu projekt i obowiązkowe elementy pozostają nienaruszone.
Lista kontrolna przed wysyłką
Prosimy przejść te sześć punktów przy każdym wydaniu. Zajmują dwie minuty i zapobiegają błędom, których nie da się już cofnąć, gdy kampania wyruszy.
