Zjedź na dół
Agencja marketingowa

Ocean pomysłów?

Wiemy jak przekuć
je na sukces w Internecie!

 

Sprawdź nas

środa, 19 czerwca 2019 14:00
MJML - czyli jak szybko i przyjemnie tworzyć responsywne e-maile

MJML - szybkie i przyjemne tworzenie responsywnego mailingu

Implementacja responsywnych e-maili jest zawsze dużym problemem dla dewelopera. Musimy się cofnąć do początku lat 2000, gdzie budowaliśmy layouty stron na podstawie tabel. Jest jednak nadzieja, ponieważ powstają narzędzia, które w prosty sposób pozwalają nam budować e-maile. Takimi narzędziami są MJML czy Foundation for Emails. Dzisiaj przedstawię Wam czym jest MJML i jak z niego korzystać.

1 Czym jest MJML?

MJML jest językiem znaczników zaprojektowanym w celu zmniejszenia bólu związanego z kodowaniem responsywnego e-maila. Jego składnia sprawia, że kodowanie staje się łatwe, a bogata biblioteka standardowych komponentów znacznie przyśpiesza programowanie.

Strona głowna MJML

2 Jak skorzystać z MJML?

Korzystanie z niego jest o tyle proste, że narzędzie to jest łatwo dostępne. Mamy wybór korzystania z niego za pomocą:

  • Dedykowanej aplikacji, którą możemy pobrać ze strony i już po instalacji możemy przejść do tworzenia.

  • MJML - tworzenie projektu

  • Drugą możliwością jest zainstalowanie wtyczki do swojego edytora. MJML jest dostępny dla najpopularniejszych edytorów takich jak VS Code, Atom czy Sublime Text. Wtyczkę można pobrać pod tym linkiem.

  • MJML - instalacja za pomocą NPM

    MJML - tworzenie projektu w VS Code

  • Ostatnią opcją jest skorzystanie z edytora live.

    Edytor live MJML

3 Duży wybór gotowych szablonów.

Mailing możemy stworzyć za pomocą prostego szkieletu, który udostępnia nam MJML na starcie lub za pomocą gotowego szablonu. Narzędzie to udostępnia wiele darmowych szablonów, które są dostępne pod tym adresem.

MJML - darmowe szablony

4 Standardowe komponenty

  • mjml-accordion - interaktywny komponent do wyświetlania stosu tabów

    MJML - accordion

  • mjml-button - standardowy button

  • mjml-carousel - galeria zdjęć

    MJML galeria zdjęć
  • mjml-divider - poziomy rozdzielacz

  • mjml-group - umożliwia stosowanie kolumn na telefonie komórkowym

  • mjml-hero - wyświetla sekcje z kontentem oraz obrazem w tle, można go nazwać sliderem

    Slider MJML

  • mjml-image - wyświetla responsywnie obrazy

  • mjml-navbar - nawigacja, opcjonalnie dla menu mobilnego w postaci hamburgera

    MJML - nawigacja desktopowa

    MJML - nawigacja mobilna

  • mjml-raw - jest to element, w którym możemy pisać czysty kod HTML i nie będzie on analizowany przez MJML

  • mjml-section - wiersz w e-mailu

  • mjml-social - wyświetla najpopularniejsze social media

  • mjml-spacer - tworzy czystą przestrzeń o zadanym rozmiarze

  • mjml-table - odpowiada za wyświetlanie tabeli. Tworzymy ją za pomocą czystego kodu HTML

  • mjml-text - ten tag umożliwia wyświetlanie tekstu

  • mjml-wrapper - umożliwia tworzenie wielu sekcji jednocześnie w jednej sekcji. Jest to przydatne, przy tworzeniu zagnieżdżonych układów

    MJML - wrapper

5 Podsumowanie

Podsumowując, tworzenie e-maili za pomocą MJML jest dość łatwe i każdy powinien sobie z tym poradzić. Narzędzie to posiada dobrze opisaną dokumentację, którą możecie znaleźć pod tym linkiem. Dzięki dużej ilości komponentów tworzenie wydaje się szybsze, wystarczy tylko dopasować odpowiednie atrybuty, aby tworzony element był zgodny z szablonem mailingu.

Paweł Tyrpuła
Paweł Tyrpuła

Subskrybuj na YT

Kalendarz wpisów

« Listopad 2019 »
Pn Wt Śr Czw Pt Sb Nie
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

image

Poczuj się jak Rekin w wodzie!

Efektywność to najważniejszy parametr cechujący skuteczne działania w Internecie. Agencja marketingowa RekinySukcesu.pl wie jak osiągnąć wysoką efektywność w błękitnym i czerwonym oceanie marketingu.

Ponad 100 zadowolonych Klientów, ponad 300 przeszkolonych osób, a nam ciągle mało. Już więcej niż 9 lat spędzili użytkownicy na wykonanych przez agencję interaktywną Wrocław stronach internetowych. Dzięki temu o Twoim Kliencie wiemy wszystko, a nawet i więcej. Nie uznajemy kompromisów. Dlatego warto kliknąć w jeden z przycisków poniżej.

 

Konfigurator Kontakt

Rekiny Mobile Menu