MJML (template engine)

MJML to język szablonów upraszczający tworzenie responsywnych wiadomości HTML, kompilowany do zgodnego kodu tabelarycznego.

MJML jako język opisu wiadomości HTML

MJML (Mailjet Markup Language) jest deklaratywnym językiem szablonów przeznaczonym do budowania wiadomości e-mail w formacie HTML. Autor nie zapisuje całej struktury wiadomości bezpośrednio za pomocą tabel HTML, stylów inline i reguł responsywnych, lecz opisuje układ za pomocą znaczników MJML. Plik źródłowy ma zwykle rozszerzenie .mjml, a następnie jest przetwarzany przez kompilator, który generuje końcowy dokument HTML przeznaczony do wysłania jako treść wiadomości.

Głównym zadaniem MJML jest ograniczenie liczby szczegółów związanych z różnicami między klientami pocztowymi. Wiadomości e-mail nie są renderowane tak samo jak zwykłe strony internetowe: część programów obsługuje tylko wybrany podzbiór CSS, a niektóre środowiska wymagają tabelarycznego układu dokumentu. MJML generuje więc kod wykorzystujący między innymi tabele, style inline oraz odpowiednio dobrane reguły CSS. Nie oznacza to, że każdy szablon będzie wyglądał identycznie we wszystkich programach pocztowych, ale część pracy związanej z kompatybilnością zostaje przeniesiona z autora na narzędzie.

Struktura dokumentu i podstawowe komponenty

Dokument MJML ma strukturę hierarchiczną. Element <mjml> jest elementem głównym, w którym umieszcza się <mj-head> oraz <mj-body>. W sekcji nagłówkowej można definiować między innymi tytuł wiadomości, czcionki, style oraz ustawienia domyślne. W <mj-body> znajdują się elementy odpowiadające za widoczną zawartość e-maila. <mj-section> opisuje wiersz układu, a <mj-column> tworzy kolumnę wewnątrz takiej sekcji.

Treść można budować za pomocą wyspecjalizowanych komponentów. <mj-text> służy do umieszczania tekstu, <mj-image> do obrazów, a <mj-button> do przycisków zawierających odsyłacze. Dostępne są także komponenty przeznaczone do tabel, ikon społecznościowych, separatorów, menu, nagłówków i innych często używanych elementów wiadomości. Atrybuty komponentów określają między innymi szerokość, odstępy, wyrównanie, kolor tła, kolor tekstu, rozmiar czcionki, promień zaokrąglenia oraz adres obrazu lub odsyłacza. Taki podział pozwala oddzielić semantykę układu od szczegółowej składni wynikowego HTML.

Kompilacja, responsywność i kontrola wyniku

MJML może być używany jako pakiet instalowany w projekcie JavaScript, narzędzie wiersza poleceń albo element procesu budowania szablonów. W typowym przepływie plik źródłowy jest przekazywany kompilatorowi, który sprawdza jego strukturę i zapisuje wygenerowany plik HTML. W środowisku Node.js często korzysta się z pakietu mjml oraz polecenia CLI uruchamianego w skryptach projektu. Możliwe jest również kompilowanie dokumentu programowo z poziomu kodu JavaScript.

Responsywność jest realizowana przez reguły generowane na podstawie struktury sekcji i kolumn oraz przez media queries umieszczane w wygenerowanym dokumencie, o ile dany klient pocztowy je obsługuje. Szerokości kolumn, kolejność elementów i zachowanie na wąskim ekranie wynikają z konfiguracji komponentów oraz ustawień breakpointu. Po kompilacji warto analizować nie tylko plik MJML, lecz także końcowy HTML, ponieważ to właśnie on jest interpretowany przez program pocztowy. Należy sprawdzać poprawność odsyłaczy, dostępność adresów obrazów, sposób skalowania grafik, kontrast tekstu oraz zachowanie układu przy wyłączonym ładowaniu obrazów.

Rozpoznawanie problemów w szablonie MJML

Błąd w wiadomości może wynikać z nieprawidłowej hierarchii komponentów, brakującego wymaganego elementu, literówki w nazwie atrybutu albo użycia komponentu w miejscu, w którym nie jest obsługiwany. Problemy pojawiają się również wtedy, gdy do dokumentu zostanie wstawiony kod HTML lub CSS nieuwzględniający ograniczeń klientów pocztowych. Dlatego diagnostykę należy rozpocząć od kompilacji źródła i odczytania komunikatów walidatora, a następnie porównać strukturę MJML z wygenerowanym dokumentem HTML.

Przydatne jest testowanie kilku wariantów szerokości okna oraz kilku klientów pocztowych, ponieważ poprawny wygląd w przeglądarce internetowej nie potwierdza poprawnego renderowania wiadomości. Jeśli problem dotyczy jednego elementu, należy sprawdzić jego atrybuty, rodzica w hierarchii oraz reguły CSS dodane przez komponent. Gdy wiadomość ma nieprawidłowy układ po wysłaniu, trzeba odróżnić błąd kompilacji od modyfikacji HTML przez system wysyłkowy lub klienta pocztowego. MJML upraszcza tworzenie szablonu, ale nie zastępuje końcowych testów wygenerowanego e-maila w docelowych programach.