Logo framworka MJML

Jak projektować responsywne maile? Poznaj ten framework

MJML - tworzenie responsywnych maili dla znających podstawy HTML i CSS.

Projektowanie maili rządzi się swoimi prawami. Możliwości kodowania są dość ograniczone – nie da się swobodnie przebierać w fontach czy stosować dowolnych atrybutów CSS. Ponadto dochodzi wymóg dostosowania do ekranu – responsywne maile powinny dobrze wyglądać zarówno na ekranie komputera, jak i na smartfonie.

Wiele systemów mailingowych (takich jak na przykład MailerLite) udostępnia swoje kreatory do projektowania maili, jednak uzależniają one użytkownika od korzystania z konkretnego, wybranego serwisu.

Co natomiast, jeśli chcesz wysłać kampanię z innego systemu, który obsługuje tylko plain text i layouty HTML?

Co to jest MJML?

MJML jest framworkiem stworzonym przez Mailjet, umożliwiającym szybkie kodowanie responsywnych maili. Nie jest to technologia najnowsza (podobnie jak same kampanie mailingowe), ale bez wątpienia wygodna i skuteczna. Każdy, kto zna podstawy HTML i CSS powinien móc bez większych problemów zaprojektować i zakodować responsywne maile za pomocą MJML.

Jak zacząć projektować responsywne maile?

Aby zacząć tworzyć responsywne maile w MJML konieczne jest wybranie odpowiedniego dla siebie środowiska pracy – tutaj opcje są trzy:

  1. edytor online – świetnie sprawdzi się dla osób, które chcą od razu sprawdzić w jaki sposób działa framework,
  2. lokalna instalacja przy pomocy node.js i kodowanie w wybranym edytorze (np. Atom lub Sublime Text),
  3. dedykowana aplikacja MJML – rozwiązanie, z którego korzystam (aplikacja psiada m.in. wbudowaną integrację z Mailjet, co pozwala na wysłanie maila testowego w trakcie kodowania z poziomu aplikacji i sprawdzenie jak wygląda efekt końcowy na dowolnym urządzeniu).
Responsywne maile - framwork MJML
Aplikacja MJML z przykładowym projektem

Kolejnym krokiem jest stworzenie projektu. Istnieje możliwość rozpoczęcia pracy “od zera” lub skorzystania z gotowego szablonu, który łatwo dostosujesz do swoich potrzeb.

Dalej ogranicza Cię jedynie archaiczny byt mailingu (chciałoby się rzec, że “ogranicza Cię jedynie wyobraźnia”, ale granice wyobraźni sięgają zdecydowanie dalej niż granice możliwości projektowania maili). Niemniej opcji, które daje framework jest dość sporo – poniżej kilka przykładów.

Sekcje

mj-section

Sekcje to kolejne, pionowe fragmenty maila. Sekcjami mogą być na przykład: nagłówek maila, główny tekst maila czy rząd obrazków z odnośnikami do artykułów na blogu.

Kolumny

mj-column

Kolumny umożliwiają poziome rozmieszczenie treści wewnątrz sekcji i zapewniają responsywność (przyjmują układ pionowy w przypadku urządzeń mobilnych). Jeżeli chcesz na przykład umieścić w nagłówku logo, a obok odnośniki do social media, zastosujesz wówczas dwie kolumny, które zmienią układ na pionowy na urządzeniach mobilnych.

Układ trzech kolumn na ekranie desktop (na górze) i mobile (na dole)

Buttony

mj-button

Przyciski CTA (call-to-action), które możesz stylizować przy pomocy wybranych atrybutów CSS.

Ikony social media

mj-social

Zestaw gotowych ikon najpopularniejszych serwisów social media (takich jak Facebook, Twitter czy LinkedIn), które łatwo dodasz do projektu.

Pełne możliwości MJML znajdziesz w dokumentacji.

Responsywne maile HTML vs. stworzone w kreatorze

Możesz zadawać sobie pytanie – po co bawić się w kodowanie skoro najpopularniejsze systemy mailingowe zapewniają wbudowany kreator? Otóż powodów takiego działania można znaleźć kilka.

Po pierwsze: nie zawsze kreator w systemie, którego używasz (lub musisz z jakiegoś powodu używać) zapewnia wszystkie niezbędne funkcjonalności. Zdecydowana większość systemów mailingowych zapewnia natomiast wysyłanie maili HTML.

Po drugie: szablon HTML daje możliwość migracji między systemami. Jeżeli część maili w Twojej firmie wysyłana jest np. z systemu CRM, a część z systemu mailingowego, projekt w HTML daje Ci możliwość zachowania spójności graficznej wiadomości wysyłanych z obu tych miejsc.

Po trzecie: masz dużo większą swobodę projektowania, niż w przypadku kreatorów.

Wszystko by było pięknie, gdyby były “trzy plusy i żadnego minusa”, ale niestety tak nie jest.

Tworzenie maili w HTML wymaga samodzielnego linkowania zewnętrznych elementów (np. obrazów), co może negatywnie przełożyć się traktowanie wiadomości przez programy pocztowe. Projektując mail zawsze należy mieć również na uwadze bariery jakie narzucają programy pocztowe (np. obsługę poszczególnych fontów czy atrybutów CSS). Nie bez znaczenia pozostaje obsługa jasnych i ciemnych motywów w programach pocztowych (te drugie zazwyczaj modyfikują kolory w wiadomości po stronie odbiorcy).

Przydatne aplikacje na Twoim mailu

Dołącz do newslettera i na bieżąco otrzymuj informacje o ciekawych aplikacjach.

Chcesz więcej ciekawych aplikacji?

Dołącz do newslettera i bądź na bieżąco z nowościami ze świata webowych i mobilnych apek!