Jak stworzyć responsywny newsletter na wszystkich klientów poczty?

Jeśli chcesz stworzyć responsywny newsletter promujący Twoje produkty i dostarczyć go w odpowiedniej formie do swoich odbiorców – ten artykuł jest dla Ciebie!

W tym wpisie przedstawię jak zaprogramować responsywny newsletter, który pozwoli na dokładne odwzorowanie treści z makiety i dotarcie do potencjalnych klientów. Przeprowadzę Cię krok po kroku – od stworzenia projektu newslettera aż po wysłanie do klienta.

Tworzymy projekt graficzny newslettera

W przypadku projektu graficznego newslettera mamy kilka opcji:

1. Zlecenie projektu graficznego newslettera profesjonalnej firmie – jeśli nie czujesz się na siłach aby tworzyć samemu projekt graficzny newslettera, możesz zlecić to agencji interaktywnej lub grafikowi, aby zrobili to za Ciebie. Nie są to zazwyczaj jakieś ogromne pieniądze, a Ty masz pewność że projekt jest zrobiony dobrze – zapraszamy do współpracy (klik)
2. Własny projekt w programie do obróbki graficznej – jeśli miałaś/miałeś do czynienia z programami do obróbki graficznej możesz sam spróbować stworzyć projekt graficzny przy użyciu profesjonalnych narzędzi takich jak Photoshop czy chociażby darmowy GIMP. Polecam tutorial jak stworzyć przykładowy newsletter przy pomocy Photoshop (filmik dosyć stary, ale pozwala załapać podstawy) – Poradnik Tworzenie Newslettera w Photoshop (ENG)
3. Stworzenie projektu newslettera przy pomocy gotowych szablonów Canva – ta opcja jest zdecydowanie najmniej kosztowna oraz łatwiejsza niż tworzenie własnego projektu graficznego od zera w programach graficznych. Canva jest łatwym narzędziem działającym na zasadzie drag&drop oraz pozwala na szybkie i proste tworzenie grafik przy pomocy gotowych szablonów.

W tym poradniku wybieramy opcję nr. 3 i zaprojektujemy nasz newsletter przy pomocy aplikacji internetowej Canva. W sieci znajdziesz mnóstwo poradników jak tworzyć grafiki w tym popularnym narzędziu. Postaram się pokazać pokrótce jak stworzyć przykładowy newsletter na bazie, którego później zaprogramujemy nasz kod HTML newslettera.

Jak stworzyć newsletter w Canva?

Przede wszystkim przed stworzeniem newslettera należy zapoznać się z warunkami korzystania z aplikacji. Canva w swojej bazie posiada mnóstwo zdjęć i gotowych szablonów, na których mogą być różne znaki towarowe lub zdjęcia na których widoczni są ludzie. Korzystanie z takich obrazów może wiązać się z pewnymi konsekwencjami i naruszeniem praw autorskich. Warto więc zapoznać się z licencją Canva – License Agreements Canva oraz z artykułem Legalne Grafiki Canva (PL)

Gdy zapoznaliśmy się z warunkami korzystania z narzędzia oraz założyliśmy konto na stronie https://www.canva.com/ możemy przejść do tworzenia grafiki.

Wybór szablonu Newsletter w Canva

Po zalogowaniu się na stronie głównej znajduje się pasek z wyborem szablonu grafiki, którą chcemy zaprojektować. Wybieramy kategorię Marketing oraz szablon Email Newsletter.

Przeniesie nas do strony projektowania grafiki. Po lewej stronie znajdują się gotowe szablony służące do email marketingu w różnych branżach. Możesz wybrać dowolny szablon i skorzystać z niego jako projekt swojego mailingu.

Wybieramy darmowy szablon, który najbardziej nam odpowiada i odpowiednio edytujemy wstawiając własną treść. Pamiętaj aby upewnić się, że obrazy znajdujące się w treści mailingu nie naruszają praw autorskich oraz że mamy prawo do umieszczenia tych obrazów w naszym newsletterze.

Czcionki oraz układ naszego newslettera możemy edytować na dowolny sposób. Canva jest intuicyjnym narzędziem więc edycja jest bardzo prosta. Jeśli natomiast nie wiesz jak się za to zabrać polecam poradnik video opisujący jak używać większości funkcji – Poradnik Jak używać Canva dla początkujących (ENG)

Gotowy szablon newsletter

Przy pomocy Canva i lekkiej modyfikacji gotowego szablonu (zmieniając kolorystykę, treść i obrazy) uzyskaliśmy własny projekt graficzny naszego mailingu. Canva nie jest idealnym narzędziem do tego typu projektów. Szczególnie w wersji darmowej z której w tym przypadku korzystamy. Poza ładnym wyglądem naszego newslettera otrzymujemy również kilka problemów do rozwiązania:

1. Szablon Email Newsletter w Canva jest dwustronnicowy – szablon email marketingu jest w dwóch stronach natomiast sam mailing będzie jednolitą grafiką.
2. Brak wymiarów projektu – niestety ale Canva nie opisuje nam w pikselach wielkości elementów czy odstępów między nimi.

Jak widzicie nic nie jest idealne. Najlepszym rozwiązaniem byłby tutaj profesjonalny program pozwalający na zdefiniowanie wymiarów grafiki i możliwość sprawdzania na bieżąco takich rzeczy jak odstępy między elementami czy wielkość elementów w pikselach. Otrzymując makietę od grafika w programach takich jak Adobe XD czy Zeplin mamy wgląd we wszystkie szczegóły projektu takich jak czcionki, odstępy i wymiary zaraz po najechaniu na dany element.

Profesjonalna makieta projektu pozwala na szybsze tworzenie projektu oraz łatwiejszy dostęp do szczegółów elementów grafiki.

Dwustronicowy przykładowy projekt mailingu uzyskany przy pomocy Canva:

Newsletter kompatybilny z wszystkimi klientami poczty – czy to możliwe?

Tworząc newsletter mamy zamiar dotrzeć do jak największej liczby odbiorców i zachęcić ich do kliknięcia w naszą reklamę. Gdy wysłana grafika będzie wyświetlała się w sposób niezgodny z naszym projektem wówczas ryzykujemy utratę potencjalnych klientów. Ważne jest aby zadbać o kompatybilność ze wszystkimi możliwymi skrzynkami email.

Skrzynki pocztowe są różne i zachowują się w różny sposób. Kodowanie newslettera nie jest rzeczą prostą ze względu na różnorodność wymogów technicznych poczty elektronicznej.  Każdy dostawca usług email ma inne wymogi co do kodu HTML oraz CSS. Powoduje to problemy z wyświetlaniem treści mailingowych. Przykładowo pogląd pliku HTML z naszym newsletterem w przeglądarce internetowej nie odzwierciedla wyglądu pliku dostarczanego na adres email.

Naszą wiadomość należy dokładnie przetestować dla wszystkich klientów poczty, które mogą być naszymi odbiorcami. Dopiero po wysłaniu wiadomości i odebraniu jej na danym koncie email będzie wiedzieć jak interpretuje ją klient poczty.

Na stronie Campaign Monitor mamy listę styli CSS oraz kodu HTML, które zachowują się różnie w zależności od popularnych aplikacji mailowych (przeglądarka internetowa, aplikacja gmail itp.). Należy wspomnieć też o tym, że aplikacja to jedno, a klient poczty to drugie (onet, wp, interia itp.). W obu przypadkach mogą występować różne wymogi co do kodu HTML czy CSS.

Lista CSS Support Campaign Monitor (klik)

Kodujemy responsywny newsletter na podstawie projektu graficznego

Przedstawiłem mniej więcej jak skrzynki mailowe w różny sposób interpretują dostarczany kod HTML i CSS. Teraz musimy się zastanowić w jaki sposób stworzyć nasz newsletter tak aby odpowiednio wyświetlał się we wszystkich skrzynkach. Ważne jest też aby rozwiązanie to było responsywne i wyświetlało się prawidłowo na wszystkich rozdzielczościach.

Tabela – przyjaciel każdego newslettera

Z pomocą przychodzi nam jedna z najstarszych struktur HTML – tabela. Skrzynki oraz aplikacje mailowe nie mają problemu z interpretacją widoków opartych właśnie na tabelach.

Należy zadbać o to aby struktura tabel była oparta na szerokościach opartych na %. Pomoże nam to w zapewnieniu naszemu mailingowi responsywności.

Warto pamiętać również o maksymalnej szerokości contentu newslettera. Nie możemy przesadzić z maksymalną szerokością naszego mailingu, ponieważ odbiorca może otrzymać niepoprawnie wyświetloną zawartość. Bezpieczną szerokością newslettera będzie szerokość do 600px. Bez względu na klienta pocztowego odbiorcy, rozdzielczość jego ekranu lub rozmiar monitora – newsletter powinien wyświetlić się prawidłowo.

Kod startowy mailingu – HTML boilerplate for Newsletter

Poniżej przykładowy kod startowy dla naszego mailingu:

Tworzenie tabel i styli przykładowego newslettera

Tworzenie struktury newslettera i późniejsze stylowanie jest procesem dosyć żmudnym i wymagającym sporo czasu. Wszelkie zmiany jakie zajdą w kodzie od kodu startowego znajdziecie na końcu artykułu w pliku do pobrania. Można z niego korzystać i w dowolny sposób przerabiać.

Jeśli chodzi o tworzenie tabel i styli jest mnóstwo poradników, które pomagają zrozumieć w jaki sposób to działa i jak należy pisać taki kod. Od siebie mogę polecić dwa poradniki:

1. Build an HTML Email Template From Scratch (ENG) – dowiesz się więcej o tworzeniu tabel w newsletterze
2. A Complete Guide to the Table Element (ENG) – porady, triki i podstawy tworzenia i stylowania tabel

Czcionki w email marketingu

Czcionki w mailach to również temat rzeka. Importowanie czcionek pomiędzy znacznikami <head> w kodzie HTML zazwyczaj nie zadziała w przypadku mailingu. To samo tyczy się importowania za pomocą stylu @import oraz prób importu wewnątrz tagu <body>.

Najbezpieczniejszą opcją jest korzystanie z czcionek ogólnie powszechnych, które powinny być dostępne na każdym komputerze, w każdej przeglądarce i na każdej skrzynce mailowej.

Dobieramy najbardziej podobną czcionkę do czcionki z naszego projektu. Czcionkę sprawdzamy w Canva za pomocą kliknięcie na dany napis.

Nasze czcionki to:

• Nagłówki: Glacial Indifference
• Tekst pochylony: Libre Baskerville
• Akapity: Lato
• Click To Action (Przycisk): Glacial Indifference

Teraz szukamy podobnych czcionek wśród bezpiecznych fontów:

1. Arial
2. Arial Black
3. Helvetica
4. Tahoma
5. Verdana
6. Impact
7. Times New Roman
8. Georgia
9. Courier New
10. Comic Sans

Teraz wystarczy dobrać po wyglądzie czcionkę, która najbardziej odzwierciedla czcionkę z projektu graficznego. Nie będziemy mieli dokładnego odwzorowania czcionki ale możemy się zbliżyć do wyglądu czcionki z makiety.

W naszym przypadku czcionki użyte w gotowym szablonie Canva użytym do stworzenia naszego projektu graficznego są bardzo specyficzne. Ciężko będzie odwzorować czcionki z makiety. W przypadku, gdyby projekt graficzny newslettera tworzył profesjonalny grafik – nie byłoby tego problemu. Grafik zadbałby o wybór odpowiednich czcionek dla projektu naszego mailingu.

Wybraliśmy czcionki:

• Arial – dla nagłówków i CTA
• Helvetica – dla akapitów
• Times New Roman, italic – dla tekstu pochylonego

Poza doborem czcionek ważna jest też jej grubość, wielkość oraz rozstaw liter. Wszystko to znajdziemy w programie Canva w naszym projekcie graficznym. Wystarczy wybrać tekst i sprawdzić jego wartości.

Dobrane czcionki i różnice:

Różnice są niewielkie, natomiast widać, że teksty są różne i wpływa to na całą estetykę projektu. Szczególną różnicę widać w nagłówkach newslettera.

Responsywny newsletter – jak to zrobić?

Responsywny mailing może być bardzo problematyczny dla programisty. Mailing może być podzielony na widok na urządzenia większe (desktop, tablet) oraz na mniejsze rozdzielczości – smartphones. Taki podział wymaga dwóch oddzielnych projektów graficznych oraz większego nakładu pracy.

Responsywność nie oznacza, że mailing musi być podzielony na dwa oddzielne widoki. Oznacza to, że ma wyglądać dobrze na wszystkich rodzajach urządzeń. Wiadomo, że im bardziej czytelne czcionki, większe grafiki oraz bardziej dostosowany widok do wyświetlacza tym lepsze wrażenie będą mieli odbiorcy.

W przypadku mailingu użytego w tym poradniku nie tworzyliśmy drugiego widoku dla urządzeń mobilnych. Stworzyliśmy wyłącznie jeden podstawowy widok, który będzie skalowany na mniejsze urządzenia. Oznacza to, że widoczność napisów i obrazów będzie trochę słabsza jak w przypadku widoku mobilnego.

media queries – czyli programowanie na daną szerokość ekranu

Kod CSS umożliwia nam dostosowanie wyglądu naszego newslettera dostosowując kod do szerokości ekranu za pomocą tzw. media queries.

Niestety w przypadku mailingu media queries nie zawsze są wspierane. Niektóre aplikacje mailowe niestety nie czytają kodu media queries i nie ma możliwości użycia tego ułatwienia. Wsparcie media queries nie działa na przykład w przypadku aplikacji Outlook (Outlook 2007-2019, outlook.com).

Pomimo to większość klientów poczty powinna odczytać kod media query i pozwolić na „odświeżenie” wyglądu naszego newslettera na urządzenia mobilne. Jak to zrobić?

To proste! Wystarczy napisać kod, który będzie sprawdzał czy dane urządzenie ma szerokość ekranu większą lub mniejszą niż wskazana przez nas szerokość i zaaplikować kod CSS wewnątrz tego warunku. Przykład:

Przykładowy kod zadziała tylko dla urządzeń mających szerokość mniejszą lub równą 600px. Jeśli urządzenie mieści się w naszym warunku klasa .small-devices-table ustawi szerokość 300px dla danego elementu.

Jest mnóstwo poradników na temat używania media queries i serdecznie polecam zapoznanie się z tym tematem, bo jest to podstawowe narzędzie do budowania widoków repsonsywnych.

Jak testować i wysyłać newsletter?

Zarówno do testowania jak i do późniejszego komercyjnego użytku polecam dwie strony:

• GetResponse – polski serwis zajmujący się wysyłką mailingów i dbaniem o wszystkie szczegóły związane z email marketingiem. Sam testowałem i używałem wielokrotnie. Serdecznie polecam ze względu na łatwy oraz przyjemny sposób użytkowania a także ze względu na świetne działanie.
• Campaign Monitor – również świetny i godny do polecenie serwis zajmujący się email marketingiem.

Na podanych stronach wystarczy:

• założyć konto,
• stworzyć swoją listę mailingową,
• wgrać swój kod newslettera,
• dodać odpowiednie obrazy,
• wysłać do wcześniej utworzonej listy mailingowej.

Gotowy szablon Newsletter do pobrania za darmo!

Jeśli jesteś ciekaw jak wyszedł nasz newsletter zarówno wyglądowo jak i funkcjonalnie – zobacz nasz newsletter (klik).

Dostępny jest również do pobrania kod źródłowy newslettera, który możesz przerabiać i używać w dowolny sposób. Możesz podmienić treści oraz obrazy i wysłać newsletter do swoich klientów.

POBIERZ KOD NEWSLETTERA! (klik)

Podsumowanie

Tworzenie newslettera do wysyłki jest zajęciem pracochłonnym i wymagającym sporej wiedzy technicznej. Sporym problemem okazało się nie tyle kodowanie co sam projekt graficzny newslettera. Ważne jest aby mieć solidną podstawę do stworzenia mailingu. Jeśli nigdy wcześniej nie miałeś styczności z tworzeniem mailingu oraz grafiki, a myślisz o email marketingu – polecam zwrócić się profesjonalistów. Nasz zespół programistów i grafików pozwoli Ci zapomnieć o zmartwieniach z niedziałającym kodem lub niepoprawnym wyświetlaniem. Przygotujemy Ci projekt dostosowany pod potrzeby Twojej reklamy.

ZAPRASZAMY DO WSPÓŁPRACY! (klik)