HTML Mail Şablonu Hazırlama Kuralları

HTML mail şablonu hazırlamak, web sayfası yapmaya benzediğini sandığınız an başınıza iş açan bir konudur. Tarayıcılar yirmi yıldır standartlara yakınsarken e-posta istemcileri kendi yollarına gitti: Outlook'un masaüstü sürümleri HTML'i Word'ün render motoruyla çizer, Gmail bazı stilleri kırpar, kimi mobil istemci karanlık modda renklerinizi zorla tersine çevirir. Sonuç, tarayıcıda kusursuz görünen bir şablonun alıcının kutusunda üst üste binmiş bir yığına dönüşmesidir.

Bu rehberde istemci farklılıklarına dayanıklı bir şablonu sıfırdan nasıl kuracağınızı anlatıyorum: neden hâlâ tablo kullandığımız, hangi CSS özelliklerinin güvenli olduğu, mobil uyumu nasıl sağlayacağınız, karanlık modun ne yaptığı ve düz metin alternatifiyle abonelik iptali başlıklarının neden şablonun ayrılmaz parçası olduğu. Örnek kodlar kopyalanıp doğrudan kullanılabilir; her birinin neden öyle yazıldığını da açıklıyorum.

E-posta HTML'i Web HTML'i Değildir#

Aradaki temel fark şudur: bir web sayfasında tek bir render motoruna (tarayıcı) mesajınızı gönderirsiniz, e-postada ise onlarca farklı motora aynı anda gönderirsiniz ve hiçbirinin hata ayıklama konsolu size açık değildir. Masaüstü Outlook sürümleri HTML ve CSS'i Microsoft Word'ün motoruyla işler; bu motor float, position, modern flex ve grid gibi düzen araçlarının hiçbirini desteklemez. Gmail web arayüzü style etiketi bloklarını çoğu durumda kabul eder ama mesaj belirli bir boyutu geçtiğinde gövdeyi kırpar ve stiller yarıda kalır. Apple Mail ve modern mobil istemciler ise oldukça iyi CSS desteği sunar.

Bu manzarada mantıklı strateji "en zayıf istemciye göre kur, güçlülerde iyileştir" olur. Yani iskeleti tablo ile kurarsınız, kritik stilleri satır içi yazarsınız, gelişmiş görünümü ise style içindeki media query'lerle sadece destekleyen istemcilerde devreye alırsınız. Şablonun tasarımdan bağımsız olarak da bir işlevi var: teslimat. Sadece görselden ibaret, düz metin alternatifi olmayan bir gövde tek başına filtre puanı toplar; bunun ayrıntısını mail içeriğinde spam tetikleyicileri yazısında ele aldım.

Şablon İskeleti: Tablo Tabanlı Düzen#

Standart genişlik 600 pikseldir; bu rakam masaüstü Outlook'un okuma bölmesinde yatay kaydırma yaratmadan sığan pratik bir üst sınırdır. İskelet üç katmandan oluşur: dış kapsayıcı (tam genişlik, arka plan rengi), ortalayıcı tablo (sabit genişlik) ve içerik satırları.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"
       style="background-color:#f4f6fa;margin:0;padding:0;">
  <tr>
    <td align="center" style="padding:24px 12px;">
      <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"
             style="width:600px;max-width:600px;background-color:#ffffff;border-radius:8px;">
        <tr>
          <td style="padding:32px 28px;font-family:Arial,Helvetica,sans-serif;
                     font-size:16px;line-height:24px;color:#222222;">
            Merhaba, bu bir içerik satırıdır.
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Dikkat edilecek noktalar sırayla şunlar: role="presentation" ekran okuyucuların tabloyu veri tablosu sanmasını engeller ve erişilebilirlik için gereklidir. cellpadding, cellspacing ve border niteliklerinin sıfırlanması, eski istemcilerin varsayılan boşluklarını kapatır. Genişliği hem HTML niteliği (width="600") hem de CSS (style="width:600px") olarak yazmak gereksiz görünür ama Outlook niteliği, modern istemciler CSS'i okur. font-family her metin hücresinde ayrı ayrı tekrarlanır, çünkü birçok istemcide kalıtım (inheritance) güvenilir değildir.

İç boşlukları margin yerine hücrenin padding değeriyle vermek de bilinçli bir tercihtir: Outlook margin'i sık sık yok sayar, padding ise hücre üzerinde güvenilir çalışır.

Satır İçi CSS ve Güvenli Özellik Listesi#

Kritik stiller satır içi olmalıdır. head bölümündeki style bloğu bazı istemcilerde tamamen silinir; satır içi stil ise mesajın gövdesinin parçası olduğu için hemen her yerde ayakta kalır. Pratik yöntem şudur: şablonu okunabilir biçimde style ile geliştirin, göndermeden önce bir "CSS inliner" ile satır içine çevirin. Çoğu bülten yazılımı bunu kendisi yapar.

Yazı tipi seçimi ayrı bir tuzaktır. Web fontları birçok istemcide yüklenmez; bu yüzden her zaman gerçek bir yedek yığını yazın: font-family:'Inter',Arial,Helvetica,sans-serif gibi. Font yüklenmezse metin Arial ile çizilir ve düzen bozulmaz. Buton yaparken de button etiketi yerine bir tabloyu buton gibi biçimlendirmek en dayanıklı yöntemdir:

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#2d3a5c" style="border-radius:6px;">
      <a href="https://firmaniz.com/kampanya"
         style="display:inline-block;padding:14px 28px;font-family:Arial,sans-serif;
                font-size:16px;color:#ffffff;text-decoration:none;">
        Kampanyayı İncele
      </a>
    </td>
  </tr>
</table>

Buradaki bgcolor niteliği, background-color CSS'ini okumayan istemciler için yedektir; display:inline-block ile padding ise tıklanabilir alanı bağlantının kendisine taşır.

Mobil Uyum ve Akıcı Tablolar#

Açılmaların büyük bölümü telefonda gerçekleşir, dolayısıyla mobil öncelikli düşünmek zorundasınız. İki teknik birlikte kullanılır. Birincisi akıcı tablo: sabit 600px yerine width:100%; max-width:600px yazarak dar ekranda tablonun kendiliğinden daralmasını sağlarsınız. İkincisi media query: destekleyen istemcilerde sütunları alt alta yığarsınız.

<style>
  @media only screen and (max-width: 600px) {
    .kolon { display:block !important; width:100% !important; }
    .mobil-gizle { display:none !important; }
    .buyuk-metin { font-size:18px !important; line-height:26px !important; }
  }
</style>

Media query'lerin masaüstü Outlook'ta çalışmadığını unutmayın; orada zaten pencere genişliği sabittir, bu yüzden sorun olmaz. Asıl kritik nokta !important kullanımıdır: satır içi stiller media query kurallarından daha yüksek önceliğe sahiptir, !important olmadan mobil kurallarınız hiçbir şey yapmaz.

Dokunma hedefleri için de pratik bir eşik var: tıklanabilir alanların en az 44 piksel yüksekliğinde olması, parmakla isabet oranını ciddi biçimde artırır. Buton padding'inizi buna göre ayarlayın. Metin boyutunu 14 pikselin altına düşürmeyin; iOS bazı durumlarda küçük metni otomatik büyütür ve düzeniniz bozulur.

Karanlık Mod, Görseller ve Alt Metin#

Karanlık mod, son yılların en çok şablon bozan konusu. Bazı istemciler hiçbir şey yapmaz, bazıları arka planları koyulaştırır, Outlook'un bazı sürümleri ise renkleri tamamen tersine çevirir — beyaz zeminli logonuz siyah zemine oturur ve okunmaz hale gelir.

Kontrolü bir miktar geri almak için iki sinyal verirsiniz: head içine renk şeması bildirimi ve prefers-color-scheme kuralları.

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
  @media (prefers-color-scheme: dark) {
    .kart { background-color:#1c1f26 !important; }
    .metin { color:#e8eaee !important; }
  }
</style>

Bu kurallar destekleyen istemcilerde çalışır, desteklemeyenlerde zararsızdır. Pratik savunma ise tasarımda yatar: saydam arka planlı PNG logo kullanın, saf beyaz (#ffffff) yerine hafif kırık bir zemin seçin ve metin renklerinde aşırı kontrast uçlarından kaçının.

Görsellerde üç kural: her img etiketine anlamlı bir alt metni yazın (görseller engellendiğinde alıcı ne olduğunu anlasın), genişlik ve yüksekliği nitelik olarak belirtin (yükleme sırasında düzen zıplamasın), ve display:block verin (bazı istemcilerin görsel altına eklediği boşluğu kapatır).

<img src="https://firmaniz.com/img/urun.png" alt="Yeni ürün kutusu"
     width="560" height="280"
     style="display:block;width:100%;max-width:560px;height:auto;border:0;">

Görselleri mesajın içine gömmek (CID ile ek olarak) yerine mutlaka bir sunucudan bağlantıyla verin; gömülü görseller mesaj boyutunu şişirir ve birçok filtreyi gerer.

Önizleme Metni, Düz Metin Alternatifi ve Zorunlu Başlıklar#

Gelen kutusunda konu satırının yanında görünen kısa metne önizleme (preheader) denir. Bunu belirlemezseniz istemci gövdenin ilk okunabilir metnini alır — ki bu genelde "Bu maili görüntüleyemiyorsanız tıklayın" olur. Önizlemeyi gizli bir metin hücresiyle kontrol edersiniz:

<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;">
  Ağustos kampanyası: seçili paketlerde geçerli indirim, 31 Ağustos'a kadar.
</div>

mso-hide:all Outlook için, display:none diğerleri içindir. Metni 40–100 karakter arasında tutun.

Şablonun ikinci yarısı HTML değildir: her mesaj multipart/alternative yapısında bir düz metin sürümü taşımalıdır. Bu hem eski istemciler hem de filtreler için gereklidir. Son olarak, gövdedeki görünür abonelik iptali bağlantısına ek olarak mesaj başlıklarına da abonelik iptali eklemeniz gerekir:

List-Unsubscribe: <https://firmaniz.com/abonelik-iptal?t=ABC123>, <mailto:[email protected]>
List-Unsubscribe-Post: List-Unsubscribe=One-Click

Bu iki başlık, Gmail ve Yahoo'nun toplu göndericilerden beklediği tek tıkla iptal davranışını sağlar; ayrıntıları Gmail ve Yahoo gönderici kuralları yazısında bulabilirsiniz. Bağlantıdaki jetonun (t=ABC123) tahmin edilemez olması gerekir, yoksa kötü niyetli biri başkalarını listeden çıkarabilir.

Test Etme ve Sık Yapılan Hatalar#

Şablonu bitirdiğinizde en az üç kontrol yapın: gerçek istemcilerde görsel test (masaüstü Outlook, Gmail web, iOS Mail, Android Gmail), görseller engelliyken okunabilirlik testi ve düz metin sürümünün anlamlı olup olmadığı testi. Küçük bir teslimat kontrolü için komut satırından deneme maili göndermek de işe yarar:

# Şablonu bir test adresine gönder (swaks paketi gerekir)
swaks --to [email protected] --from [email protected] \
      --server mail.firmaniz.com:587 --tls \
      --auth-user [email protected] \
      --header "Subject: Sablon testi" \
      --data kampanya.eml

En sık yapılan hatalar şunlar. Birincisi, satır içi CSS'e çevirmeyi unutmak: tarayıcıda mükemmel görünen şablon Gmail'de çıplak metin olarak açılır. İkincisi, tek büyük görsel kullanmak: görseller engellendiğinde alıcı bomboş bir kutu görür. Üçüncüsü, !important olmadan media query yazmak: mobil kurallar sessizce hiçbir şey yapmaz. Dördüncüsü, abonelik iptali bağlantısını sadece görselin içine koymak: görsel engellenince iptal yolu kaybolur, alıcı "önemsiz" düğmesine basar. Beşincisi, şablonu 100 KB üzerine şişirmek: Gmail gövdeyi kırpar ve alt taraftaki iptal bağlantısı görünmez olur.

Sıkça Sorulan Sorular#

E-posta şablonunda neden hâlâ tablo kullanıyoruz#

Çünkü masaüstü Outlook sürümleri HTML'i Word'ün render motoruyla çizer ve bu motor float, flex, grid gibi modern düzen araçlarının hiçbirini desteklemez. Tablolar ise Word motorunun güvenilir biçimde çizdiği tek düzen aracıdır. div tabanlı bir şablon Apple Mail'de kusursuz görünürken Outlook'ta üst üste binebilir; bu yüzden iskelet tablo, süsleme CSS olur.

Şablonumu neden satır içi CSS'e çevirmem gerekiyor#

Bazı istemciler mesajın head bölümünü ya da style bloklarını tamamen kaldırır, çünkü mesajı kendi arayüzlerinin içine gömerler. Satır içi stil ise gövde elemanının bir niteliği olduğu için silinemez. Pratikte şablonu okunabilir biçimde style ile geliştirip gönderim öncesi bir dönüştürücüyle satır içine çevirmek en verimli yöntemdir.

Mail şablonunun ideal genişliği kaç piksel#

Yaygın standart 600 pikseldir ve bunun sebebi masaüstü Outlook'un dar okuma bölmesidir. Daha geniş bir şablon o bölmede yatay kaydırma yaratır. Modern yaklaşım, tabloya hem max-width:600px hem de width:100% vermektir: masaüstünde 600 pikselde durur, dar ekranda kendiliğinden daralır.

Karanlık modda logom kayboluyor, ne yapmalıyım#

Sorun genellikle beyaz zeminli, saydamlığı olmayan bir logo dosyasından kaynaklanır; istemci arka planı koyulaştırınca logo beyaz bir kutu olarak kalır ya da renkleri tersine çevrilince okunmaz olur. Çözüm, saydam arka planlı bir PNG kullanmak ve logonun etrafına ince bir açık renk çerçeve ya da yumuşak bir zemin hücresi koymaktır. Ayrıca color-scheme meta etiketlerini eklemeyi ihmal etmeyin.

Düz metin sürümünü göndermek zorunlu mu#

Teknik olarak zorunlu değil ama pratikte gereklidir. Yalnızca HTML içeren mesajlar filtrelerde ayrı bir kural tetikler, bazı eski istemcilerde ve saat gibi kısıtlı cihazlarda okunamaz. Düz metin sürümü HTML'in birebir kopyası olmak zorunda değildir; ana mesajı, çağrı bağlantısını ve abonelik iptali adresini içeren sade bir metin yeterlidir.

Şablonu hangi istemcilerde test etmeliyim#

En az dört yerde: masaüstü Outlook (en katı motor), Gmail web arayüzü (stil kırpma ve gövde kırpma), iOS Mail (mobil ve karanlık mod) ve Android Gmail uygulaması. Bunlara ek olarak görselleri engelleyip mesajı bir kez daha okuyun. Bu dört istemci ve görselsiz senaryo, karşılaşacağınız sorunların büyük çoğunluğunu ortaya çıkarır.

Kapanış#

Dayanıklı bir HTML mail şablonu, yeni bir teknoloji öğrenmekten çok eski kısıtları kabul etmekle ilgilidir. Akılda tutulacak dört alışkanlık şu: iskeleti tablo ile kurup boşlukları hücre padding'iyle verin, kritik stilleri satır içine çevirin, mobil kurallarınızı !important ile yazın ve her gönderime gerçek bir düz metin alternatifi ile tek tıkla abonelik iptali başlığını ekleyin. Şablonu bitirdiğinizde son işiniz görselleri kapatıp mesajı bir kez daha okumak olsun.

Şablon hazır olsa bile gönderim tarafı zayıfsa sonuç değişmez. Kendi gönderim altyapınızı kurmak isterseniz Postfix, DKIM ve TLS yapılandırması hazır gelen SMTP sunucu paketlerimiz iyi bir başlangıç noktasıdır; tam kontrol isteyenler için root erişimli VDS sunucularımız var. Kampanya yönetimini komple devretmek isterseniz e-posta pazarlama hizmetimize, kurumsal posta kutuları için e-posta çözümlerimize göz atabilirsiniz. Gönderim ayarlarınızı hızlıca sınamak için SMTP test aracı da işinizi görür.