E-posta Pazarlaması
Tasarım

E-posta Bülteni Tasarım Kılavuzu: Düzenler, Şablonlar, Mobil Kontrol ve Örnekler (2026)

E-posta bültenlerinizi düzen, hiyerarşi, şablonlar, mobil görüntüleme, erişilebilirlik, koyu mod, test ve e-ticaret kişiselleştirmesi için pratik yönlendirmelerle tasarlayın.

Set Noa
Set Noa
Güncellendi
0 ziyaret · 7 gün
email newsletter
E-posta Bülteni Tasarım Kılavuzu?

Güçlü bir bülten tasarımı tekrarlanabilir bir üretim sistemidir: net hiyerarşi, mobil öncelikli düzen, erişilebilir tipografi ve kontrast, optimize edilmiş görseller, tek bir ana CTA, test edilmiş görüntüleme, mevzuata uygun altbilgi bilgileri ve güvenilir müşteri verisinden gelen güvenli kişiselleştirme.

Daha fazla bilgi

E-posta bültenleri hala işe yarıyor, çünkü markalara, yayıncılara, içerik üreticilerine ve e-ticaret ekiplerine iletişim izni aldıkları abonelere doğrudan ulaşma imkanı veriyor. Tasarım ise bu mesajın okunabilir, güvenilir, eyleme dönüştürülebilir ve e-posta istemcileri arasında kullanılabilir olup olmadığını belirliyor.

Bu rehber özgün yapısını koruyor: görsel hiyerarşi, marka tutarlılığı, düzen türleri, mobil optimizasyon, tipografi, renk, erişilebilirlik, CTA tasarımı, örnekler, araçlar, hatalar, Tajo ve Brevo bağlamı, sık sorulan sorular ve ilgili makaleler. Bu güncelleme, desteklenmeyen kıyaslama iddialarını kaldırıyor ve sayfayı pratik bir 2026 bülten tasarım kılavuzuna dönüştürüyor.

E-posta Bülteni Tasarımı Neden Önemli

Tekniklere geçmeden önce, tasarımın bülten başarısında neden bu kadar kritik bir rol oynadığını anlayalım.

İlk Ekran Testi

Aboneler bir bülteni varsayılan olarak baştan sona okumaz. Mesajın daha fazla ilgiyi hak edip etmediğine karar vermeden önce göndereni, konu satırını, önizleme metnini, üstbilgiyi, ilk başlığı, görselleri ve ilk CTA’yı gözden geçirirler.

İyi bir ilk ekran dört soruyu hızlıca yanıtlar:

  • Bunu kim gönderdi?
  • Bunu neden alıyorum?
  • Ana değer nedir?
  • Bir sonraki adım nedir?

Tasarım Gerçekte Neyi Etkiler

Kendi kontrollü testiniz yoksa, bu tasarım değişikliği çift haneli tıklama artışı sağlar gibi desteklenmeyen iddialardan kaçının. Bülten tasarımı performansı pratik mekanizmalar üzerinden etkiler:

Tasarım faktörüNeyi iyileştirirNeyi kontrol etmeli
Net hiyerarşiDaha hızlı tarama ve kavramaOkuyucu ana mesajı tek bakışta anlayabiliyor mu?
Mobil düzenKüçük ekranlarda kullanılabilirlikDüzen yatay kaydırma olmadan düzgün diziliyor mu?
Görsel stratejisiBağlam ve görsel ilgiGörseller engellendiğinde e-posta anlamlı kalıyor mu?
Erişilebilir kontrastDaha fazla abone için okunabilirlikMetin ve butonlar kontrast gereksinimlerini karşılıyor mu?
CTA netliğiEyleme duyulan güvenTek bir ana eylem ve açıklayıcı buton metni var mı?
Marka tutarlılığıTanınırlık ve güvenTasarım siteyle, ürünle ve diğer kanallarla örtüşüyor mu?
Görüntüleme kontrolüİstemciler arası güvenilirlikMesaj yayına almadan önce test edildi mi?

Bülten tasarımınız açılmadan tıklamaya giden davranışı, dönüşüm kalitesini, abonelikten çıkışları, şikayetleri ve abone güvenini etkiler. Kesin artış oranı ise listenize, mesajınıza, teklifinize ve test disiplininize bağlıdır.

Tajo şablonları

Dört düzen, çalışır hâlde

Aşağıdaki her panel, şablonun kendi gerçek e-posta HTML'i; gerçek bir genişlikteki çerçevede duruyor. Genişliği 375 px'e indirin ve sütunların nasıl alt alta dizildiğini izleyin.

Temanızı izler — diğerini görmek için üst çubuktan değiştirin.

The Letter şablonunun HTML'ini oku 6 KB, derleme adımı yok 
<!DOCTYPE html>
<html lang="tr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Letter</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#151515 !important; }
    .d-card { background-color:#1c1c1c !important; }
    .d-ink { color:#f2f2f2 !important; }
    .d-mute { color:#a8a8a8 !important; }
    .d-rule { border-color:#3a3a3a !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f0efec;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Not uygulamanızda sakladığınız alıntı, içerik takviminizden daha çok çalışıyor.</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f0efec;">
  <tr><td align="center" style="padding:32px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">

      <tr><td style="padding:0;">
        <img src="/_astro/letter-masthead.BcPkHvz4.png" width="600" height="250" alt="Meridian Press başlığı: çapraz bir bantla kesilen eşmerkezli mavi yaylar" style="width:100%;height:auto;max-width:600px;">
      </td></tr>

      <tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;">Meridian Press · Sayı 47</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">Arşiv ürünün kendisi</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Üç hafta önce 2019'da yazdığım bir metni aradım ve bulamadım. Ne sitede, ne dışa aktarmada, ne de platformun kendi aramasında. Bin iki yüz sayı ve çalışan tek dizin benim hafızamdı.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Altı yıl bülten çıkarmanın kimsenin anlatmadığı kısmı bu. Göndermek kolay. Saklamak değil.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:8px 88px 28px 88px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr><td class="quote" style="border-left:3px solid #0084d1;padding:4px 0 4px 0;padding-left:20px;font-family:Georgia,'Times New Roman',Times,serif;">
            <p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">Yayımladığınız her şey bir yatırımdır. Çekimi neredeyse kimse kurmuyor.</p>
          </td></tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Bu yüzden bu hafta eski sayıları gerçek bir arşive dönüştürdüm: etiketler, tam metin arama ve kalıcı adreslerle. Dokuz gün sürdü. Abone sayısı kıpırdamadı. Sitede geçirilen süre üçe katlandı.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Hepsi aşağıda, işe yaramayan kısımlar dâhil.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">Tüm sayıyı oku &rarr;</a>
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 88px;border-top:1px solid #e4e2de;"></td></tr>

      <tr><td class="gutter" style="padding:24px 88px 40px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:22px;color:#6b6b6b;">Her perşembe elle yazılır. Yanıtlayın, okuyorum.</p>
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Meridian Press, 14 Harbour Lane, Bristol BS1 4TT<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Abonelikten çık</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Tarayıcıda görüntüle</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

Temel E-posta Bülteni Tasarım İlkeleri

1. Görsel Hiyerarşi

Görsel hiyerarşi, okuyucuları içeriğinizde sizin amaçladığınız sırayla yönlendirir. Bu olmadan aboneler rastgele göz gezdirir ve kilit mesajları kaçırır.

Etkili Görsel Hiyerarşi Oluşturmak

Boyut: Daha büyük öğeler dikkati önce çeker. Başlığınız gövde metninden belirgin şekilde büyük olmalı, CTA’lar ise net biçimde öne çıkmalıdır.

Renk: Canlı veya zıt renkler odak noktaları yaratır. Ana CTA’lar ve önemli öğeler için markanızın vurgu rengini kullanın.

Boşluk: Beyaz alan (negatif alan) öğeleri birbirinden ayırır ve göze dinlenme yeri verir. Yoğun tasarımlar bunaltıcı hissettirir, ferah tasarımlar ise premium bir izlenim bırakır.

Konum: Göz takibi çalışmaları, okuyucuların doğal olarak F deseni veya Z deseni izlediğini gösteriyor. En önemli içeriğinizi bu yollar üzerine yerleştirin.

Görsel Hiyerarşi Örneği

[LOGO]                                    [VIEW IN BROWSER]




          LARGE HEADLINE (FIRST ATTENTION)
    Supporting subheadline with more detail


                 [HERO IMAGE]


Body text that provides context and value to the reader.
Keep paragraphs short and scannable.


            [PRIMARY CTA BUTTON]




   [SECONDARY CONTENT]    [SECONDARY CONTENT]


                [FOOTER]

2. Marka Tutarlılığı

Bülteniniz, markanızdan geldiği anında anlaşılacak kadar tanıdık olmalıdır. Tutarlılık güven inşa eder ve her gönderimde marka kimliğinizi pekiştirir.

Korunması Gereken Marka Öğeleri

  • Logo konumu - Her e-postada aynı yer (genellikle sol üst veya ortalanmış)
  • Renk paleti - 2-3 marka rengini tutarlı biçimde kullanın
  • Tipografi - 1-2 yazı tipi ailesiyle sınırlı kalın
  • Görsel stili - Tutarlı fotoğraf veya illüstrasyon yaklaşımı
  • Ses tonu - Web sitenizle ve diğer iletişimlerinizle örtüşsün

Marka Tutarlılığı Kontrol Listesi

ÖğeYönerge
Ana renkCTA’lar ve vurgular için kullanın
İkincil renkBölümler ve ayırıcılar için kullanın
LogoÜstbilgiye ekleyin, altbilgide isteğe bağlı
Yazı tipleriEn fazla 2 aile (başlık ve gövde)
Görsel stiliTutarlı filtreler, kırpma, kompozisyon

3. Ters Piramit Modeli

Bülten içeriğinizi ters piramit gibi yapılandırın: en önemli bilgi üstte, destekleyici ayrıntılar altta.

                  MOST IMPORTANT
            (Headline, key message, hero)


              SUPPORTING INFORMATION
           (Context, benefits, details)


                 CALL TO ACTION
            (Clear next step)

Bu yapı, hiç aşağı kaydırmayan abonelerin bile ana mesajınızı almasını sağlar.

4. Üçler Kuralı

Fotoğrafçılık ve grafik tasarımdan ödünç alınan üçler kuralı, dengeli ve görsel olarak çekici düzenler yaratır.

E-postanızı üçe üçlük bir ızgaraya bölün ve kilit öğeleri ızgara çizgileri üzerine ya da kesişim noktalarına yerleştirin. Bu, doğal bir denge yaratır ve dikkati stratejik noktalara çeker.

5. Boşluk Dostunuzdur

Öğeler arasındaki boş alan, en güçlü tasarım araçlarından biridir. Şunları yapar:

  • Metin sıkışıklığını önleyerek okunabilirliği artırır
  • Önemli öğeleri yalıtarak odak yaratır
  • Kalite hissi verir (premium markalar cömert boşluk kullanır)
  • Okuyucular üzerindeki bilişsel yükü azaltır

Öneri: Ana bölümler arasında en az 20px, bölüm içindeki öğeler arasında ise 10-15px dolgu kullanın.

E-posta Bülteni Düzen Türleri

Farklı bülten amaçları farklı düzenler gerektirir. En etkili yapılar şunlardır.

1. Tek Sütunlu Düzen

En uygun olduğu durum: Mobil öncelikli kitleler, hikaye odaklı içerik, minimalist markalar

             [HEADER]


           [HERO IMAGE]


           [HEADLINE]
          [BODY TEXT]
            [CTA]


        [SECONDARY CONTENT]


             [FOOTER]

Avantajları:

  • Kusursuz mobil uyumluluk
  • Göz gezdirmesi ve okuması kolay
  • Tasarlaması ve kodlaması basit
  • Doğal içerik akışı

En iyi uygulamalar:

  • Maksimum genişlik: 600px
  • Satır uzunluğu: 50-75 karakter
  • Bölüm başına tek bir ana CTA

2. İki Sütunlu Düzen

En uygun olduğu durum: E-ticaret vitrinleri, içerik derlemeleri, yan yana karşılaştırmalar

             [HEADER]


           [HERO SECTION]


   [PRODUCT 1]       [PRODUCT 2]
    [IMAGE]           [IMAGE]
    [TEXT]            [TEXT]
    [CTA]             [CTA]


             [FOOTER]

Avantajları:

  • Birden fazla öğeyi verimli biçimde gösterir
  • Görsel ilgi yaratır
  • Karşılaştırma içeriği için uygundur

En iyi uygulamalar:

  • Mobilde tek sütuna dizin
  • Denge için eşit sütun genişlikleri
  • Minimum sütun genişliği: 280px

3. Hibrit ve Modüler Düzen

En uygun olduğu durum: İçerik açısından zengin bültenler, haber derlemeleri, çok konulu iletişimler

             [HEADER]


          [FEATURED STORY]


   [STORY 2]         [STORY 3]


         [FULL-WIDTH CTA]


 [ITEM 1]  [ITEM 2]    [ITEM 3]


             [FOOTER]

Avantajları:

  • Son derece esnektir
  • Farklı içerik türlerini barındırır
  • Görsel bir ritim yaratır

En iyi uygulamalar:

  • Bölümler arasında net ayrımı koruyun
  • İçerik hiyerarşisini göstermek için görsel ipuçları kullanın
  • Mobil görüntülemeyi dikkatle test edin

4. Z Deseni Düzeni

En uygun olduğu durum: Promosyon e-postaları, duyuru bültenleri

Z deseni, sayfadaki doğal göz hareketini izler: soldan sağa, sonra çapraz olarak aşağı, sonra tekrar soldan sağa.

  [LOGO]  [NAV]        First horizontal scan


                                        Diagonal movement


  [CONTENT]  [CTA]        Second horizontal scan

En iyi uygulamalar:

  • Logoyu ve gezinme öğelerini ilk yatay satıra yerleştirin
  • Kilit görselleri merkezdeki çapraz yola konumlandırın
  • CTA’ları yatay tarama satırlarının sonuna koyun

5. F Deseni Düzeni

En uygun olduğu durum: Metin ağırlıklı bültenler, eğitici içerik

Okuyucular metin ağırlıklı içerikle karşılaştıklarında F deseninde tarar: iki yatay geçiş, ardından sol kenar boyunca dikey bir tarama.

        First horizontal scan
        Second horizontal scan


                                        Vertical scan

En iyi uygulamalar:

  • Önemli bilgiyi ilk iki satıra koyun
  • Paragraflara önemli kelimelerle başlayın
  • Kolay tarama için sola hizalı metin kullanın

Mobil Öncelikli E-posta Tasarımı

Mobil payı kitleye, sektöre ve kampanya türüne göre değişir, ancak çoğu bültenin küçük ekranlarda çalışması gerekir. Varsayımda bulunmadan önce kendi raporlarınıza bakın, sonra şablonu ana mesaj, CTA ve altbilgi mobilde kullanılabilir kalacak şekilde tasarlayın.

Mobil Tasarım Gereksinimleri

Dokunmaya Uygun Hedefler

  • Minimum buton boyutu: 44x44 piksel
  • Dokunma hedefi aralığı: Tıklanabilir öğeler arasında en az 10px
  • CTA konumu: Ortalanmış ve başparmakla kolay erişilebilir

Mobil İçin Tipografi

ÖğeMasaüstü BoyutuMobil Boyutu
Başlıklar28-36px22-28px
Alt başlıklar20-24px18-22px
Gövde metni16-18pxEn az 16px
CTA’lar16-18px16-18px

Tek Sütun Önceliği

İki sütunlu düzenler mobilde düzgün biçimde alt alta dizilmelidir:

Desktop:                    Mobile:


 COL 1   COL 2              COL 1


                                COL 2

Mobil Optimizasyon Kontrol Listesi

  • Tek sütunlu veya duyarlı çok sütunlu düzen
  • Yakınlaştırmadan okunabilen yazı tipi boyutları (gövde 16px ve üzeri)
  • Dokunmaya yetecek büyüklükte butonlar (en az 44px)
  • Görseller düzgün ölçekleniyor
  • Yatay kaydırma gerekmiyor
  • Önemli içerik kaydırmadan görünüyor
  • Önizleme metni mobil gelen kutuları için optimize edilmiş
  • Görseller ve toplam dosya ağırlığı mobil bağlantılar için yeterince hafif

Duyarlı Tasarım Teknikleri

Tasarımınızı uyarlamak için CSS medya sorguları kullanın:

/* Desktop styles */
.content-wrapper {
  width: 600px;
}


/* Mobile styles */
@media only screen and (max-width: 480px) {
  .content-wrapper {
    width: 100% !important;
  }


  .column {
    display: block !important;
    width: 100% !important;
  }


  .mobile-center {
    text-align: center !important;
  }
}

Not: Birçok e-posta istemcisinin CSS desteği sınırlıdır. Birincil yaklaşım olarak satır içi stilleri, iyileştirmeler için ise medya sorgularını kullanın.

Tipografi En İyi Uygulamaları

Tipografi, bülteninizin okunabilirliğini ve marka algısını yapabilir de bozabilir de.

Yazı Tipi Seçimi

Web Güvenli Yazı Tipleri

Bu yazı tipleri e-posta istemcileri arasında tutarlı görüntülenir:

  • Sans-serif: Arial, Helvetica, Verdana, Trebuchet MS
  • Serif: Georgia, Times New Roman, Palatino

E-postada Web Yazı Tipleri

Modern e-posta istemcileri @font-face veya Google Fonts üzerinden web yazı tiplerini destekler. Her zaman yedek ekleyin:

font-family: 'Open Sans', Arial, sans-serif;

İpucu: Web yazı tiplerini istemciler arasında test edin. Gmail, Apple Mail ve iOS Mail destekler, Outlook desteklemez.

Tipografi Yönergeleri

Satır Uzunluğu

  • En uygun: Satır başına 50-75 karakter
  • Maksimum: 80 karakter
  • 600px genişlik için: İdeal satır uzunluğu için 16-18px yazı tipi kullanın

Satır Yüksekliği

  • Gövde metni: Yazı tipi boyutunun 1,5 ila 1,7 katı
  • Başlıklar: Yazı tipi boyutunun 1,2 ila 1,3 katı

Yazı Tipi Eşleştirme

Hiyerarşi yaratmak için kontrast kullanın:

Kullanım AlanıÖrnek Eşleştirme
KlasikGeorgia (başlıklar) + Arial (gövde)
ModernMontserrat (başlıklar) + Open Sans (gövde)
ProfesyonelRoboto Slab (başlıklar) + Roboto (gövde)
ZarifPlayfair Display (başlıklar) + Lato (gövde)

Metin Biçimlendirme İpuçları

  • Vurgu için kalın kullanın, altı çizili değil (altı çizili bağlantı çağrıştırır)
  • TÜMÜ BÜYÜK HARF kullanımını kısa başlıklar veya CTA’larla sınırlayın
  • Daha kolay okuma için gövde metnini sola hizalayın
  • Görsel denge için başlıkları ortalayın
  • Düzensiz boşluklar yarattığı için iki yana yaslı metinden kaçının

E-posta İçin Görsel Optimizasyonu

Görseller bültenleri güçlendirir, ancak performans ve erişilebilirlik için dikkatli optimizasyon gerektirir.

Görsel Türleri ve Kullanımları

Görsel TürüEn Uygun Olduğu DurumFormat
Hero / bannerAna görsel odakJPEG veya WebP
Ürün fotoğraflarıE-ticaret vitrinleriJPEG
Simgeler / grafiklerCTA’lar, madde işaretleriPNG veya SVG
LogolarMarka tanımlamasıPNG (saydam)
AnimasyonluDikkat çekmeGIF

Görsel Boyutlandırma Yönergeleri

  • Maksimum genişlik: 600px (e-posta genişliğiyle uyumlu)
  • Hero görselleri: 600px x 300-400px
  • Ürün görselleri: 280-300px genişlik
  • Küçük görseller: 100-150px genişlik

Görsel Dosya Boyutu Optimizasyonu

Büyük görseller yüklenmeyi yavaşlatır ve spam klasörüne düşme olasılığını artırır.

Hedef dosya boyutları:

  • Hero görselleri: 200KB’nin altında
  • Ürün görselleri: 100KB’nin altında
  • Simgeler: 10KB’nin altında
  • Toplam e-posta boyutu: 1MB’nin altında

Optimizasyon teknikleri:

  • Fotoğraflar için JPEG kullanın (%80-85 kalite)
  • Saydamlık içeren grafikler için PNG kullanın
  • Görselleri TinyPNG veya ImageOptim gibi araçlarla sıkıştırın
  • Destekleyen istemciler için WebP formatını değerlendirin

Alternatif Metin En İyi Uygulamaları

Alternatif metin, erişilebilirlik için ve görseller yüklenmediğinde kritik önemdedir:

İyi alternatif metin:

<img src="hero.jpg" alt="Woman wearing our new Spring Collection blue linen dress, standing in a garden">

Zayıf alternatif metin:

<img src="hero.jpg" alt="image" />
<img src="hero.jpg" alt="" />
<img src="hero.jpg" alt="hero-image-spring-2025-v2-final.jpg" />

Alternatif metin yönergeleri:

  • Görselin ne gösterdiğini tarif edin
  • İlgili anahtar kelimeleri doğal biçimde ekleyin
  • 125 karakterin altında tutun
  • Anlamlı olsun, yalnızca şunun görseli demeyin

Retina Ekran Optimizasyonu

Yüksek çözünürlüklü ekranlarda net görseller için, görselleri gösterim boyutunun 2 katında kullanın:

  • Gösterim boyutu: 300px genişlik
  • Görsel dosyası: 600px genişlik
  • HTML’de açık genişlik değeri belirtin
<img src="product-600w.jpg" width="300" style="width: 300px; max-width: 100%;" alt="Product description">

Renk Psikolojisi ve Kullanımı

Renk duyguları etkiler, dikkati yönlendirir ve marka kimliğini pekiştirir.

E-postada Renk Psikolojisi

RenkÇağrışımlarEn Uygun Olduğu Alan
MaviGüven, istikrar, sakinlikFinans, teknoloji, sağlık
KırmızıAciliyet, heyecan, tutkuİndirimler, CTA’lar, aciliyet
YeşilBüyüme, sağlık, doğaSürdürülebilirlik, sağlık, başarı
TuruncuEnerji, yaratıcılık, sıcaklıkCTA’lar, genç odaklı markalar
MorLüks, yaratıcılık, bilgelikPremium markalar, güzellik
Sarıİyimserlik, netlik, sıcaklıkVurgular, dikkat çekme
SiyahZarafet, lüksPremium, moda
BeyazTemiz, sade, safBoşluk, arka planlar

Renk Oranı Yönergeleri

60-30-10 kuralını izleyin:

  • %60: Ana renk veya arka plan rengi
  • %30: İkincil renk
  • %10: Vurgu rengi (CTA’lar, öne çıkanlar)

Erişilebilirlik İçin Renk Kontrastı

Metin ile arka plan arasında yeterli kontrast sağlayın:

  • Normal metin: En az 4,5:1 kontrast oranı
  • Büyük metin (18px ve üzeri): En az 3:1 kontrast oranı
  • Araç kullanın: WebAIM Contrast Checker

Yüksek kontrast örnekleri:

  • Beyaz (#FFFFFF) üzerinde siyah (#000000) - 21:1
  • Beyaz üzerinde koyu mavi (#003366) - 12,6:1
  • Koyu mor (#4A154B) üzerinde beyaz - 10,8:1

CTA Buton Renkleri

Eylem çağrısı butonlarınız anında öne çıkmalıdır:

  • En yüksek kontrastlı vurgu renginizi kullanın
  • Tüm e-postalarda tutarlılığı koruyun
  • Performansı optimize etmek için farklı renkleri A/B testinden geçirin
  • Rengin gövde metnindeki bağlantılardan farklı olduğundan emin olun

E-posta Erişilebilirliği

Erişilebilir e-posta tasarımı, yardımcı teknolojiler kullananlar dahil tüm abonelerin içeriğinizle etkileşime girebilmesini sağlar.

E-posta İçin WCAG Yönergeleri

Web İçeriği Erişilebilirlik Yönergeleri (WCAG) e-posta için de geçerlidir:

1. Algılanabilir

  • Görseller için metin alternatifleri sağlayın (alternatif metin)
  • Bilgiyi iletmek için yalnızca renge güvenmeyin
  • Yeterli renk kontrastı sağlayın
  • Metnin düzeni bozmadan yeniden boyutlandırılabilmesini sağlayın

2. Kullanılabilir

  • Tüm işlevler klavyeyle erişilebilir olsun
  • Kullanıcılara içeriği okumaları için yeterli zaman verin
  • Nöbet tetikleyebilecek yanıp sönen içerik kullanmayın

3. Anlaşılabilir

  • Net ve sade bir dil kullanın
  • Tutarlı gezinme sağlayın
  • Net hata mesajları verin

4. Sağlam

  • Geçerli HTML kullanın
  • Farklı e-posta istemcilerinde test edin
  • Yardımcı teknolojilerle uyumluluğu sağlayın

Erişilebilir E-posta Kontrol Listesi

  • Tüm görsellerde açıklayıcı alternatif metin var
  • Renk kontrastı WCAG AA standartlarını karşılıyor (4,5:1)
  • Bağlantılar açıklayıcı (buraya tıklayın değil, rehberimizi okuyun)
  • Yazı tipi boyutu en az 14px (16px tercih edilir)
  • E-postanın mantıklı bir okuma sırası var
  • Tablolar yalnızca düzen için kullanılmış, veri için değil (ya da uygun başlıkları var)
  • Dil HTML içinde tanımlanmış
  • Etkileşimli öğeler için odak göstergeleri görünür

Ekran Okuyucu Değerlendirmeleri

E-postanızı ekran okuyucu kullanıcıları için yapılandırın:

  • Mümkün olduğunda anlamsal HTML kullanın (h1, h2, p ve benzeri)
  • Düz metin sürümü sağlayın
  • Tarayıcıda görüntüle bağlantısı ekleyin
  • Yalnızca görselden oluşan e-postalardan kaçının
  • VoiceOver, NVDA veya JAWS ile test edin

Etkili CTA Tasarımı

Eylem çağrınız, tasarımın dönüşümle buluştuğu yerdir. Bunu doğru yapın.

CTA Buton En İyi Uygulamaları

Boyut ve Biçim

  • Minimum boyut: 44px yükseklik, 120px genişlik
  • Dolgu: En az 12-16px dikey, 24-32px yatay
  • Biçim: Markaya uyan ve kolayca tanınabilir kalan bir buton biçimi kullanın

Renk ve Kontrast

  • Çevresindeki bölümden ayrışan bir marka vurgu rengi kullanın
  • Arka planla yüksek kontrast sağlayın
  • Buton metni son derece okunabilir olmalı

Metin Yönergeleri

  • Eylem odaklı fiiller kullanın: Hemen alışveriş yapın, Başlayın, İndirin
  • Uygun olduğunda aciliyet yaratın: İndiriminizi alın
  • Kısa tutun: 2-5 kelime
  • Genel geçer metinlerden kaçının: Buraya tıklayın, Gönder, Daha fazla bilgi

CTA Konumlandırma

  • Ana CTA: Katlamanın üstünde (kaydırmadan görünür)
  • İkincil CTA: Destekleyici içerikten sonra
  • E-posta başına tek bir ana CTA (karar felcinden kaçının)

CTA Metni Örnekleri

SektörEtkili CTA
E-ticaretİndirimdeki ürünleri görün
SaaSÜcretsiz denemeyi başlatın
İçerikRehberin tamamını okuyun
EtkinliklerYerimi ayırın
BültenHaftalık ipuçlarını alın

Buton ve Metin Bağlantısı

Ana eylemler için buton, ikincil eylemler için metin bağlantısı kullanın:

[HEMEN ALIŞVERİŞ YAPIN]   Ana buton (yüksek görsel ağırlık)


ya da yeni gelenlere göz atın    İkincil metin bağlantısı

Sektöre Göre E-posta Bülteni Örnekleri

Farklı sektörlerde etkili bülten tasarımlarını inceleyelim.

E-ticaret Bülteni Tasarımı

Kilit öğeler:

  • Yüksek kaliteli ürün fotoğrafları
  • Net fiyat gösterimi
  • Birden fazla ürün vitrini
  • Güçlü promosyon mesajı
  • Kolayca dokunulabilen alışveriş butonları

Düzen önerisi: Ürün kartlarıyla modüler ızgara

         SALE BANNER


        [HERO PRODUCT]
         30% OFF
       [SHOP NOW]


  [PROD 1]        [PROD 2]
   $49.99          $79.99


     FREE SHIPPING OVER $75

SaaS ve Teknoloji Bülteni Tasarımı

Kilit öğeler:

  • Temiz, minimalist estetik
  • Simgelerle öne çıkan özellikler
  • Eğitici içerik odağı
  • Net değer önermeleri
  • Profesyonel görseller

Düzen önerisi: Özellik bloklarıyla tek sütun

      NEW FEATURE ANNOUNCEMENT


        [FEATURE SCREENSHOT]


  Benefit one
  Benefit two
  Benefit three


         [TRY IT NOW]

Medya ve Yayıncılık Bülteni Tasarımı

Kilit öğeler:

  • Güçlü tipografi hiyerarşisi
  • Görselli makale önizlemeleri
  • Kategori düzeni
  • Yazar künyeleri
  • Okuma süresi göstergeleri

Düzen önerisi: Kart tabanlı içerik ızgarası

        TOP STORY
   [LARGE IMAGE]
   Headline text here
   Brief excerpt...


  [STORY 2]      [STORY 3]
   Headline       Headline


         MORE STORIES

B2B ve Profesyonel Hizmetler Bülteni Tasarımı

Kilit öğeler:

  • Sade, profesyonel tasarım
  • Düşünce liderliği içeriği
  • Vaka çalışmaları ve veriler
  • Etkinlik tanıtımları
  • İndirilebilir kaynaklar

Düzen önerisi: Profesyonel tek sütun

      [COMPANY LOGO]


    THIS MONTH'S INSIGHTS


   Industry Report
     Key findings from our latest
     market analysis...
          [READ MORE]


   Upcoming Webinar
     March 15 at 2pm EST
         [REGISTER]

E-posta Tasarım Araçları ve Kaynakları

Tasarım Platformları

Sürükle bırak düzenleyiciler:

  • Brevo (eski adıyla Sendinblue) - Tajo ile entegre
  • Mailchimp
  • Klaviyo
  • Campaign Monitor

Profesyonel tasarım araçları:

  • Figma (tasarım ve prototipleme)
  • Adobe XD
  • Sketch

Şablon Kaynakları

Ücretsiz şablonlar:

  • Brevo şablon kitaplığı
  • Litmus topluluk şablonları
  • Email on Acid şablonları

Premium şablonlar:

  • ThemeForest e-posta şablonları
  • Envato Elements
  • Creative Market

Test Araçları

  • Litmus - 90’dan fazla istemcide e-posta önizlemesi
  • Email on Acid - İstemciler arası test
  • Mail Tester - Spam puanı kontrolü
  • Accessible Email - Erişilebilirlik doğrulaması

Kaçınılması Gereken Yaygın E-posta Tasarım Hataları

1. Görsel Ağırlıklı E-postalar

Sorun: Bazı e-posta istemcileri görselleri varsayılan olarak engeller. Yalnızca görselden oluşan e-postalar boş görünür.

Çözüm: Her zaman canlı metin ekleyin. Görselleri içeriği desteklemek için kullanın, içeriğin yerine değil.

2. Çok Fazla CTA

Sorun: Birbiriyle yarışan birden fazla CTA karar felcine yol açar.

Çözüm: E-posta başına tek bir ana CTA. İkincil eylemler için metin bağlantıları kullanın.

3. Mobili Göz Ardı Etmek

Sorun: Masaüstünde harika görünen tasarımlar mobilde başarısız olur.

Çözüm: Mobil öncelikli tasarlayın. Göndermeden önce birden fazla cihazda test edin.

4. Zayıf Kontrast

Sorun: Düşük kontrastlı metin okunması zordur ve erişilebilirlik standartlarını karşılamaz.

Çözüm: Kontrast kontrol araçları kullanın. En az 4,5:1 oranını koruyun.

5. Aşırı Kalabalık Düzenler

Sorun: Yoğun tasarımlar okuyucuları bunaltır ve etkileşimi düşürür.

Çözüm: Boşluğu benimseyin. Daha az ama daha kaliteli içerik parçalarına odaklanın.

6. Tutarsız Marka Kimliği

Sorun: Web sitenizle örtüşmeyen e-postalar aboneleri şaşırtır.

Çözüm: E-posta marka kurallarınızı oluşturun. Tutarlılığı korumak için şablonlar kullanın.

7. Yavaş Yüklenen E-postalar

Sorun: Büyük dosyaların yüklenmesi özellikle mobilde çok uzun sürer.

Çözüm: Görselleri sıkıştırın. Toplam e-posta boyutunu 1MB’nin altında tutun.

Brevo ve Tajo ile Bülten Tasarımları Oluşturmak

Brevo bülten üretim katmanını üstlenir: şablonlar, sürükle bırak düzenleyici, kampanya kurulumu, kişi alanları, kişiselleştirme, otomasyon, SMS, WhatsApp ve pakete ile yapılandırmaya göre raporlama.

Tajo ise Brevo kullanan Shopify ekipleri için müşteri veri katmanını destekler. Müşteri, sipariş, ürün, rıza, sadakat ve etkileşim bağlamını senkronize eder, böylece bültenler daha iyi segmentler ve daha güvenli dinamik içerik kullanabilir.

Pratik İş Akışı

  1. Yeniden kullanılabilir bülten şablonunu Brevo’da oluşturun.
  2. Kişiselleştirme ve segmentasyon için gerekli veri alanlarını tanımlayın.
  3. Shopify müşteri, sipariş, ürün ve rıza verisini Brevo iş akışları için erişilebilir tutmak üzere Tajo’yu kullanın.
  4. İlk kez alışveriş yapanlar, VIP müşteriler, kategori alıcıları, inaktif müşteriler ve indirim gönderimlerinden çıkarılacak yeni satın alma yapmış kişiler gibi segmentler oluşturun.
  5. Dinamik blokları yalnızca yedek içerik tanımlıysa ekleyin.
  6. Yayına almadan önce mobil görüntülemeyi, koyu mod davranışını, bağlantıları, kişiselleştirmeyi, abonelikten çıkmayı ve ürün verisini test edin.

Dinamik İçerik Kuralları

Kişiselleştirme bir bülteni yalnızca veri doğruysa ve yedek güvenliyse iyileştirir.

Dinamik içeriği şunlar için kullanın:

  • Son satın almalara veya kategorilere dayalı ürün önerileri.
  • Doğrulanmış program verisine dayalı sadakat hatırlatmaları.
  • Abone verisi güvenilir olduğunda konum veya dil varyantları.
  • İlk satın alma, tekrar satın alma veya inaktif müşteri gibi müşteri yaşam döngüsü blokları.

Dinamik içerikten şu durumlarda kaçının:

  • Kaynak alan eksikse.
  • Ürün stok durumu bayat olabiliyorsa.
  • Yedek içerik bozuk görünecekse.
  • Rıza veya tercih verisi belirsizse.

Sonuç

E-posta bülteni tasarımı hem bir sanat hem bir bilimdir. Bu rehberde ele alınan ilkeler, yani görsel hiyerarşi, mobil optimizasyon, erişilebilirlik, tipografi ve stratejik CTA konumlandırması, etkileşim ve dönüşüm yaratan bültenlerin temelini oluşturur.

Şu kilit noktaları unutmayın:

  1. Önce mobil için tasarlayın - Kendi raporlarınız farklı olabilir, ama küçük ekran kullanılabilirliği güvenli olmalıdır
  2. Netliği önceliklendirin - Her öğe bir amaca hizmet etmelidir
  3. Marka tutarlılığını koruyun - Her gönderimde tanınırlık inşa edin
  4. Sürekli test edin - Küçük iyileştirmeler zamanla birikir
  5. Erişilebilirliğe odaklanın - Çoğunluk için değil, tüm aboneler için tasarlayın

Harika bülten tasarımı her trendi takip etmek değildir. Abonelerinizin zamanına ve dikkatine saygı gösteren net, ilgi çekici ve marka kimliğine uygun iletişimler yaratmaktır.

Brevo’daki Shopify bültenlerinizi geliştirmeye hazır mısınız? Müşteri, sipariş, ürün, rıza, sadakat ve etkileşim verisini Brevo iş akışlarına senkronize etmek ve tasarımlarınızın daha iyi segmentler ile daha güvenli kişiselleştirme kullanabilmesini sağlamak için Tajo ile başlayın.

İlgili Makaleler

Sık Sorulan Sorular

E-posta bültenine nasıl başlarım?
Bir platform seçin, bültenin vaadini tanımlayın, izne dayalı kayıt formları kurun, basit ve mobil öncelikli bir şablon oluşturun, test kampanyaları gönderin ve karmaşık düzenler veya kişiselleştirme eklemeden önce etkileşimi inceleyin.
Bülteni ne sıklıkta göndermeliyim?
Herkes için geçerli en iyi bir sıklık yoktur. Sürdürebileceğiniz bir tempoyla başlayın, örneğin haftalık, iki haftada bir veya aylık, sonra etkileşime, abonelikten çıkışlara, şikayetlere, içerik kalitesine ve abone beklentilerine göre ayarlayın.
Bültenimde neler yer almalı?
Net tek bir ana mesaj, faydalı içerik, göz gezdirmeye uygun bir yapı, canlı metin, alternatif metni olan erişilebilir görseller, net bir CTA, abonelikten çıkma bağlantısı ve gönderen bilgileri yer almalı. Dinamik ürün veya müşteri içeriğini yalnızca veri güvenilirse ekleyin.
E-posta bülteni için ideal genişlik nedir?
E-posta bültenleri için standart ve önerilen genişlik **600 piksel**. Bu genişlik çoğu e-posta istemcisinde ve cihazda iyi çalışır ve içerik için yeterli alan sağlar. Mobilde e-postalar duyarlı olmalı ve ekran genişliğine uyum sağlamalı, çok sütunlu düzenler genellikle tek sütunda üst üste dizilmelidir.
Bültenimde kaç görsel kullanmalıyım?
Sabit bir görsel sayısı yoktur. Mesajı destekleyecek kadar görsel kullanın, ancak görseller engellendiğinde e-posta anlaşılır kalmalıdır. Çoğu bülten, temel metin için canlı metin, anlamlı görseller için açıklayıcı alternatif metin, sıkıştırılmış dosyalar ve düz metin yedeği kullanmalıdır. Yalnızca görselden oluşan bültenlerden kaçının.
E-posta bültenlerinde hangi yazı tipleri en iyi çalışır?
**Arial, Helvetica, Georgia ve Verdana** gibi web güvenli yazı tipleri tüm e-posta istemcilerinde tutarlı görüntülenir. Uygun yedeklerle web yazı tipleri de (Google Fonts, Adobe Fonts) kullanabilirsiniz, ancak Outlook gibi bazı istemcilerin yedek yazı tipini göstereceğini unutmayın. Temiz ve profesyonel tasarımlar için en fazla 1-2 yazı tipi ailesiyle sınırlı kalın.
E-postalarımı nasıl erişilebilir hale getiririm?
Temel erişilebilirlik uygulamaları şunlardır: tüm görsellerde **alternatif metin** kullanmak, metin için **4,5:1 renk kontrastını** korumak, buraya tıklayın gibi genel ifadeler yerine **açıklayıcı bağlantı metni** kullanmak, **en az 14-16px yazı tipi boyutu** sağlamak, bir **düz metin sürümü** sunmak ve içeriği **doğru başlık hiyerarşisiyle** yapılandırmak. Mümkün olduğunda ekran okuyucularla test edin.
Bültenlerde koyu mod tasarımı kullanmalı mıyım?
Evet, koyu modu göz önünde bulundurmalısınız, çünkü büyük e-posta istemcileri renkleri farklı biçimlerde değiştirebilir. Öneriler arasında şunlar var: yalnızca arka plan rengine güvenmeyin, gerektiğinde logo varyantları hazırlayın, saydam PNG dosyalarını dikkatli kullanın, kontrastı her iki modda da kontrol edin ve önemli şablonları kitlenizin gerçekten kullandığı istemcilerde test edin.
E-posta için en iyi görsel formatı hangisi?
**JPEG** fotoğraflar ve çok renkli karmaşık görseller için en iyisidir. **PNG**, saydamlık içeren grafikler, logolar ve metin içeren görseller için idealdir. **GIF** basit animasyonlar için uygundur. **WebP** daha iyi sıkıştırma sunar ancak e-posta istemcisi desteği sınırlıdır, her zaman yedek sağlayın. Ana görsellerde dosya boyutunu 200KB'nin altında tutun ve toplam e-posta boyutunda 1MB'nin altını hedefleyin.
E-posta bültenimin tıklama oranlarını nasıl artırırım?
Tıklama oranlarını artırmak için: ana CTA'yı kolay bulunur hale getirin, açıklayıcı buton metni kullanın, dokunma alanlarını mobil için yeterince büyük tutun, rakip eylemleri azaltın, abone niyetiyle örtüşen bir mesaj yazın ve her seferinde anlamlı tek bir tasarım veya metin değişkenini test edin. Açılmaları ve tıklamaları teşhis sinyali olarak görün, sonra önemli bültenleri mümkün olduğunda dönüşüm veya gelir sonuçlarına bağlayın.
Bülten tasarımımı ne sıklıkta güncellemeliyim?
Tanınırlık için **tutarlı marka kimliğini** koruyun, aynı zamanda performans verisine dayanarak **sürekli küçük optimizasyonlar** yapın. Tasarım trendleriyle güncel kalmak için 12-18 ayda bir **kapsamlı bir tasarım yenilemesi** düşünün. Önemli değişiklikleri tüm listenize açmadan önce mutlaka A/B testinden geçirin. Mevsimsel varyasyonlar ve özel sayı tasarımları, marka tutarlılığını kaybetmeden çeşitlilik sağlayabilir.
Bu makaleyi paylaş:
Tüm makalelere dön

Erken erişim talep edin

Adınızı ve e-posta adresinizi veya telefon numaranızı paylaşın. Tajo erişim ayrıntıları için sizinle iletişime geçeceğiz.

otomatik algılama
Brevo'yu Edinin