Szybkie tworzenie responsywnych emaili z 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:

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

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

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:

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-all font-family="sans-serif" font-size="16px" color="#565656" />
      <mj-button background-color="#34495e" color="#fff" font-size="15px" />
    </mj-attributes>
    <mj-style>
      .header {
        padding-top: 10px;
        text-align: center;
        font-size: 20px;
        font-family: "serif";
        font-style: italic;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container background-color="#eee">

 
		
		
		
    </mj-container>
  </mj-body>
</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.

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:

<mj-section background-color="#fff">
        <mj-column>
      
          <mj-text  
            align="center"
            font-style="italic"
            font-size="32px"
            line-height="32px"
            font-family="serif"
            padding-top="20px"
            padding-bottom="20px">
          
              Kawiarnia Gravity
              
          </mj-text>
      
        </mj-column>
    </mj-section>
      
    <mj-section 
        background-url="http://devcorner.pl/wp-content/uploads/2017/03/coffee.jpg"
        background-size="cover"
        background-repeat="no-repeat">
      
        <mj-column>
      
          <mj-spacer height="250px" />
      
        </mj-column>
    </mj-section>

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.

Rozwinięcie wstępu

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

<mj-section background-color="#fff">
        <mj-column>
      
          <mj-text>
            <p class="header">Napij się kawy!<p></mj-text>
      
          <mj-text>
           Morbi sed porta sapien. Sed porttitor arcu a libero commodo, a lobortis arcu iaculis. Sed mattis ipsum eu lectus imperdiet congue.</mj-text>
      
          <mj-image 
           src="http://devcorner.pl/wp-content/uploads/2017/03/zdjecie.jpg" 
           border-radius="5" 
           href="http://devcorner.pl"/>
    
        </mj-column>
      </mj-section>

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.

Siatka zdjęć

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

<mj-section 
  background-color="#fff" 
  padding="0 15px 10px">
    
  <mj-column>

    <mj-image 
      src="http://devcorner.pl/wp-content/uploads/2017/03/mjml-0.jpg" 
      padding-left="10px" 
      padding-right="10px"/>

    <mj-image 
      src="http://devcorner.pl/wp-content/uploads/2017/03/mjml-2.jpg" 
      padding-left="10px" 
      padding-right="10px"/>

  </mj-column>   
  
  <mj-column>

    <mj-image 
      src="http://devcorner.pl/wp-content/uploads/2017/03/mjml-1.jpg" 
      padding-left="10px" 
      padding-right="10px"/>

    <mj-image 
      src="http://devcorner.pl/wp-content/uploads/2017/03/mjml-3.jpg" 
      padding-left="10px" 
      padding-right="10px"/>

  </mj-column>  

</mj-section>

Efekt powyższego kodu wygląda tak:

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ę:

<mj-column>

    <mj-image 
      src="http://devcorner.pl/wp-content/uploads/2017/03/mjml-1.jpg" 
      padding-left="10px" 
      padding-right="10px"/>

    <mj-image 
      src="http://devcorner.pl/wp-content/uploads/2017/03/mjml-3.jpg" 
      padding-left="10px" 
      padding-right="10px"/>

</mj-column>

Efekt:

Sekcja z mapą

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

<mj-section padding-top="0" background-color="#fff">
  <mj-column width="500">

    <mj-text>
      <p class="heading">Odwiedź nas!<p></mj-text>

    <mj-image 
     src="http://devcorner.pl/wp-content/uploads/2017/03/mapa.jpg" 
     border-radius="2" 
     href="#"/>

    <mj-text>
     Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat.</mj-text>

    <mj-button 
     padding-bottom="15" 
     href="#">Zarezerwuj stolik</mj-button>

  </mj-column>
</mj-section>

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>.

Stopka

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

<mj-section background-color="#fff">
  <mj-column>

    <mj-text 
      align="center"
      font-size="12">Kawiarnia Gravity 2017</mj-text>

    <mj-social 
      display="facebook twitter instagram"
      font-size="0"
      icon-size="20px"
      padding="0"
      facebook-href="#"
      instagram-href="#"
      twitter-href="#"/>

  </mj-column>
</mj-section>

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

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

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 >>