Email Frameworkleri: Foundation for Emails ve MJML

Sektöre sonradan dahil olmuş biri olarak alışılmış dertleri yeni yeni tanımaya başlıyorum. Son zamanlarda “Neler yapıyorsun?” sorularına “Emailing denemeleri yapıyorum” dediğimde aldığım tepkilerden yola çıkarak her cihaza uygun, responsive mail templateleri hazırlamanın nasıl sıkıntılı bir süreç olduğunu tahmin ediyordum. Bu yazıda emailing süreçlerini kolaylaştıran iki teknolojiden, Foundation for Emails ve MJML’den bahsedeceğim.

Foundation For Emails

Foundation for Emails (eski adıyla Ink) component yapısını kullanan ve tüm cihazlarda çalışacak, responsive emailler oluşturabilmeyi vadeden bir framework.

Kurulum

Kuruluma başlamadan önce size CSS versiyonu ya da Sass versiyonu ile devam etmek üzere iki seçenek sunuluyor. CSS versiyonunda ihtiyacınız olan HTML ve CSS dosyalarını içeren bir ZIP dosyası indiriyorsunuz. Lokalinizde geliştirmelerinizi tamamladıktan sonra Foundation for Emails’in kendi inliner’ı üzerinde hazırladığınız bu HTML dosyasını ve varsa CSS dosyasını çalıştırmanız ve oluşturduğunuz çıktıyı kullanmanız gerekiyor.

Sass versiyonunda ise size ZURB email stack ile desteklenmiş, ihtiyacınız olan her şeyi barındıran bir boilerplate sunuluyor. Bu süreç daha fazla ön hazırlık gerektirse de geliştirme sürecini çok hızlandırıyor ve Inky ile özelleştirilmiş HTML taglerini kullanarak çok daha temiz bir görüntü elde etmiş oluyorsunuz.

Ben bu yazıda Sass versiyonu ile ilerleyeceğim.

Bu versiyon için bilgisayarınızda Node.js kurulu olmalı.

Foundation CLI’ı indirerek başlayacağız. Eğer daha önce Foundation’ın herhangi bir uygulamasını kullandıysanız bu adımı atlayabilirsiniz.

npm install --global foundation-cli

OX ya da Linux işletim sistemlerinden birini kullanıyorsanız ve “EACCESS: permission denied” hatası alıyorsanız sudo ön eki ile deneyebilirsiniz:

sudo npm install --global foundation-cli

CLI kurulduktan sonra yeni bir proje başlatmak için şu komutu kullacağız:

foundation new --framework emails

CLI, projenizin ismini soracak ve bu isim aynı zamanda oluşturduğu klasörün adı olarak kullanılacak. Oluşturulan klasörünün içindeyseniz npm start komutu ile projemizi başlatabiliriz (Bu adımda bazı hatalarla karşılaştığım için nvm ile node versiyonunu 14.0.0'a çekmem gerekti, benzer bir sorun ile karşılaşırsanız bu yolu deneyebilirsiniz).

Dosya Yapısı

Geliştirmeleri src klasörü içerisinde yapacağız. Bu klasör içerisindeki dosyalar, oluşturduğumuz HTML ve CSSlerinin son hallerini içeren dist/ adında yeni bir klasöre compile edilecek.

src klasörü içerisindeki genel yapı şu şekilde:

assets/: Scss ve görsel dosyalarını içeren klasör.
layouts/: Her dosyada bulunan ve base layout olan HTML boilerplate’i.
pages/: Emailleri oluşturan HTML dosyaları. Burada hazır olarak gelen, örnek templateleri inceleyebilirsiniz.
partials/: Sayfalarınıza doğrudan eklenebilecek, tekrar tekrar kullanabileceğiniz (header ya da footer gibi) HTML parçaları.

Inky

HTML dosyalarının bütün email client sistemlerinde ve cihazlarda sorunsuz çalışabilmesi için içerisinde birçok table elementi barındırmalıdır. ZURB Stack içerisinde gelen Inky bizi bu table elementleri arasında kaybolmaktan kurtarıyor. Inky ile yazılmış örnek kodun Gulp ile oluşturulan HTML’deki çıktısı şu şekilde olacaktır:

Inky

HTML çıktısı

Inky’nin desteklediği ve sıkça kullanılan bazı custom tagleri şu şekilde sıralayabiliriz:

• Grid: <container> <row> <columns>
• Button: <button>
• Callout: <callout>
• Menu: <menu> <item>
• <spacer> — yatay boşluklar vermek için
• <wrapper> — kapsayıcı tag
• <center> — img dosyalarını ortalamak için

Grid Yapısı

Foundation for Emails’in genel yapısı responsive olarak oluşturulmuş. Bu sebeple hazırlayacağımız emailler bir grid yapısı içerisine yerleştirilmeli. Basit bir grid yapısı oluşturmak için ihtiyacımız olan üç temel layout elementi var; container, row ve column. Adlarından da anlaşıldığı gibi row, içeriğin yatay bölümlerini oluştururken, column dikey bölümleri oluşturur. Container ise tüm emaili kapsayarak emailin büyük ekranlarda bozulmadan en geniş halini almasını ve ortalanmasını sağlar. Eğer daha önce Bootstrap gibi bir CSS framework’ü kullandıysanız Foundation for Emails ile olan benzerliğini fark edeceksiniz.

Foundation for Emails 12'li grid sistemini kullanıyor. Columnlarınıza 12'li sistemde kaplamasını istediğiniz “n” genişliğindeki değeri, büyük ekranlarda large=”n" küçük ekranlarda ise small=”n" şeklinde belirtebilirsiniz. Örneğin iki sütun içeren basit bir ekran görüntüsü oluşturmak istersek Inky tagleri ile şöyle bir kod yazmamız gerekecek:

<container>
     <row>
         <columns small=”12" large=”6">Column One</columns>
         <columns small=”12" large=”6">Column Two</columns>
     </row>
</container>

İkiden fazla column kullanıyorsanız, baştaki ve sondaki column elementlerinize “first” ve “last” classları otomatik olarak eklenecek ve yapınızın otomatik olarak ortada durmasını sağlayacaktır.

Scss ve Global Stiller

Sass versiyonunda, tüm Foundation for Emails projelerinize bağlı olan _settings.scss adında bir settings dosyası bulunuyor. ZURB stack kullanıyorsanız bunu /src/assets/scss klasörü altında bulabilirsiniz. Bu klasörün güncel olup olmadığını kendi releases sayfalarından takip edebilir, güncellemeler doğrultusunda eklemelerinizi yapabilirsiniz. Her bileşen, görselini oluşturan değişkenleri içerisinde barındırıyor ancak bu değişkenleri kullanarak istediğiniz görüntüyü elde edemiyorsanız bunları değiştirebilir, eklemeler yapabilir ya da doğrudan kendi custom CSS’inizi de yazabilirsiniz.

Foundation for Emails’i ZURB stack dosyasını indirmeden, örnekler üzerinden incelemek isterseniz pek çok taslağın bulunduğu şu sayfayı ve bu taslakların kodları incelemek isterseniz de GitHub sayfalarını ziyaret edebilirsiniz. Üstelik beğendiğiniz bir tasarım üzerinden emaillerinizi oluşturmaya başlamak da size oldukça zaman kazandıracaktır.

MJML

MJML, Mailjet tarafından geliştirilen ve React ile oluşturulmuş open source bir proje ve tıpkı Foundation for Emails gibi responsive email kodlamayı kolaylaştırmak amacıyla hazırlanmış popüler bir framework. Yine Foundation for Emails gibi başlangıçta responsive olan bu markup dilinde mj- ön eki ile başlayan, HTML benzeri semantic tagler kullanılıyor. Tek bir section içerisine yerleştirilmiş bir Header elementinin nasıl yazıldığına ve nasıl göründüğüne bir bakalım:

MJML kodunuzun son halini compile ettiğinde, kendi taglerini HTML’e dönüştürerek Foundation for Emails’de olduğu gibi her şeyi table sistemine çeviriyor. Özünde component yapısını kullandığı için karmaşık email layoutları hazırlarken geliştiricilerin işlerini oldukça kolaylaştırıyor.

Kurulum

MJML’i CLI kullanarak npm aracılığıyla bilgisayarınıza kurmak için şu komutu kullanabilirsiniz:

npm install mjml

MJML kurulumu tamamladıktan sonra example.mjml(ya da tercih ettiğiniz başka bir isimle) bir dosya oluşturup mjml -r example.mjml komutu ile example.html adında bir çıktı elde edebilirsiniz. CLI ile kullanabileceğiniz tüm komutları, resmi dokümanın command-line-interface sayfasından inceleyebilirsiniz.

Online Editor

MJML kendi sitesinde, hiçbir ön yükleme gerektirmeyen, doğrudan kodlamaya başlayabileceğiniz bir online editor seçeneği bulunduruyor. Ben geliştirmelerimi yapmak için bu editörü kullanarak ilerlemeyi tercih ettim çünkü yazdığınız kodların çıktısını hemen görebildiğiniz gibi bilgisayar ve telefon görüntülerini kontrol edip “beutify mjml” butonu ile yazdığınız kodu tek bir tıklamayla formatlayabiliyorsunuz. Üstelik yanlış yerlerde kullanılan tagler ya da attributelar için kod satırlarında verdiği ufak uyarılarla beraber daha güvenle ilerleyebiliyorsunuz.

Genel Yapı

MJML de Foundation for Emails gibi responsive bir yapıya sahip. Varsayılan section genişliği (bu section’ı daha önce bahsettiğimiz grid yapısındaki row’a karşılık olarak düşünebilirsiniz) 600px ancak bu <mj-body> için vereceğiniz bir custom width değeri ile değiştirilebilir. Tek bir column eklenen sectionlar, parent’ının %100 genişliğini alacaktır ve ardından her eklenen column için eşit oranda alanlara bölecektir.

mj-include

mjml-core paketi sayesinde dışarıdan aldığınız mjml dosyalarını email taslaklarınızın içerisine yerleştirebilirsiniz. Şöyle bir Header section’ımızın olduğunu düşünelim:

Bu Header section’ını ana mjml > mj-body tag’inin içerisine dahil ederek kullanabiliriz:

CSS ve Styling

MJML’e CSS eklemek tıpkı HTML’e CSS eklemek gibi çok kolay. Inline olarak eklemek istediğiniz stilleri doğrudan elementlerinize attribute olarak ekleyebiliyorsunuz. Hangi elementlerin hangi CSS propertylerini alabildiği dokümantasyonda örneklendirilmiş şekilde, detaylı olarak mevcut. Eğer online editor kullanıyorsanız, editör hatalı bir attribute eklediğinizde sizi uyarıyor ve doğrudan doküman içerisinde uygun karşılıkları ile düzenleyebiliyorsunuz:

Yukarıdaki include örneğinde olduğu gibi email taslaklarınıza dışarıdan css dosyaları da dahil edebilirsiniz ve tıpkı mj-style ile yapıldığı gibi tasarımlarınıza eklemeler yapabilirsiniz. Bir css dosyası eklediğinizi belirtmek için type="css" attribute’ünü eklemeniz gerekiyor. Dışarıdan eklemek istediğiniz css’inizin inline ise css-inline="inline" attribute’ünü kullanabilirsiniz.

Component Yapısı

MJML’in de en önemli artılarından biri tekrar tekrar kullanılabilen component yapısını kullanmasıdır. Dokümanda kullanım detaylarını bulabileceğiniz ve sıkça kullanacağınız, kullanım alanlarına göre bazı component örnekleri:

Standard Head Components: mj-attributes, mj-breakpoint, mj-font, mj-html-attributes, mj-preview, mj-style, mj-title

Standard Body Components: mj-accordion, mj-button, mj-carousel, mj-column, mj-divider, mj-group, mj-hero, mj-image, mj-navbar, mj-raw, mj-section, mj-social, mj-spacer, mj-table, mj-text, mj-wrapper

Yukarıda listelenmiş kendi standart component yapıları dışında kendi componentlarınızı da oluşturabiliyorsunuz.

Örnek Tasarımlar

MJML ile oluşturulmuş örnek email templatelerini incelemek ve kodlarına bakmak isterseniz kendi sayfalarındaki şu listeye göz atabilirsiniz.

Adım adım basit bir layout’un nasıl kodlandığını incelemek isterseniz de bir örneğini yine kendi dokümanlarında bulabilirsiniz.

Testing

Her ne kadar bu frameworkleri kullanarak yaptığınız tasarımlar size responsive olma konusunda güvence verse de çeşitli boyutlardaki ve yapılarda cihazları göz önünde bulundurarak taslaklarınızı mutlaka test etmelisiniz. Bunun için Litmus ya da Email on Acid’i kullanabilirsiniz.

Foundation for Emails vs MJML

Bu iki framework arasındaki benzerlikler ve farklılıkları şu şekilde sıralayabiliriz:

• Her iki framwork de responsive olarak geliştirilmiş. Her ikisi de grid yapısını ve bu yapı içerisinde container, column ve row sistemini kullanıyor.
• MJML tek bir .mjml dosyası ile oluşturulabilirken, Foundation for Emails başlangıçta içerisinde birçok dosyayı barındırıyor ve boyut olarak çok daha fazla yer kaplıyor.
• MJML mobile-first bir yapıya sahipken, Foundation for Emails desktop-first bir yapıya sahip
• Pixel-perfect tasarımlar için Foundation for Emails çok daha güvenilir duruyor. Tasarım konusunda Foundation for Emails’in Sass desteği var.
• MJML’in dokümanı Foundation for Emails’e göre çok daha zengin ve Github’da daha aktifler.
• MJML’in online editor desteği ile email layout’unuzu tarayıcı üzerinden anlık sonuçlar alarak kodlayabiliyorsunuz. Mobile ve desktop görünümlerini tek bir tuş ile takip edebiliyor, beutify seçeneği ile kodlarınızı formatlayabiliyorsunuz.

Her iki framework’ü de kullanarak yaptığım bir örnekten yola çıkarak dokümanlarının kalitesi, kullanım kolaylığı ve adapte olma hızı sebebiyle benim için MJML, Foundation for Emails’e göre daha tercih edilebilir bir seçenek oldu. İkisi de karmaşık table sistemini çok daha basit bir hale getiriyor ve kendi custom taglerine alıştıktan sonra geliştirme sürecini oldukça kolaylaştırıyor.

Bu yazıya benzer şekilde, iki framework’ün karşılaştırmalı incelemelerini bulabileceğiniz bazı yardımcı linkler:

• Choosing a Responsive Email Framework: MJML vs. Foundation for Emails
• MJML vs Foundation for Emails (Ink)
• What is your email framework of choice?