HTML E-posta Şablonu Tasarlama: Yapı, Stil ve Test

E-posta HTML'i neden farklı yazılır?

Bir web sayfasını modern tarayıcı açar ve tarayıcılar standartları geniş biçimde destekler. E-postayı ise çok sayıda farklı istemci açar; her biri HTML ve CSS'in farklı bir alt kümesini işler, bazıları güvenlik nedeniyle betikleri ve bazı stilleri tamamen siler. Aynı kod bir istemcide kusursuz, bir başkasında dağınık görünebilir.

Bu yüzden e-posta şablonu yazarken hedef "her yerde birebir aynı görünüm" değil, "her yerde okunabilir ve kullanılabilir" olmalıdır. Gelişmiş efektler destekleyen istemcilerde ek zenginlik sağlayabilir, ama mesaj ve çağrı, o efektler çalışmasa da ayakta kalmalıdır. Bu yaklaşıma kademeli iyileştirme denir.

Hangi istemcide hangi özelliğin desteklendiği zamanla değiştiği için kesin listeler vermiyoruz; bir özelliğe güvenmeden önce güncel destek kaynaklarından ya da kendi testlerinizden doğrulayın.

Yapı: tablo tabanlı, tek sütunlu iskelet

En güvenilir iskelet, ortalanmış ve sabit bir üst genişliği olan, tek sütunlu bir tablo yapısıdır. Dış tablo e-postanın arka planını, iç tablo ise içeriğin sınırlı genişlikteki alanını taşır. Çok sütunlu bölümler gerekiyorsa küçük ekranda alt alta dizilecek biçimde kurgulanır.

İskeletin en basit hâli şöyledir:

<table role="presentation" align="center"> <tr> <td style="font-family:Arial,Helvetica,sans-serif;"> Merhaba </td> </tr> </table>

role özniteliği, tablonun düzen amaçlı olduğunu ve veri tablosu olmadığını erişilebilirlik araçlarına bildirir. Tablo hücresinin içine yazı tipi, renk ve boşluk gibi stilleri doğrudan yazarsınız. Boşlukları dış kenar boşluğu yerine hücre iç boşluğuyla vermek çoğu istemcide daha tutarlıdır.

İçeriği mantıksal sıraya dizin: önce başlık ve ana mesaj, sonra destekleyici içerik, en sonda altbilgi. Ekran okuyucu ve düz metin okuma da bu sıraya göre çalışır.

Stil, yazı tipi ve renk seçimleri

Stilleri etiketlerin içine yazmak e-postada standart yaklaşımdır. Geliştirme sırasında ayrı bir stil dosyası kullanıp yayına çıkarken stilleri etiketlere işleyen araçlardan yararlanabilirsiniz; böylece kodu okunabilir yazar, gönderimde istemci uyumluluğunu korursunuz.

Yazı tipinde web yazı tiplerine bağlı kalmayın. Bir yazı tipi yüklenmezse devreye girecek güvenli yedek zincirini her zaman tanımlayın, örneğin tercih ettiğiniz yazı tipinin ardından yaygın sistem yazı tipleri. Yazı boyutunu mobilde okunabilir seçin; küçük ekranda okunmayan metin tıklanmayan e-postadır.

Renklerde yeterli karşıtlık bırakın. Bazı istemciler koyu mod uyguladığında renkleri kendi başına değiştirebilir; açık zeminli ve koyu metinli şablonda arka plan rengini açıkça tanımlamak ve logoyu şeffaf zeminle hazırlamak, beklenmedik görünümleri azaltır. Önemli bilgiyi yalnızca renkle iletmeyin.

Görseller, düğmeler ve mobil uyum

Birçok istemci görselleri varsayılan olarak kapalı yükler. Bu yüzden şablonu yalnız görselden ibaret yapmayın. Tüm mesajı tek bir büyük resme gömmek hem erişilebilirliği bozar hem görseller kapalıyken e-postayı boş bırakır. Her görsele anlamlı bir alt metin yazın, görselin blok olarak davranması için gerekli stili verin ve görselin altında beklenmedik boşluk kalmasına karşı bunu test edin.

Çağrı düğmesini görsel yerine metin tabanlı kurun: renkli arka planlı bir tablo hücresi içinde bağlantı olarak. Böylece görseller kapalı olsa da düğme görünür ve tıklanabilir kalır. Düğme tek net eylem sunmalı, parmakla basılabilecek büyüklükte olmalıdır.

Mobil uyum için ana içeriği tek sütunda tutmak çoğu zaman yeterlidir. Çok sütunlu bölümlerde, küçük ekranda sütunların alt alta dizilmesini sağlayan medya sorgusu kullanabilirsiniz; ancak bu sorguyu desteklemeyen istemciler için tek sütunlu düzenin zaten okunur olduğundan emin olun. Dokunmatik hedeflerin birbirine yapışmamasına dikkat edin.

Ön izleme metni, düz metin sürümü ve erişilebilirlik

Gelen kutusunda konu satırının yanında görünen ön izleme metni, e-postanın açılıp açılmayacağını etkiler. Bunu boş bırakırsanız istemci e-postanın ilk metnini, çoğu zaman "tarayıcıda görüntüleyin" gibi bir cümleyi gösterir. İlk metni bilinçli yazın ve konu satırını tamamlayacak şekilde kurun.

Her HTML e-postanın yanında düz metin sürümü bulunması, hem HTML'i göstermeyen ortamlar hem de bazı filtreler için faydalıdır. Düz metin sürümü HTML'in çıplak bir kopyası olmamalı; başlıklar, bağlantılar ve çağrı okunur biçimde yazılmalıdır.

Erişilebilirlik için dili belirtin, başlıkları mantıklı sırada kullanın, bağlantı metinlerini "buraya tıklayın" yerine ne olduğunu söyleyecek biçimde yazın ve görsellere alt metin ekleyin. Bu önlemler görme engelli okurlara yardım ettiği kadar, görsellerin kapalı olduğu her okur için de işe yarar. Altbilgide gönderen kimliği ve abonelikten çıkış bağlantısı bulunmalıdır; bu hem okur hem gönderim kuralları açısından gereklidir.

Test ve sık yapılan hatalar

Gönderimden önce şablonu en az birkaç farklı istemcide ve hem masaüstü hem mobilde önizleyin. Bunun için çoklu istemci önizleme araçları vardır; ücretsiz yol ise kendi hesaplarınıza test gönderip gerçek cihazlarda açmaktır. Ayrıca görseller kapalıyken, koyu moddayken ve düz metin sürümünde bakın.

Testte kontrol edilecekler: bağlantılar doğru adrese gidiyor mu, takip parametreleri duruyor mu, değişken alanlar (ad gibi) dolu geliyor mu, ön izleme metni doğru mu, abonelikten çıkış çalışıyor mu?

Sık yapılan hatalar:

• Web sayfası gibi yazıp ileri düzey CSS'e güvenmek.
• Tüm içeriği tek görsele gömmek.
• Ön izleme metnini boş bırakmak.
• Yalnız tek istemcide test etmek.
• Çağrıyı birden fazla rekabet eden düğmeyle dağıtmak.
• Düz metin sürümünü ihmal etmek.
• Çok ağır görselle e-postayı geç yüklenir yapmak.

Temiz bir şablonun ardından asıl iş içeriktir: konu satırı, segment ve zamanlama. Bunlar için e-posta pazarlaması ve A/B testi sayfalarına bakabilirsiniz.

Bu beceriyi Mindset programlarında nerede çalışırsınız?

Dijital Pazarlama Bootcamp, e-posta pazarlamasını omnichannel ve mobil pazarlamayla birlikte ele alır. Kampanyayı şablona dökecek pazarlama ekipleri için içeriğin kanal içindeki yerini görmek açısından uygundur.

E-Ticaret Uzmanlığı Sertifika Programının CRM, e-posta ve otomasyonlar modülü ise şablonun müşteri iletişimi ve otomasyon akışlarıyla nasıl birleştiğini gösterir.