MJML ile Responsive Mail Template

Ömer Gülçiçek
Nov 14 · 2 min read

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.

Image for post
Image for post
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 ile tasarımınızı bölümlere ayıracaksınız. parametresi alabiliyor.
  • Ardından resim, metin yada butonları kapsayacak olan etiketi ile section'ımızı kolonlara böleceğiz.
  • Bir yazıyı etiketleri arasında yazmalıyız; parametresi alabiliyor.
  • Resim eklemek için etiketi kullanılıyor.
  • Buton için etiketleri kullanılıyor; , vb. bir çok CSS özelliğini attribute olarak ekleyebilirsiniz.

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 (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 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ı etiketlerine dönüşmesine yardımcı olan bir framework. Örneğin 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>
  • etiketi ile diğer etiketlerin varsayılan değerlerini,
  • etiketi ile masaüstü/mobil kırılım noktasını,
  • ile varsayılan yazı stilini,
  • ile mailin başlığını,
  • ile maildeki önizleme yazısını değiştirebilirsiniz.

CSS Sınıfları

Ve 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 attribute ile 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 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 🌹

Kodcular

Bu yayın yazılım üzerine üretilen blogların bir araya…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store