Szablon HTML do newslettera e-mailowego

Zwykły e-mail tekstowy wystarczy do krótkiej wiadomości, ale newsletter, oferta czy wiadomość powitalna zwykle potrzebują więcej: logo, zdjęcia, wyraźnego przycisku. To właśnie e-mail HTML. Wygląda jak mała strona internetowa, ale buduje się go według zupełnie innych zasad, bo programy pocztowe są znacznie bardziej restrykcyjne niż przeglądarki. Oto co zawiera dobry szablon i jak go przygotować.

Dlaczego e-mail to nie strona internetowa

Gmail, Outlook, Apple Mail i aplikacje na telefon wyświetlają HTML każdy trochę inaczej, a wiele z nich ignoruje nowoczesny kod stron. Dlatego e-maile buduje się po staremu:

• Tabele do układu, a nie nowoczesne układy stron.
• Style zapisane przy każdym elemencie, bo wiele programów usuwa sekcje stylów.
• Czcionki systemowe, bo własne fonty internetowe często się nie wczytują.
• Bez skryptów, formularzy i wideo. Programy pocztowe ich nie uruchamiają. Zamiast tego użyj obrazka lub przycisku, który prowadzi do filmu albo formularza.

Elementy dobrego e-maila

• Tekst podglądu: krótki tekst widoczny obok tematu w skrzynce odbiorczej. To twój drugi temat, więc nie marnuj go na „Zobacz w przeglądarce”.
• Nagłówek: twoje logo, małe i z linkiem do strony.
• Tytuł i główne zdjęcie: o czym jest e-mail, widać na pierwszy rzut oka.
• Krótki tekst: najwyżej dwa lub trzy akapity.
• Jeden główny przycisk: „Zobacz kolekcję”, „Zarezerwuj stolik”. Przycisk zrobiony jako link działa wszędzie.
• Stopka: nazwa firmy, adres, kontakt i link do wypisania się.

Szerokość i telefony

Standardowa szerokość to około 600 pikseli, która mieści się na ekranie komputera i w panelu czytania większości programów. Na telefonie układ powinien zmienić się w jedną kolumnę, z tekstem na tyle dużym, by dało się go przeczytać, i przyciskami na tyle dużymi, by łatwo je było dotknąć. Ponad połowa e-maili jest otwierana na telefonach, więc najpierw sprawdź wersję mobilną.

Obrazki i tekst alternatywny

Niektóre programy blokują obrazki, dopóki czytelnik ich nie zezwoli. Napisz tekst alternatywny do każdego obrazka, żeby e-mail miał sens także bez nich, i nigdy nie umieszczaj ważnego tekstu wyłącznie na obrazku. Używaj tylko obrazków, do których masz prawa. Obrazki wgrywa się do serwisu mailingowego lub na stronę, a e-mail wskazuje ich adresy.

Link do wypisania się

Serwisy mailingowe i przepisy w wielu krajach wymagają łatwego sposobu wypisania się w każdym e-mailu marketingowym. Szablony zwykle zawierają symbol zastępczy, który podmieniasz na link lub tag do wypisania się z twojego serwisu.

Jak przygotować treść

• O czym jest e-mail i kto go dostanie.
• Fakty: ceny, daty, kody promocyjne, dokładnie w takiej formie, jak mają być.
• Dokąd prowadzi każdy przycisk: pełne adresy stron.
• Dane do stopki dokładnie w takim brzmieniu, w jakim mają się pojawić.
• Kolory i styl albo e-mail, który ci się podoba, jako wskazówka.

Przetestuj przed wysyłką

Wyślij e-mail do siebie w Gmailu, Outlooku i na telefon. Kliknij każdy link i przycisk, sprawdź tekst podglądu i obejrzyj e-mail z wyłączonymi obrazkami.

Podsumowanie

Dobry e-mail HTML korzysta z tabel i stylów wpisanych w elementy, ma około 600 pikseli szerokości, na telefonie zmienia się w jedną kolumnę i ma jeden wyraźny przycisk oraz porządną stopkę. Jeśli wolisz nie budować go samodzielnie, zamów e-mail HTML: opisujesz e-mail, ofertę i to, dokąd prowadzą przyciski, a dostajesz archiwum z gotowym kodem HTML i grafikami przygotowanymi specjalnie do niego, do zaimportowania do Mailchimp, Brevo lub innego serwisu mailingowego. Płatność zostaje zwolniona dopiero po zaakceptowaniu pracy.