ساخت ایمیل های واکنش گرا با MJML

ساخت ایمیل های HTML شبیه ساخت سایت هاست. تنها تفاوت اینه که قالب باید با استفاده از <table> ساخته بشه و استایل های CSS باید داخلی نوشته بشوند. یکی از راه هایی که برای ساده تر کردن توسعه ایمیل ها استفاده میشه, فریمورک هاییست که خیلی از مشکلات رو برطرف می کنند. در این آموزش ما به معرفی فریمورک فوق العاده MJML می پردازیم تا قالب های خاص ایمیل رو طراحی کنیم.

1. MJML چیست ؟

MJML یک زبان ساده ی شبیه XML فراهم میکنه که میتونه به HTML مخصوص ایمیل تبدیل بشه. در این راه نیازی به کدنویسی دستی جداول و استایل های داخلی نداریم.

در سمت چپ این تصویر کدهای MJML و سمت راست تصویر کدهای آماده HTML رو مشاهده می کنید.

2. طراحی

برای یک مثال کوچک ما یک خبرنامه ساده با تم پیتزا میسازیم. قالب نهایی MJML به همراه نسخه ی کامپایل شده ی HTML رو از اینجا دانلود کنید.

خروجی شامل چهار بخش است :

1. هدر
2. مقدمه
3. لیست واکنش گرای محصولات محبوب
4. فوتر با لینک شبکه های اجتماعی

برای این آموزش ما اطلاعات نمونه ثابت رو وارد ایمیل کردیم اما در سناریوهای واقعی شما میخواهید قالبی داشته باشید که خبرنامه ها رو تولید کنه و هروقت خواستید ارسال بشوند.

3. نصب و راه اندازی

ساده ترین راه برای شروع کار با MJML استفاده از CLI فریمورک هست. برای نصب اون شما باید Node.js رو در سیستم داشته باشید, ترجیحا نسخه 6.6.0 به بالا (ما از نسخه 6.9.5 استفاده می کنیم). 

node -v
v6.9.5

یک پنجره ترمینال باز کرده و MJML رو بصورت جهانی نصب کنید, تا به دستور mjml دسترسی پیدا کنید.

npm install -g mjml

mjml --version

3.2.0

اگر شما از Atom یا Sublime Text استفاده میکنید پلاگین های مختلف کارآمدی هستند که اگر بخواهید میتونید نصب کنید.

4. کار با مستندات MJML

MJML در فرمت mjml. نوشته شده. یک مسیر جدید بسازید و فایل template.mjml رو اضافه کنید. این تنها فایلی که ما روش کار می کنیم. این شامل تمام استایل ها و کدهای ماست. از اونجا که ما یک قالب ایمیل می سازیم, هر وابستگی خارجی (مخصوصا تصاویر) باید توسط یک CDN نگهداری بشوند. 

برای کامپایل فایل های mjml به html شما باید یک ترمینال در مسیر کاری باز کنید و یکی از دستورات زیر رو وارد کنید :

# Compile template.mjml into output.html
mjml template.mjml -o output.html

# Watch template.mjml and auto-compile on every change.
mjml -w template.mjml -o index.html

شبیه کد HTML, مستندات MJML ما هم نیاز به head و body داره:

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-all font-family="sans-serif" font-size="16px" color="#626262" />
      <mj-button background-color="#F45E43" color="#fff" font-size="14px" />
    </mj-attributes>
    <mj-style>
      .heading {
        padding-top: 15px;
        text-align: center;
        font-style: italic;
        font-size: 18px;
        font-family: "serif";
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container background-color="#eee">

    <!-- Content goes here. -->

    </mj-container>
  </mj-body>
</mjml>

در mj-head ما بعضی از استایل های فونت رو برای تمام کامپوننت های MJML و استایل ها رو برای تمام دکمه هامون تعریف کردیم. ما همچنین CSS معمول رو اضافه کردیم که در زمان کامپایل توسط فریمورک بصورت برخط در میاد. اگر شما هیچ وقت با ایمیل های HTML کار نکردید, از نوشتن استایل های سفارشی خودداری کنید, چون خیلی از پراپرتی ها به خوبی کار نمی کنند.

mj-body شامل تمام محتوای قابل نمایش هست. ما با یک container به همراه یک رنگ بک گراند شروع کردیم.

5. هدر

قالب های MJML از بخش ها و ستون ها ساخته شدند. برای بخش هدر ما از دو ردیف که هرکدام یک ستون دارند استفاده می کنیم. اولی عنوان خبرنامه و دومی یک تصویر بزرگ پیتزاست!

<!-- Header Text -->
<mj-section background-color="#fff">
  <mj-column>

    <mj-text  
      align="center"
      font-style="italic"
      font-size="32px"
      font-family="serif"
      padding-top="40px"
      padding-bottom="40px">The Pizza Times</mj-text>

  </mj-column>
</mj-section>
<!-- Pizza Image -->
<mj-section 
  background-url="https://demo.tutorialzine.com/2017/02/images/header-image.jpg"
  background-size="cover"
  background-repeat="no-repeat">

  <mj-column>

    <!-- Spacer component, used to give height to the background image. -->
    <mj-spacer height="300px" />

  </mj-column>
</mj-section>

6. بخش مقدمه

دومین بخش از قالب ما یک هدر, دو پاراگراف و یک لینک تصویر و یک دکمه نگه میداره.

<mj-section background-color="#fff">
  <mj-column width="450">

    <mj-text>
      <p class="heading">Hello Friends!<p></mj-text>

    <mj-text>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat.</mj-text>

    <!-- The Href attributes turns our image into a link. -->
    <mj-image 
     src="https://demo.tutorialzine.com/2017/02/images/map.jpg" 
     border-radius="3" 
     href="#"/>

    <mj-text>
     Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat.</mj-text>

    <mj-button 
     padding-bottom="25" 
     href="#">Make Reservation</mj-button>

  </mj-column>
</mj-section>

7. محصولات محبوب

این بخش شامل یک قالب واکنش گرا از تصاویر و متن هست. مشتری هایی که واکنش گرایی رو پشتیبانی می کنند (مثل جیمیل) یک طرح بندی انباشته در نمایشگرهای کوچک و یک قالب 2 ستونی روی صفحه های بزرگ تر خواهند داشت.

<mj-section 
  background-color="#fafafa" 
  padding="0 10px 10px">
  <mj-column>

    <mj-image 
      src="https://demo.tutorialzine.com/2017/02/images/pizza.jpg" 
      padding-left="10px" 
      padding-right="10px"/>

    <mj-image 
      src="https://demo.tutorialzine.com/2017/02/images/salad.jpg" 
      padding-left="10px" 
      padding-right="10px"/>

  </mj-column>   
  <mj-column>

    <mj-image 
      src="https://demo.tutorialzine.com/2017/02/images/cake.jpg" 
      padding-left="10px" 
      padding-right="10px"/>

    <mj-text 
      align="center" 
      font-size="14"
      padding-top="15px"
      padding-bottom="10px">
      <p style="max-width: 400px">Try our selection of Oven-baked Pizza, Fresh Salads, and Homemade Cake.<p></mj-text>

    <mj-button  
      padding-top="0"
      padding-bottom="15"
      href="#">Order Now</mj-button>

  </mj-column>  
</mj-section>

واکنش گرایی در MJML توسط قرار دادن چندین ستون در همان بخش انجام می شود. در صفحات بزرگ ستون ها فضای موجود رو به اشتراک می گذارند و در موبایل ها زیر هم می آیند.

8. فوتر

در فوتر ما یک کامپوننت مفید به نام <mj-social> پیاده سازی می کنیم. این به ما اجازه میده دکمه شبکه های اجتماعی رو قرار بدیم.

<mj-section background-color="#fff">
  <mj-column>

    <mj-text 
      align="center"
      font-size="11">The Pizza Times</mj-text>

    <mj-social 
      display="facebook instagram twitter"
      font-size="0"
      icon-size="16px"
      padding="0"
      facebook-href="#"
      instagram-href="#"
      twitter-href="#"/>

  </mj-column>
</mj-section>

گزینه های دیگری برای این مورد وجود دارند که میتونید با بررسی مستندات ازشون استفاده کنید.

منبع