MJML ile Responsive Mail Template

Frontent Developer’ların en büyük baş belası sanırım mail template kodlamaktır. Hem her CSS koduna izin vermiyor, hemde e-posta servisleri (Gmail, Outlook, Yandex Mail vb.) arasındaki destek uyumsuzlukları başınızı ağrıtıyor. Hele birde kodlayacağınız arayüzün responsive olması istendiyse vay halinize!

Neyse ki MJML var; MJML responsive mail arayüz kodlamayı oldukça kolay hale getiriyor. Templates sayfasında oluşturdukları hazır şablonları kullanabilir yada sıfırdan mail template’inizi geliştirebilirsiniz.

MJML

Kısa Bir MJML Eğitim Turu

Getting started sayfasına girdiğinizde kısa bir eğitim veriliyor.

Eğitim özeti şu şekilde;

• Responsive e-postalar tasarlamak için <mj-section></mj-section> ile tasarımınızı bölümlere ayıracaksınız. background parametresi alabiliyor.
• Ardından resim, metin yada butonları kapsayacak olan <mj-column></mj-column> etiketi ile section'ımızı kolonlara böleceğiz.
• Bir yazıyı <mj-text></mj-text> etiketleri arasında yazmalıyız; align="left/right/center" parametresi alabiliyor.
• Resim eklemek için <mj-image src="..."></mj-image> etiketi kullanılıyor.
• Buton için <mj-button></mj-button> etiketleri kullanılıyor; background-color, border-radius vb. bir çok CSS özelliğini attribute olarak ekleyebilirsiniz.

<mj- syntax'ı ile başlayan bu etiketler yardımıyla sayfanızı geliştirdiğinizde, MJML sizin için HTML çıktısını tablolar ile oluşturarak hazırlıyor.

Kurulum

Dokümantasyon sayfasında da belirtildiği gibi ister npm install mjml (yada yarn) yada kurulum yapmak istemiyorsanız online düzenleyici ile geliştirebilirsiniz.

Online düzenleyici oldukça başarılı, kodu anlık ekrana yansıtması ve hatalı kullanım yaptığınızda uyarıları işinizi kolaylaştırıyor; sağ üstteki butonlar yardımıyla mobil/masaüstü tasarım çıktısını görebiliyor ve HTML çıktısına kolayca ulaşabiliyorsunuz.

Kullanım

Varsayılan olarak 600px genişliğinde bir layout çalıştırır (isteğe bağlı değiştirilebilir).

Eğer section içerisine bir adet column oluşturursanız otomatik olarak 100%’ünü kapsar, eğer iki adet column oluşturursanız 50% (varsayılan 300px) olacak şekilde yan yana olacak şekilde düzenler. Manuel olarak width="400px" gibi genişlik belirleyebilirsiniz.

MJML etiket sırası önemli, bu sırayı değiştirdiğinizde sizi uyaracaktır;

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <!-- İçeriğiniz -->
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Aslında MJML, componentlerini sizin oluşturduğunuz ve bunları <table> etiketlerine dönüşmesine yardımcı olan bir framework. Örneğin <mj-button>Buton</mj-button> etiketleri ile bir buton oluşturduğunuzda MJML bunu aşağıdaki koda derliyor;

<table cellpadding="0" cellspacing="0" style="border:none;border-radius:3px;" align="center">
    <tbody>
        <tr>
            <td style="background-color:#414141;border-radius:3px;color:#ffffff;cursor:auto;" align="center" valign="middle" bgcolor="#414141">
                <a class="mj-content" href="#" style="display:inline-block;text-decoration:none;background-color:#414141;border:1px solid #414141;border-radius:3px;color:#ffffff;font-size:13px;font-weight:bold;padding:15px 30px;" target="_blank">
                    Buton
                </a>
            </td>
        </tr>
    </tbody>
</table>

• <mj-attributes> etiketi ile diğer etiketlerin varsayılan değerlerini,
• <mj-breakpoint width="320px" /> etiketi ile masaüstü/mobil kırılım noktasını,
• <mj-font> ile varsayılan yazı stilini,
• <mj-title> ile mailin başlığını,
• <mj-preview> ile maildeki önizleme yazısını değiştirebilirsiniz.

CSS Sınıfları

Ve <mj-style> yardımı ile MJML'nin en büyük güzelliği! Mail template geliştirirken sürekli table açıp inline CSS yazma derdini tamamiyle ortadan kaldırıyor.

MJML etiketlerine ekleyeceğiniz css-class attribute ile <mj-style> etiketi içerisine alışık olduğumuz şekilde CSS yazabilirsiniz. Bunları en sonda oluşturulan HTML'in içerisine ekleyecektir; eğer bu CSS'leri inline şekilde tablolara eklemesini isterseniz <mj-style inline="inline"> olarak değiştirmeniz kafi.

Daha Fazlası

Mail template içerisinde akordiyon mu? (Akordiyon örneği)

Etiketlerde kullanabileceğiniz CSS attribute’leri ve onlarce örnek için dokümantasyonu inceleyebilirsiniz.

Kişisel Blog Sitem: omergulcicek.com

Makaleyi alkışlayarak destek olabilirsiniz 🌹