Mailing Tasarımı Nasıl Yapılır? HTML E-Posta Bülteni Rehberi

Mailing tasarımı nedir ve web tasarımından farkı nedir?

Mailing tasarımı, e-posta istemcilerinde açacağınız HTML bültenin yerleşimini, görsellerini, metnini ve düğmelerini kurma işidir. Web sayfasından farklıdır, çünkü Gmail, Outlook ve Apple Mail aynı kodu farklı yorumlar. Bu yüzden amaç en şık sayfayı değil, her istemcide okuduğunuz sade bir mesajı kurmaktır.

Web tasarımında modern CSS'e güvenirsiniz. E-postada ise durum tersine döner. Her istemci kendi kurallarını uygular, üstelik bazıları kodunuzu temizleyip yeniden yazar.

Örneğin bir web sayfasında yan yana duran üç kolonu CSS ile kolayca kurarsınız. Aynı kolonlar klasik Outlook'ta dağılabilir. Bu nedenle e-posta tasarımı, kısıtları baştan kabul eden bir zanaattır.

Bu rehber, tasarım kararlarını ve Türkiye'deki izin kurallarını resmi dokümanlara dayandırarak anlatır. E-posta içeriğinde yapay zekadan yararlanmayı merak ediyorsanız e-posta pazarlamasında yapay zeka yazımıza bakın; orada anlattıklarımızı burada tekrar etmiyoruz.

Mailing tasarımına başlamadan önce hangi hedefi belirlemelisiniz?

Önce tek bir hedef seçin. Bülten satış mı yapacak, bir blog yazısına trafik mi getirecek, yoksa bir randevu mu aldıracak? Hedef netleşmeden yerleşim kurarsanız mesaj birden fazla yöne gider ve okur hiçbirine tıklamaz.

Hedefi bir cümleyle yazın. Ardından o cümleyi destekleyen en fazla üç içerik bloğu seçin.

• Bir başlık ve tek cümlelik vaat.
• Vaadi destekleyen kısa bir paragraf ya da görsel.
• Tek bir çağrı düğmesi.

Böylece şablon kendiliğinden sadeleşir. Ayrıca kitleyi de düşünün. Mevcut müşterilerinize yazan bir bülten ile soğuk bir listeye giden mesaj aynı tonda olmasın. Hangi grubun izin verdiğini bilmek, hem içeriği hem de hukuki uyumu belirler.

Örnek olarak hedef cümlesi şöyle olabilir: "Bu bültenin tek amacı, okuru yeni hizmet sayfamızdaki teklif formuna götürmektir." Böyle net bir cümle, hangi içeriğin bültene gireceğini ve hangisinin dışarıda kalacağını kendiliğinden gösterir. Ayrıca sonuçları değerlendirirken de bu cümleye dönüp bakarsınız.

Mailing tasarımında genişlik neden yaklaşık 600 piksel olur?

Yaygın uygulama, ana içerik kolonunu yaklaşık 600 piksel genişlikte tutmaktır. Bu değer resmi bir standart değildir, sektörde yerleşmiş bir alışkanlıktır. Masaüstü istemcilerin okuma panelleri bu genişliğe uyar, mobilde ise kolon ekrana sığacak kadar daralır.

Dolayısıyla sabit bir 600 pikselden çok, "en fazla yaklaşık 600, ekran dar ise ekrana sığan" mantığıyla düşünün. Görsellerin genişliğini kolona eşitleyin ve yüksekliği otomatik bırakın.

Bir noktaya dikkat edin. Microsoft'un Word tabanlı motor belgesi, max-width özelliğini desteklemediği özellikler arasında sayar. Bu nedenle Outlook için kolon genişliğini tablonun width özniteliğiyle de belirtmeniz gerekir. Böylece klasik Outlook sabit genişlikle, modern istemciler ise esnek genişlikle çalışır.

Kolonun içinde de kenar boşluğu bırakın. Metin kolonun kenarına yapışırsa mobilde okuması zorlaşır. Kenar boşluğunu CSS yerine, tablo hücresinin iç boşluğu ile verin; çünkü Microsoft belgesi padding özelliğini tablo hücresi gibi öğelerde destekleyen özellikler arasında sayar. Bunu bir kez kurarsanız sonraki şablonlarda aynı iskeleti kopyalayabilirsiniz.

Mailing tasarımında HTML e-posta için neden tablo yerleşimini seçersiniz?

Çünkü klasik masaüstü Outlook, HTML'i Word'ün işleme motoruyla gösterir. Microsoft'un eski ama hâlâ yol gösteren belgesi, bu motorun float, position, background-image ve max-width gibi özellikleri desteklemediğini listeler. Tablolar ise tam destek grubundadır.

Bu yüzden e-posta yerleşiminin iskeleti hâlâ iç içe tablolardan oluşur. Dış tablo arka plan rengini ve genişliği taşır, iç tablo ise içeriği.

Belge Outlook 2007 için yazıldı, ancak klasik Outlook Word tabanlı motoru kullanmayı sürdürdüğü için sınırlamalar pratik bir referans olarak kalıyor. Yine de güncel durumu kendi testlerinizle doğrulayın.

Aşağıdaki küçük örnek, role="presentation" ile yerleşim tablosu olduğunu belirten basit bir iskelet gösterir.

<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffffff">
  <tr>
    <td align="left" bgcolor="#ffffff" height="48">
      Başlık ve kısa vaat burada durur.
    </td>
  </tr>
</table>

Yerleşim tablosu veri tablosu değildir. Ekran okuyucuya bunu role="presentation" ile söyleyin.

E-posta istemcisi uyumunu nasıl sağlarsınız?

Uyum, tek bir sihirli kodla gelmez; sınırlı bir özellik kümesine bağlı kalmanızla gelir. Microsoft'un belgesine göre Word motoru form, script, iframe ve button gibi öğeleri tanımaz. Animasyonlu GIF'in ise yalnızca statik bir halini gösterir.

Bu nedenle GIF'in ilk karesine mesajın en önemli bilgisini koyun. Böylece animasyon oynamayan istemcide bile mesaj eksik kalmaz.

Aşağıdaki tablo, web'de alıştığınız seçenekler ile e-postadaki güvenli karşılıklarını özetler.

Yani web'deki alışkanlıklarınızı bırakmanız gerekmez; yalnızca e-posta için ikinci bir yol hazırlayın.

Bu tablo bir kontrol listesi gibi de işe yarar. Şablonunuzu bitirdiğinizde her satıra tek tek bakın ve sol sütundaki yöntemlerden birini kullanıp kullanmadığınızı sorgulayın. Kullandıysanız sağ sütundaki karşılığa geçin. Ardından klasik Outlook'ta ve bir web tabanlı istemcide sonucu karşılaştırın.

Mailing tasarımında satır içi CSS ve yazı tipini nasıl seçersiniz?

Kritik stilleri doğrudan öğelerin üzerine yazın. Bazı istemciler head içindeki stil bloklarını kırpabilir ya da yok sayabilir. Nitekim Microsoft belgesinde style öğesi için destek "yok" olarak geçer. Dolayısıyla renk, boyut ve boşluk gibi temel değerleri satır içine koymak en güvenli yoldur.

Microsoft belgesi, Word motorunun tam desteklediği temel özellikleri sıralar. Aralarında şunlar var:

• color, font-family, font-size ve font-weight.
• text-align, line-height ve vertical-align.
• background-color ve border özellikleri.
• Tablo hücrelerinde width, height ve padding.

Bu özellikleri satır içine yazarsanız, klasik Outlook dahil çoğu istemcide beklediğiniz görünümü yakalarsınız.

Çoğu araç bu işi sizin için otomatik yapar. Siz yine de sonucu kontrol edin.

Yazı tipinde de sade kalın. Web fontları her istemcide yüklenmeyebilir; bu nedenle ikinci ve üçüncü seçenek olarak sistemde hazır bir yazı tipi ailesi tanımlayın. Başlık için özel font istiyorsanız, yedek fontla da güzel durduğunu test edin.

Ayrıca satır aralığını cömert tutun. Dar mobil ekranda sıkışık metin işinizi bozar. Marka yazı tipini seçerken logo font seçimi yazımıza göz atabilirsiniz.

Mobil okunurluk için mailing tasarımında neler yaparsınız?

Önce tek kolonlu bir akış kurun. Mobilde iki kolonu alt alta dizen bir yapı, dar ekranda en az sorun çıkaran yapıdır. Ardından gövde metnini rahat okuyacağınız boyutta tutun; örnek olarak 16 piksel civarı yaygın bir başlangıçtır, ancak bu bir standart değildir.

Düğmeleri parmakla kolay basacağınız büyüklükte yapın ve çevresine boşluk bırakın. Bağlantıları birbirine yapıştırmayın.

Mobil öncelikli düşünce e-postada da geçerlidir. Web tarafındaki yaklaşımı mobil öncelikli tasarım yazımızda anlattık. İlkeler benzerdir: önce en dar ekranı kurun, sonra genişletin.

Test için kendi telefonunuza göndermeyi ihmal etmeyin. Üstelik farklı istemcilerde aynı iletiyi açmak, sorunları saniyeler içinde ortaya çıkarır.

Mobilde şu kısa listeyi kontrol edin:

• Kolon yatay kaydırma çıkarmadan ekrana sığıyor mu?
• Başlık ve düğme ilk ekranda görünüyor mu?
• Bağlantılar parmakla ayrı ayrı seçilebiliyor mu?
• Görseller kapalıyken mesaj anlaşılıyor mu?

Bu dört soru, çoğu mobil sorunu gönderimden önce yakalar.

Koyu mod mailing tasarımını nasıl etkiler?

Koyu mod, bazı istemcilerin renkleri kendiliğinden tersine çevirmesine ya da ayarlamasına yol açar. Sonuç olarak koyu yazı koyu arka planda kaybolabilir veya logonuzun etrafında beyaz bir kutu belirebilir. Her istemci bunu farklı yapar, dolayısıyla tek bir kural yoktur.

Web tarafında prefers-color-scheme ortam sorgusu, kullanıcının açık ya da koyu tema tercihini algılar. MDN'ye göre bu özellik Ocak 2020'den beri geniş tarayıcı desteğine sahip. color-scheme meta etiketi de hangi temaları desteklediğinizi bildirir.

E-posta istemcilerinin bu özellikleri destekleme düzeyi değişir; bu nedenle yalnızca sorguya güvenmeyin.

• Logoyu şeffaf arka planlı hazırlayın ve her iki zeminde de seçilen renklerle test edin.
• Saf siyah ve saf beyaz yerine biraz yumuşak tonlar seçin.
• Metni görselin içine gömmeyin.
• Hem açık hem koyu modda önizleme alın.

Görsel alt metni mailing tasarımında neden önemlidir?

Bazı istemciler görselleri varsayılan olarak kapalı tutabilir. Bu durumda okur, görselin yerine alt metni görür. Alt metin yoksa mesajın yarısı boş bir kutuya dönüşür.

Bu nedenle her anlamlı görsele kısa ve açıklayıcı bir alt metin yazın. Süs amaçlı görselde alt metni boş bırakın.

Düğmeyi görsel olarak hazırlamayın. Görselden oluşan bir düğme, kapalı görsellerde tamamen kaybolur. Bunun yerine metin tabanlı, arka plan rengini hücreye vermiş bir düğme kurun.

Alt metin yazımının ayrıntılarını alt text nedir ve nasıl yazarsınız yazımızda bulursunuz. Örneğin "indirim" yerine "kış koleksiyonunda seçili ürünlerde indirim" gibi içeriği anlatan ifadeler daha işe yarar.

Ayrıca Microsoft belgesine göre Word motoru animasyonlu GIF'in yalnızca statik halini gösterir; bu yüzden önemli bilgiyi animasyona bağlamayın.

Mailing tasarımında hangi görsel ölçülerini ve biçimlerini seçmelisiniz?

Görseli kolon genişliğine göre hazırlayın. Yüksek çözünürlüklü ekranlar için görseli kolonun iki katı genişlikte üretip HTML'de width ile küçültmek yaygın bir yoldur; bu bir zorunluluk değil, pratik bir alışkanlıktır. Dosya boyutunu da küçük tutun, çünkü mobil bağlantıda ağır görsel geç açılır.

Biçim olarak JPEG ve PNG en yaygın seçeneklerdir. Fotoğraflarda JPEG, şeffaflık gereken logolarda PNG işinizi görür. Daha yeni biçimleri her istemci göstermeyebilir, bu yüzden bülten için hedef istemcilerinizde önce deneyin.

Görselleri küçültmek için resim küçültme aracını kullanabilirsiniz.

• Tek görsele tüm mesajı gömmeyin.
• Ana bilgiyi metin olarak yazın.
• Görsellerin genişlik ve yükseklik değerlerini belirtin.
• Kullanmayacağınız büyük dosyaları sunucudan çıkarın.

Böylece görseller kapalı olsa da yavaş açılsa da mesajınız okunur kalır.

Preheader metni nedir ve nasıl yazarsınız?

Preheader, konu satırının yanında ya da altında beliren kısa önizleme metnidir. Genellikle iletinin ilk metninden gelir. Yazmazsanız istemci ilk bulduğu metni, örneğin "Tarayıcıda görüntüle" bağlantısını gösterebilir.

Preheader'ı konu satırının devamı gibi düşünün. Konu satırı merak uyandırıyorsa, preheader somut faydayı söylesin.

Çoğu şablon bu metni, iletinin en üstüne koyduğu gizli bir span ile yazar. Gizlemek için satır içinde display:none ve benzeri değerler kullanır. Gösterilen karakter sayısı istemciden istemciye değiştiği için, önemli bilgiyi ilk cümlenin başına koyun.

Son olarak aynı cümleyi hem konu satırında hem preheader'da tekrarlamayın. Okur bunu kaçan bir fırsat olarak görür.

Örnek bir çift şöyle olabilir. Konu satırı: "Yeni hizmet sayfamız yayında". Preheader: "Teklif formunu iki dakikada doldurabilirsiniz." İkisi birbirini tamamlar, hiçbiri diğerini tekrar etmez. Bu bir örnektir; kendi mesajınıza göre uyarlayın.

Tek çağrı düğmesi kuralı neden işe yarar?

Bir bültende eşit değerde birden fazla düğme olursa, okur karar vermekte güçlük çeker. Tek ve net bir çağrı, tıklama yolunu kısaltır. Elbette bültende başka bağlantılar da olabilir; yalnızca birinin görsel olarak baskın olması yeterlidir.

Düğme metni eylemi anlatsın. "Tıklayın" yerine "Teklif formunu açın" ya da "Sepetinizi tamamlayın" gibi somut ifadeler seçin. Metin kısa olsun ve düğme tek satıra sığsın.

Düğmeyi tablo hücresi ile kurun. Hücreye arka plan rengi verin, bağlantıyı içine koyun ve çevresine yeterli iç boşluk bırakın. Bu yöntem Word motorunda da çalışır, çünkü hücre arka planı ve iç boşluk desteklenen özellikler arasındadır.

Çağrı metni örnekleri için CTA nedir ve nasıl yazarsınız yazımıza bakın.

Düğmenin rengi de önemlidir. Düğme metni ile düğme zemini arasındaki kontrast oranı yeterli olsun, aksi halde düğme soluk kalır. Koyu modda düğmenin hâlâ seçildiğini test etmeyi unutmayın. Ayrıca düğmeyi iletinin sonunda bir kez daha tekrar edebilirsiniz; bu durumda iki düğme de aynı yere gitsin.

Bülten şablonunda içerik sırasını nasıl kurarsınız?

Okur bülteni genellikle yukarıdan aşağıya hızlıca tarar. Bu yüzden en önemli bilgiyi en üste koyun. Aşağıdaki sıra çoğu bülten için sağlam bir başlangıçtır.

1. Preheader metni.
2. Küçük bir logo ve gerekirse tarayıcıda görüntüleme bağlantısı.
3. Tek cümlelik başlık.
4. Vaadi açıklayan kısa paragraf.
5. Tek çağrı düğmesi.
6. Destekleyici ikinci blok, örneğin bir ürün ya da yazı özeti.
7. Alt bilgi ve çıkış bağlantısı.

Bu iskeleti her gönderimde koruyun. Böylece okur nerede ne olduğunu öğrenir ve içerikte daha hızlı gezinir.

Uzun bir bültenden kaçının. Bir mesajda çok fazla konu varsa, hepsini ayrı gönderimlere bölün. Kısacası her bülten tek bir işi iyi yapsın.

Gönderici adı ve konu satırı mailing tasarımının parçası mıdır?

Evet, çünkü okur iletiyi açmadan önce yalnızca bunları görür. Gönderici adı tanıdık ve tutarlı olsun. Her gönderimde farklı bir ad kullanırsanız güveni zedelersiniz.

Konu satırı da içerikle uyuşsun. Yanıltıcı konu satırı hem okuru kaybettirir hem de yasal sorun doğurabilir. Türkiye'deki düzenlemeye göre ileti içeriği alınan onaya uygun olmalıdır; ayrıntısını aşağıdaki bölümde okuyacaksınız.

Kurumsal bir alan adından göndermek de önemlidir. Ücretsiz bir e-posta adresinden toplu bülten göndermek hem güveni hem de teslim edilebilirliği zayıflatır. Alan adlı e-posta kurulumu için kurumsal e-posta altyapısı yazımıza bakın.

Gönderici adresini, yanıt alabileceğiniz bir kutuya yönlendirin. Böylece yanıt veren okuru da kaybetmezsiniz.

Mailing tasarımında kontrast ve erişilebilirliği nasıl sağlarsınız?

Metin ile arka plan arasındaki kontrast, erişilebilirliğin ilk koşuludur. W3C'nin WCAG 2.2 ölçütü 1.4.3, normal metin için en az 4,5:1, büyük metin için en az 3:1 kontrast oranı ister. Bu oranı e-postada da hedefleyin.

Gri zemin üzerinde açık gri metin şık durur, fakat güneşli bir ekranda okuyamazsınız. Kontrastı önceden ölçün; renk kontrast kontrolü aracı bunu saniyeler içinde yapar.

Başka erişilebilirlik adımları da var.

• Yerleşim tablolarına role="presentation" ekleyin.
• İletinin dilini lang özniteliğiyle belirtin.
• Bağlantı metinlerini "buraya tıklayın" yerine anlamlı yazın.
• Başlıkları gerçek başlık öğeleriyle işaretleyin.

Kontrastın genel ilkeleri için tasarımda kontrast nasıl kullanılır yazımıza bakabilirsiniz.

Türkiye'de mailing göndermek için izin gerekir mi?

Evet, kural olarak gerekir. 6563 sayılı Elektronik Ticaretin Düzenlenmesi Hakkında Kanun'un 6. maddesine göre ticari elektronik iletiler, alıcılara ancak önceden onayları alınmak kaydıyla gönderilebilir. Bu onayı yazılı olarak ya da elektronik iletişim araçlarıyla alabilirsiniz.

Aynı maddenin ikinci fıkrası, esnaf ve tacirlere önceden onay almadan ticari elektronik ileti gönderebileceğinizi söyler. Dolayısıyla bireysel tüketiciye giden bültende onay şarttır, esnaf ve tacire giden iletide ise bu şartı aramazsınız.

Kanunun 11. maddesinin beşinci fıkrası, onayların Bakanlıkça kurulan elektronik sisteme aktarılmasını düzenler. Sisteme aktarmadığınız onay geçersiz sayılır. Bu sistemi pratikte İYS adıyla tanırsınız.

Bu bölüm hukuki danışmanlık değildir. Özel durumunuz için bir avukata ya da yetkili kuruma danışın. Kanun metnini Mevzuat Bilgi Sistemi üzerinden okuyabilirsiniz.

Mailing içine hangi bilgileri ve ret yolunu koymalısınız?

Kanunun 7. maddesine göre iletinin içeriği alınan onaya uygun olmalıdır. İletiye hizmet sağlayıcıyı tanıtan bilgileri ve ulaşılabilir iletişim bilgilerini koyarsınız. Konu ve amaç bilgisini de eklersiniz.

Kanunun 8. maddesi ise alıcıya diledikleri zaman, gerekçe göstermeden iletileri reddetme hakkı verir. Hizmet sağlayıcı olarak ret bildiriminin kolay ve ücretsiz ulaşmasını sağlamak ve iletide buna ilişkin bilgiyi sunmakla yükümlüsünüz. Talep size ulaşınca üç iş günü içinde ileti göndermeyi durdurmanız gerekir.

Bu yüzden her bültenin altına belirgin bir çıkış bağlantısı koyun. Bağlantıyı küçük ve soluk yapmayın. İdari para cezalarını kanunun 12. maddesi düzenler; güncel tutarlar için resmi duyuruları kontrol edin.

Bu özet hukuki danışmanlık değildir; yalnızca kanun metnine dayanır.

Bülten alt bilgisine neler koymalısınız?

Alt bilgi, bültenin güven veren son bölümüdür. Burada gönderen kurumun adını ve ulaşılabilir iletişim bilgisini yazın. Ayrıca okura bu iletiyi neden aldığını bir cümleyle hatırlatın.

Çıkış bağlantısını alt bilginin en görünür satırına koyun. Kişisel verilerin işlenmesine ilişkin aydınlatma metninize de bir bağlantı verin; örnek olarak KVKK aydınlatma metni sayfamızdaki gibi sade bir sayfa işinizi görür.

Web sitenizin veri koruma uyumu için KVKK ve GDPR uyumlu web sitesi yazımıza göz atın.

Alt bilgide metin boyutunu çok küçültmeyin. Yasal bilgi okunmuyorsa işlevini kaybeder. Kontrast kuralları burada da geçerlidir.

Bu bölümde yazacaklarınızı kendi hukuki danışmanınızla da netleştirin.

Mailing tasarımında marka kimliğini nasıl korursunuz?

Bülten, web sitenizin e-postadaki yüzüdür. Bu yüzden logo, renk ve ton sitenizle uyumlu olmalı. Okur iki yerde de aynı markayı görürse güven artar.

Renk paletini az tutun. Bir ana renk, bir vurgu rengi ve nötr tonlar çoğu bülten için yeter. Vurgu rengini yalnızca çağrı düğmesinde kullanırsanız, düğme doğal olarak öne çıkar.

Sesinizi de tutarlı kılın. Sitenizde samimi bir dil kullanıyorsanız, bültende resmi bir dile geçmeyin. Aynı şekilde sitenizdeki başlık stilini bültende de sürdürün.

Marka kimliğini kurarken yazı tipi, renk ve logo kararlarını bir kılavuza bağlamak işinizi kolaylaştırır. Bu konuda marka kimliği hizmetimizden yararlanabilirsiniz.

Bunun yanında şablonu bir kez onaylayıp kopyalayın. Her gönderimde sıfırdan tasarlamak hem zaman kaybettirir hem de tutarlılığı bozar.

Gönderici doğrulaması (SPF, DKIM, DMARC) tasarımı nasıl etkiler?

Tasarım ne kadar güzel olursa olsun, ileti spam klasörüne düşerse kimse görmez. Google'ın gönderici yönergelerine göre günde 5.000'den fazla ileti gönderen toplu göndericiler SPF, DKIM ve DMARC'ı birlikte kurmalıdır.

Aynı yönerge, pazarlama iletilerinde tek tıkla abonelikten çıkış başlıklarını ister: List-Unsubscribe ve List-Unsubscribe-Post. Ayrıca Postmaster Tools'ta bildirilen spam oranını yüzde 0,30'un altında tutmanızı söyler.

Bu ayarlar DNS ve gönderim altyapısı seviyesinde yer alır. Çoğu e-posta platformu bunları sizin yerinize ekler.

Kendi alan adınızın kayıtlarını SPF, DKIM ve DMARC kontrol aracıyla sınayabilirsiniz. Ayrıntılar için Google'ın e-posta gönderici yönergeleri sayfasını okuyun.

Mailing tasarımını göndermeden önce nasıl test edersiniz?

Test, tasarımın en çok atlanan adımıdır. Aşağıdaki sırayı izleyin.

1. Kendinize ve ekibinize bir deneme iletisi gönderin.
2. İletiyi Gmail, Outlook ve Apple Mail'de açın.
3. Telefonda hem açık hem koyu modda bakın.
4. Görselleri kapatıp alt metinlerin göründüğünü doğrulayın.
5. Tüm bağlantıları tek tek tıklayın; kırık bağlantı için kırık link kontrolü aracını deneyebilirsiniz.
6. Bağlantılara izleme parametresi ekleyin.

İzleme için UTM oluşturucu işinizi görür; parametrelerin mantığını UTM nedir yazımızda anlattık.

Gerçek müşteri listesine test mesajı göndermeyin. Yalnızca kendi adreslerinize gönderin.

Spam klasörüne düşüp düşmediğinizi de deneyin. Farklı sağlayıcılardaki kendi adreslerinize gönderip iletinin nereye düştüğüne bakın. Ayrıca iletinin düz metin sürümünü de hazırlayın; görsel ve HTML göstermeyen istemcilerde mesajınız yine de anlaşılır. Gönderimden hemen önce son bir kez konu satırındaki yazım hatalarını kontrol edin.

Mailing tasarımında hangi hatalar en sık çıkar?

Aynı hatalar tekrar eder. Bunları bilmek zaman kazandırır.

• Çok fazla düğme ve bağlantı koymak.
• Tüm mesajı tek bir büyük görsele gömmek.
• Alt metni boş bırakmak.
• Preheader yazmamak.
• Çıkış bağlantısını gizlemek ya da soluk yapmak.
• Koyu modda sınamamak.

Özellikle tek görselden oluşan bülten, kapalı görsellerde bomboş durur. Üstelik ekran okuyucu kullanan okura hiçbir bilgi vermez.

Bu hataların çoğunu tasarımın sonunda değil, başında önlersiniz. Bu nedenle şablonu kurmadan önce hedefi, tek çağrıyı ve çıkış yolunu belirleyin.

Kısacası sade bir şablon, süslü ama kırılgan bir şablondan her zaman daha iyi sonuç verir.

Mailing tasarımı sonrası performansı nasıl ölçersiniz?

Önce neyi ölçeceğinize karar verin. Bazı istemciler açılma ölçümünü bozabildiği için açılma oranına tek başına güvenmeyin. Tıklama ve sonrasındaki dönüşüm daha sağlam göstergelerdir.

Her bağlantıya UTM parametresi ekleyin, böylece analiz aracınızda trafik kaynağını izlersiniz. Ardından dönüşümü sayfa bazında inceleyin.

Dönüşüm oranını hesaplamak için dönüşüm oranı hesaplama aracını kullanabilirsiniz. Elde ettiğiniz değeri hedefinizle karşılaştırın.

Sonuçlar beklentinizin altında kalırsa önce konu satırını, sonra çağrı metnini, en sonda yerleşimi değiştirin. Aynı anda üç şeyi değiştirirseniz hangisinin işe yaradığını anlayamazsınız.

Sonuçları değerlendirirken şu ölçütlere bakın:

• Tıklama sayısı ve hangi bağlantıya tıklandığı.
• Tıklayanların sitede yaptığı eylem, örneğin form doldurma.
• Çıkış bağlantısına tıklayanların oranı.
• Teslim edilemeyen iletilerin oranı.

Çıkış oranı beklenmedik biçimde yükselirse, mesajı yanlış kitleye gönderiyor olabilirsiniz. Bu durumda önce liste seçimini gözden geçirin.

Mailing tasarımını ne zaman kendiniz yapmamalı, uzmana bırakmalısınız?

Her şablonu elle kodlamak zorunda değilsiniz. Hazır bir e-posta platformunun şablon düzenleyicisi çoğu küçük işletme için yeterlidir. Yine de bazı durumlarda işi uzmana bırakın.

• Birden çok istemcide kusursuz görünüm istiyor ve test altyapınız yoksa.
• Teslim edilebilirlik sorunu yaşıyor, SPF, DKIM ve DMARC kayıtlarını yönetemiyorsanız.
• Büyük bir listeniz varsa ve gönderim altyapısını kurmanız gerekiyorsa.
• Onay ve ret kayıtlarının hukuki uyumundan emin değilseniz.

Gönderim altyapısı ve DNS ayarları için hosting ya da e-posta sağlayıcınıza danışın. Hukuki uyum için avukat desteği alın.

Marka tutarlılığı için marka kimliği ve web tasarım hizmetlerimiz de bu iş akışına bağlanabilir.