Responsywne frameworki e-mailowe: porównanie

Oprócz różnych edytorów e-maili typu „przeciągnij i upuść” jest jeszcze jeden sposób, by ułatwić i przyspieszyć tworzenie e-maili — frameworki. Usprawniają kodowanie, ale nie zastępują go środowiskiem bez kodu. Pisaliśmy już o jednym z najpopularniejszych frameworków, MJML, a tym razem chcemy przyjrzeć się jego konkurentom i je porównać.

Responsywne frameworki e-mailowe z własnymi tagami i bez nich: czym się różnią?

Na początek ustalmy, czym jest framework. Framework to coś w rodzaju szablonu — gotowy model, który przyspiesza tworzenie. Na jego podstawie piszesz własny kod. Frameworki wyznaczają strukturę, określają zasady i dają zestaw narzędzi potrzebnych do zbudowania projektu.

Różnica między frameworkami z własnymi tagami i bez nich jest prosta: framework e-mailowy z własnymi tagami to zwykle po prostu wyspecjalizowany język znaczników. Przyda się, jeśli Twój zespół dobrze programuje, ale nie ma ochoty męczyć się z HTML/CSS albo chce zautomatyzować swoją pracę.

Frameworki e-mailowe bez własnych tagów to zestawy gotowych komponentów bez specjalnych tagów — tylko czysty HTML/CSS. I to jedyna różnica.

Oczywiście niektóre narzędzia plasują się gdzieś pośrodku. Przyjrzymy się najpopularniejszym opcjom i opowiemy o ich zaletach i wadach, żeby łatwiej było Ci zdecydować, po które narzędzie sięgnąć.

Frameworki e-mailowe z własnymi tagami

1. MJML

MJML to darmowy framework e-mailowy open source, który pozwala szybciej tworzyć e-maile HTML dzięki gotowym komponentom. Ma aplikację desktopową i galerię szablonów, pozwala wysyłać e-maile bezpośrednio z poziomu frameworka i integruje się z Outlookiem, Apple Mail, Gmailem, Yahoo Mail i Office 365. A na deser MJML ma własny edytor e-maili: w lewej części ekranu edytujesz e-mail, a w prawej widzisz jego podgląd.

Jeśli chcesz poznać to narzędzie bliżej, przeczytaj nasz artykuł na jego temat.

2. Foundation For Emails 2

Funkcje Foundation for Emails 2 są podobne do tych, które oferuje MJML: własne komponenty, kolekcja szablonów e-maili i możliwość tworzenia responsywnych kampanii. Z Foundation for Emails 2 można pracować na dwa sposoby: w wersji CSS albo Sass. Framework nie ma edytora e-maili, więc tu MJML wygrywa z konkurentem.

Porównywaliśmy już Foundation for Emails 2 z MJML. To dość oczywiste zestawienie, bo te dwa frameworki mają ze sobą wiele wspólnego. Oto ich główne wspólne cechy:

• kolekcja własnych komponentów wielokrotnego użytku;
• galeria responsywnych szablonów e-maili HTML;
• webowy inliner CSS.

Foundation for Emails 2 korzysta z własnego silnika przetwarzania szablonów o nazwie Inky. W gruncie rzeczy robi to samo co silnik szablonów MJML: dzięki skróconym tagom upraszcza pracę ze złożonymi, zagnieżdżonymi tabelami. Tak wygląda Twój kod, gdy używasz Inky:

A tak jego końcowa, czysta postać HTML:

Tagów jest około 10: trzy z nich służą do budowania siatki, tag block-grid tworzy… siatkę bloków. Nazwy tagów menu, title, button i callout mówią same za siebie.

W przeciwieństwie do MJML Foundation for Emails 2 tworzy dwie wersje e-maila: jedną na komputery, drugą na urządzenia mobilne. Sam decydujesz, przy jakim punkcie przełamania mają się przełączać, a tagami .hide-for-large i .show-for-large możesz włączać i wyłączać wybrane bloki w kodzie.

Choć Foundation for Emails 2, tak jak MJML, ma zestaw gotowych szablonów, brakuje mu własnego edytora e-maili bez kodu, więc nie obejrzysz i nie zedytujesz e-maila na miejscu. Możesz sięgnąć po inne rozwiązania, np. Blocks 😉.

3. HEML

HEML to język znaczników oparty na XML, dostępny jako moduł NPM dla Node.js. Jest bardzo podobny do HTML/CSS, więc nie musisz uczyć się żadnych specjalnych zasad, żeby z niego korzystać.

Ten framework e-mailowy ma sprawić, by kodowanie e-maili przypominało tworzenie stron internetowych. Możesz tworzyć własne elementy i reguły stylów. HEML jest też, można powiedzieć, dość towarzyski: swoimi zasobami możesz dzielić się z innymi i korzystać z ich prac.

Oto główne cechy HEML:

• łatwy w użyciu: wygląda i działa jak HTML, więc Twój mózg nie musi przebudowywać utartych schematów i uczyć się nowego języka;
• domyślne inlinowanie CSS (można je wyłączyć);
• czysty HTML nie gryzie się z językiem HEML, można używać obu jednocześnie;
• krótki przewodnik na start od razu na stronie głównej.

Przykład kodu napisanego w HEML

Frameworki e-mailowe bez własnych tagów

1. Maizzle

Maizzle to framework e-mailowy, który zamiast własnych tagów korzysta z frameworka Tailwind CSS i Node.js. Nie musisz uczyć się nowego języka — wystarczy czysty HTML i klasy narzędziowe Tailwinda. Z drugiej strony odcina Cię to od skrótów.

Maizzle korzysta z konfiguracji środowisk, które pozwalają budować własne scenariusze pracy za pomocą plików konfiguracyjnych JS. Za logikę szablonów odpowiada PostHTML, więc masz do dyspozycji partiale, pętle i treści zdalne.

Kluczowe cechy Maizzle:

• język szablonów Nunjucks stworzony przez Mozillę;
• obsługa GitHub Flavored Markdown;
• inlinowanie kodu za pomocą transformerów;
• domyślny układ jest dostosowany do wymagań AMP.

2. Pine

Pine to responsywny framework e-mailowy stworzony z myślą o twórcach e-maili. Stawia na czysty kod oparty na HTML5. Najlepiej zacząć przygodę z Pine od jego szablonu startowego (boilerplate), który ma już wszystkie potrzebne style CSS, tagi i atrybuty:

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <title>Pine Email Framework</title>
    <!--[if mso]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <style>
      table {border-collapse: collapse;}
      td,th,div,p,a {font-size: 16px; line-height: 26px;}
      .spacer,.divider,div,p,a,h1,h2,h3,h4,h5,h6 {mso-line-height-rule: exactly;}
      td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family:"Segoe UI",Helvetica,Arial,sans-serif;}
    </style>
    <![endif]-->

    <style type="text/css">

      /*Framework CSS - removed for demo purposes */
    </style>
  </head>
  <body style="box-sizing:border-box;margin:0;padding:0;width:100%;word-break:break-word;-webkit-font-smoothing:antialiased;">

    <div style="display:none;font-size:0;line-height:0;"><!-- Add your preheader text here --></div>

    <table class="wrapper" cellpadding="15" cellspacing="0" role="presentation" width="100%">
      <tr>
        <td align="center" bgcolor="#EEEEEE">
          <table class="container" cellpadding="0" cellspacing="0" role="presentation" width="700">
            <tr>
              <td align="left" bgcolor="#FFFFFF">

                <!-- ADD ROWS HERE -->
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Kluczowe cechy Pine:

• wrappery, kontenery i kolumny;
• siatka 12-kolumnowa;
• komponenty interaktywne (akordeon, tabela cen, opinie klientów itp.);
• obsługa obrazów tła w Outlooku;
• obsługa obrazów Retina.

3. Acorn

Acorn to lżejsza wersja Pine. Również opiera się na HTML5, ale korzysta z siatki 4-kolumnowej, w przeciwieństwie do Pine, który używa 12-kolumnowej.

Kluczowe cechy Acorn:

• siatka 4-kolumnowa;
• responsywne klasy narzędziowe, treści i komponenty interaktywne;
• galeria nowoczesnych fontów systemowych;
• obsługa obrazów tła Retina w Outlooku i Windows Mail.

4. Bojler

Bojler to framework CSS/Sass. Jest zbudowany w Sass.

Bojler wymaga Node.js i NPM. Pełną dokumentację, która przeprowadzi Cię przez całą instalację i konfigurację, znajdziesz na oficjalnej stronie.

Kluczowe cechy Bojlera:

• wbudowany inliner;
• automatyczna transpilacja Sass do CSS, inlinowanie CSS i linting Sass;
• typografia, system siatki, klasy narzędziowe i gotowe komponenty;
• serwer WWW z automatycznym przeładowaniem (live reload).

Klienty poczty i urządzenia obsługiwane przez Bojlera

Inne narzędzia ułatwiające tworzenie HTML

Są rozwiązania, które zwykle nazywa się frameworkami HTML, choć nimi nie są: np. wzorce HTML, szablony i szablony startowe (boilerplates). Owszem, ułatwiają pracę, ale lepiej sprawdzają się u doświadczonych koderów HTML. To narzędzia dla tych, którzy chcą pracować z kodem bez żadnych pośredników.

Cerberus

Cerberus to kolekcja darmowych responsywnych szablonów i wzorców HTML, które ułatwiają tworzenie e-maili. Każdy szablon ma potrzebny opis i jest przetestowany w najpopularniejszych klientach poczty.

Lista wszystkich klientów poczty obsługiwanych przez Cerberusa

Ciekawostka: twórca Cerberusa jest przeciwnikiem inlinera CSS, bo jego produkt ma być prosty i nie powinien wymagać takiej zależności jak inliner CSS. Uważa też, że inlinowanie rozdmuchuje kod, a ostatni argument brzmi: rozmieszczenie CSS w Cerberusie jest już zoptymalizowane.

Przykład kodu w Cerberusie

Kilogram

Kilogram jest zbudowany na Nunjucks, silniku szablonów stworzonym przez Mozillę. Ma też dodatkowe narzędzia do tworzenia responsywnych e-maili. Instalując Kilogram, dostajesz szablony e-maili, inliner CSS i minifikator HTML.

Oto lista klientów poczty zgodnych z Kilogramem:

• Wszystkie wersje desktopowego Outlooka;
• Office 365 (przeglądarka);
• Outlook.com (przeglądarka, iOS, Android, Windows Phone);
• Thunderbird (Windows);
• AOL Mail (iOS);
• Yahoo! Mail (przeglądarka, iOS, Android);
• Google Inbox (przeglądarka, iOS, Android);
• Gmail (przeglądarka, iOS, Android);
• Mail.ru (przeglądarka, iOS, Android);
• myMail (iOS, Android);
• Rambler Mail (przeglądarka, iOS, Android);
• Yandex Mail (przeglądarka, iOS, Android);
• Airmail (iOS, OS X);
• Apple Mail (iOS, OS X);
• Spark (iOS);
• Polymail (iOS, OS X).

Inkcite

Inkcite to modułowy system projektowy do budowania nowoczesnych, responsywnych e-maili. Nie korzysta z własnych tagów, ale używa czegoś podobnego. Nazywa się to „Helpers” i wygląda jak zwykłe tagi HTML w nawiasach klamrowych.

Tak to wygląda:

Inkcite ma trzy środowiska: Development, Preview i Production.

W środowisku Development tworzysz e-mail i jego treść lokalnie.

Środowisko Preview służy do wysyłania wersji testowych e-maili.

Production to ostatni etap tworzenia e-maila. Obrazy trafiają do CDN, adresy URL są wklejane do HTML, włącza się śledzenie linków i tagi, HTML jest minifikowany, a zabezpieczenia kontrolne są aktywne.

Który framework e-mailowy wybrać?

Jeśli szukasz rozwiązania, które znacząco ułatwi i przyspieszy kodowanie, a przy tym nie boisz się nauki nowej logiki, struktur i zasad, frameworki e-mailowe z własnymi tagami są dla Ciebie.

Jeśli szukasz narzędzia lub platformy, która będzie Ci towarzyszyć w kodowaniu, wprowadzi do niego więcej porządku i nie będzie wymagać nauki nowego języka ani zasad, Twoim wyborem są frameworki e-mailowe bez własnych tagów.

Jeśli potrzebujesz raczej pomocnika, sięgnij po inne narzędzia (czasem też nazywane frameworkami): szablony startowe HTML, szablony i wzorce.

A jeśli znajdziesz błędy lub nieścisłości w tym albo w dowolnym innym artykule na naszym blogu, napisz do nas na support@useblocks.io. Zareagujemy i poprawimy wszystko najszybciej, jak się da.