Mail şablonları oluşturmak için: “MJML” gücünü keşfedin!
Bu makalemizde responsive email şablonu oluşturmak için mükemmel bir araç olan "mjml" responsive email framework'u konu alıyoruz..

Mailing için mail şablonu arayüzü oluştururken geleneksel yöntemleri kullanıyor olabilirsiniz. Kodlama ve semantik yapıya uygunluk benim için çok zor, yazdığım kodlardan dolayı mail şablonum spam’e düşecek mi? Hangi mail servisi veya tarayıcı mail şablonumu doğru bir biçimde gösterecek? Bu tasarımı nereden slice’lasam? Hangi aşamaları takip etmeliyim? gibi sıkıntıları ortadan kaldıran yenilikçi bir mail şablonu aracını bu yazımda sizin için tanıtacağım. MJML!

mjml nedir

Başlayalım; MJML Nedir?

MJML’i ücretsiz ve açık kaynak kodlu bir mail şablonu oluşturma aracı / framework’u olarak tanıtabiliriz. MJML kullanarak kolayca bir mail şablonu/teması oluşturulabilirsiniz. Kendine özgü bir syntax yapısına sahip ve responsive mail şablonlarınızı hiç olmadığı kadar kolay gerçekleştirebilmeniz mjml’in en büyük avantajı.

mjml responsive email framework

MJML Kurulumu:

Node üzerinde npm paketi olarak kurulum veya editörleriniz için entegre kurulum yapabilirsiniz (https://mjml.io/download). Fakat bu işlemlerden daha kolay bir yöntemi sizin için ele alacağım. MJML’in kendine ait bir masaüstü programı mevcut, burada yer alan bağlantıya giderek (https://mjmlio.github.io/mjml-app) ilgili alandan işletim sistemimiz için uygun mjml programını indirelim. Daha sonrası bildiğiniz standart kurulum adımları.

mjml kurulumu

Kullanmaya Başlayalım:

Kurulum aşamasından sonra programı açarak sağ üstte yer alan “New project” butonuna tıklayıp bir proje başlatabiliriz.

mjml proje oluşturma

Başlatacağımız projemiz için bir isim belirledikten sonra “Choose Template” butonuna tıklayıp projemiz için bir şablon yapısı seçelim.

mjml responsive email şablon projesi oluşturma

“Basic” alanından dilersek temiz bir belge veya header — footer alanına sahip bir taslak, “Gallery” alanından ise mjml’in barındırdığı örnek şablonlardan birini seçip proje başlangıcımızı sonlandırabiliriz.

Mail şablonumuz için kodlarımızı yazmaya başlayalım..

Kendine özgü syntax yapısı ve genel kullanım yapısı şu şekilde;

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>Merhaba Dünya</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Kendine özgü syntax’ı html diline çok benzer yapıda.

Dökümantasyon sayfasını incelemek için şu bağlantıyı izleyin: https://mjml.io/documentation/

İnteraktivite

MJML’in component yapısı sayesinde mail şablonunuzda javascript hissi yaratan birbirinden etkileyici web nesneleri kullanabilirsiniz.

mjml carousel

Açılır accordion menülerden değişen slider resimlere, mobil menüden veri grafiklerine kadar bir çok component, mjml aracı ile bizlere sunulmakta.

Components sayfasına göz atın: https://mjml.io/documentation/#components

İnclude yapısı:

Mjml’in en iyi özelliklerinden biri de include sistemi. Şablonunuzda yer alan alanları header-main-footer gibi kod bloklarına ayırarak değişim ve semantik anlamda işlerinizi kolaylaştırıyorsunuz. Örnek vermek gerekirse onlarca mail şablonunuz var fakat aynı header alanını kullanmaktasınız. Header alanında bir link veya yazı değiştireceğimizi varsayalım. Bunu tek tek tüm mail şablonlarını açıp düzenlemek yerine header.mjml dosyamıza giderek yapıyoruz ve header dosyamızı include almış tüm şablonlarımızda değişikliğimiz geçerli oluyor.

header.mjml

<mjml>
  <mj-body>
    <mj-section background-color="#012353" full-width="full-width">
      <mj-column width="30%">
        <mj-image href="https://radkod.com" src="img/logo.png" alt="RadKod" align="center" width="130px"></mj-image>
      </mj-column>
      <mj-column width="70%">
        <mj-navbar base-url="https://radkod.com" hamburger="hamburger" ico-color="#ddd">
          <mj-navbar-link href="/" color="#eee">KEŞFET!</mj-navbar-link>
          <mj-navbar-link href="/kurumsal" color="#eee">Hakkımızda</mj-navbar-link>
          <mj-navbar-link href="/iletisim" color="#eee">İLETİŞİM</mj-navbar-link>
        </mj-navbar>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

 

main.mjml

<mjml>
  <mj-body background-color="#eee">
    <mj-include path="header.mjml" /> <!-- include kodumuz -->
  </mj-body>
</mjml>

Örnek yapı yukarıda yer alan kodlar gibidir..

Kodları mailing’e uygun şekilde dışa aktarma:

mjml export etme

Projemizi tamamladıktan sonra sağ üstte yer alan alanda “Export to HTML file” seçeneğine tıklayıp mail şablonumuz için html kod çıktısını alabiliriz.

Örnek bir proje paylaşayım..

RadKod için oluşturduğum mjml email şablonu örnek projesi

mjml örnek projemjml örnek şablon

Sizler için oluşturduğum carousel ve mobil menüye sahip responsive mail taslağı proje dosyalarına github bağlantısından ulaşabilirsiniz: https://github.com/selimdoyranli/mjml-basic-template

Görüşmek üzere..


"Mail şablonları oluşturmak için: “MJML” gücünü keşfedin! konulu haberimizde Teknoloji Haberleri olarak sizlere Mail şablonları oluşturmak için: “MJML” gücünü keşfedin! ile ilgili son gelişmeleri aktarmak istedik. Hemen yukarıda Mail şablonları oluşturmak için: “MJML” gücünü keşfedin! ile ilgili yorum ve görüşleri inceleyerek sizlerde yorum bırakabilirsiniz. "
5
4
2
1
0