close
HTML

Szybkie tworzenie responsywnych emaili z MJML

responsywne-maile-mjml

Jeśli kiedykolwiek tworzyłeś bardziej zaawansowany szablon email, to wiesz, że nie jest to najprzyjemniejsza czynność. W 2017 roku nadal jesteśmy zmuszeni do budowania szablonów opartych o tabele. Jest tak dlatego, że starsze wersje klientów pocztowych (np. Outlooka) nie wyświetlają poprawnie “nowszej” wersji HTML.

Z pomocą przychodzi MJML, który pozwala pisać kod podobny do HTML, który następnie jest konwertowany do struktury opartej o tabele. Jeśli tak jak ja nie jesteś ich fanem, to będziesz zachwycony.

Pobranie MJML App

MJML App to edytor kodu służący do tworzenia szablonów email w MJML. Przejdź na tę stronę i pobierz wersję odpowiednią dla Twojego systemu operacyjnego:

download mjml

Wypakuj pobraną paczkę. Możesz teraz otworzyć aplikację przez plik MJML.exe. Zobaczysz podobne okno:

utworz nowy projekt

Kliknij Create one from scratch! aby utworzyć nowy projekt. Zostanie otwarty edytor:

nowy projekt

Okno jest podzielone na dwie części: edytor i podgląd. W edytorze możesz zobaczyć podstawową strukturę kodu MJML. W podglądzie mamy do wyboru dwa tryby – desktopowy i mobilny. Możesz je zmieniać w dolnej części okna. Możemy teraz przejść do tworzenia naszego szablonu.

Tworzenie podstawowej struktury

Usuń cały kod znajdujący się w edytorze. Dodajmy teraz podstawową strukturę MJML:

Jak widzisz struktura jest bardzo zbliżona do HTML. Mamy znaczniki takie jak <mjml>, <mj-head> i <mj-body>. Spełniają one identyczną rolę jak w HTML. W <mj-all> podajemy podstawowe style strony takie jak font-family, font-size i color. <mj-button> to znacznik przechowujący style buttona (który później dodamy).

<mj-style> jest znacznikiem, w którym umieszczamy style CSS. Zostaną one następnie przepisane na style inline. Jeśli nie masz doświadczenia w tworzeniu emaili HTML, to musisz uważać na jedną rzecz: nie wszystkie właściwości CSS są wspierane. Możesz zobaczyć ich listę tutaj. W tym przykładzie dodajemy tylko podstawowe style do klasy .header, którą wykorzystamy później.

podstawowa struktura

Sekcja wstępna

Podstawowymi częściami szablonów MJML są sekcje (<mj-section>) i kolumny (<mj-column>). Znacznik <mj-container> jest miejscem, do którego trafią wszystkie sekcje emaila. Dodajmy w nim dwie pierwsze sekcje:

Pierwsza sekcja zawiera jedną kolumnę i znacznik <mj-text>. Służy on głównie do umieszczania tekstu i kodu HTML takiego jak znaczniki <a> (poza nim nie jest to możliwe).

Druga sekcja przedstawia zdjęcie wskazane w background-url. Warto zaznaczyć, że nie możemy w mailu umieścić ścieżki do pliku lokalnego. Zawsze musi być to plik umieszczony na serwerze zewnętrznym.

Znacznik <mj-spacer> pozwala nam ustawić wysokość zdjęcia na 250px.

sekcja wstepna

Rozwinięcie wstępu

Kolejna sekcja będzie rozwinięciem wstępu. Jest bardzo prosta – zawiera nagłówek, tekst i zdjęcie:

Nowy znacznikiem, który się tutaj pojawia jest <mj-image>. Jak sama nazwa wskazuje, służy on do umieszczania obrazków.  Jeśli zdjęcie ma być linkiem, to możesz go umieścić w atrybucie href.

rozwiniecie wstepu

Siatka zdjęć

W tej sekcji dodamy siatkę zdjęć. Ten przykład pokaże Ci jak proste jest korzystanie z kolumn w MJML.

Efekt powyższego kodu wygląda tak:

siatka zdjec

MJML automatycznie wykrywa ilość <mj-column> wewnątrz </mj-section> i na tej podstawie generuje kolumny. Jeśli chcielibyśmy teraz posiadać 3 elementy w rzędzie, to wystarczy dodać kolejną kolumnę:

Efekt:

3 kolumny

Sekcja z mapą

Ta sekcja będzie posiadać mapę (w formie zdjęcia) i przycisk.

Warto tutaj zwrócić uwagę, że ustawiamy width (szerokość) kolumny na 500px. Nie zaszkodzi to responsywności.

Pojawia się nowy znacznik – <mj-button>. Korzysta on ze stylów ustawionych wcześniej wewnątrz <mj-attributes>.

odwiedz nas

Stopka

Ostatnim elementem, który umieścimy w szablonie będzie stopka. Oprócz podpisu umieścimy w niej ikonki społecznościowe.

W tym fragmencie pojawia się nowy znacznik – <mj-social>. Pozwala on na wygenerowanie ikon portali społecznościowych wymienionych w atrybucie display.

social media

Szablon jest już gotowy. Możesz go przetestować w wersji mobilnej:

test mobilny

Wszystko wygląda w porządku. W tej formie szablon nie jest jednak zrozumiały dla żadnego klienta poczty. Musimy go zapisać jako HTML.

W górnej części okna MJML App kliknij Export i wybierz opcję HTML. Otrzymasz szablon w wersji .html, który możesz wykorzystać w wiadomości email.

Tutaj możesz podejrzeć wygenerowany kod HTML. Myślę, że to pokazuje najlepiej przydatność MJML.

Pobierz pliki >>

  • W każdym kliencie pocztowym wasz projekt wygląda inaczej, nawet w przeglądarce obrazki pokazuje w jednej kolumnie, zamiast w trzech.
    Pytanie, czy to wina projektu, czy MJML.

    • Grzegorz Mucha

      Czy posiadasz więc jakąś sensowną alternatywe?