E-posta Tasarımı Rehberi: Yerleşim, Mobil, Erişilebilirlik ve Şablon Kalite Kontrolü (2026)

Yerleşim, tipografi, görseller, duyarlı görüntülenme, koyu mod, erişilebilirlik, test ve yeniden kullanılabilir şablonlar için pratik yönlendirmelerle pazarlama, yaşam döngüsü ve işlemsel e-postalar tasarlayın.

email design
E-posta Tasarımı Rehberi?

İyi e-posta tasarımı süs değildir. Okunabilir, erişilebilir, mobilde güvenli, markayla tutarlı, istemciler genelinde düzgün görüntülenen ve mesajın ticari hedefini destekleyen e-postalar için bir üretim sistemidir. Basit bir yerleşimle, erişilebilir tipografi ve kontrastla, optimize edilmiş görsellerle, tek bir birincil CTA ile ve tekrarlanabilir bir gönderim öncesi kalite kontrol listesiyle başlayın.

Daha fazla bilgi

E-posta tasarımı, abonelerin mesajlarınızı açıp açmayacağını, okuyup okumayacağını ve harekete geçip geçmeyeceğini doğrudan etkiler. Zayıf tasarım silinen e-postalara, abonelikten çıkışlara ve kaybedilen gelire yol açar. Güçlü tasarım ise etkileşimi, dönüşümleri ve marka sadakatini besler.

Bu rehber özgün yapısını korur: yerleşim, tipografi, görseller, mobil, renk, erişilebilirlik, şablonlar, test, Tajo ve Brevo bağlamı, sık sorulan sorular ve ilgili rehberler. Bu güncelleme, desteklenmeyen kıyaslama iddialarını kaldırır ve makaleyi pazarlama, yaşam döngüsü ve işlemsel e-posta ekipleri için pratik bir 2026 e-posta tasarımı rehberine dönüştürür.

E-posta Tasarımı Neden Önemlidir?

En iyi uygulamalara geçmeden önce, e-posta tasarımının neden dikkatinizi hak ettiğini anlayalım.

Tasarım Değişiklikleri Gerçekte Neyi Etkiler?

Tasarım kararlarını, desteklenmeyen kıyaslama artışlarının peşine düşmek için değil, sürtünmeyi azaltmak için kullanın.

Tasarım unsuruNeyi etkilerNasıl değerlendirilir
Mobil yerleşimOkuma akışı, dokunma isabeti, görüntülenmeiOS Mail, Gmail mobil ve Outlook mobil üzerinde önizleyin
Tek sütunlu yapıTaranabilirlik ve duyarlı davranışTıklama derinliğini ve kaydırma davranışını karşılaştırın
Net CTA hiyerarşisiKarar netliğiBirincil CTA tıklamalarını ve sonrasındaki dönüşümü izleyin
Erişilebilir kontrast ve alt metinOkunabilirlik ve yardımcı teknoloji erişimiKontrast kontrolleri ve görseller kapalıyken önizleme yapın
Tutarlı marka kullanımıTanınırlık ve güvenGönderen adını, logoyu, alt bilgiyi ve görsel sistemin tutarlılığını denetleyin

Zayıf Tasarımın Bedeli

Zayıf tasarım ölçülebilir operasyonel ve pazarlama riski yaratır:

  • Bozuk yerleşimler markaya duyulan güveni azaltır.
  • Yalnızca görselden oluşan mesajlar, görseller engellendiğinde okunamaz hale gelir.
  • Düşük kontrast okuyucuları dışarıda bırakır ve erişilebilirlik kontrollerinden geçemez.
  • Küçük düğmeler mobilde dokunmayı zorlaştırır.
  • Eksik alt metin, görseller kapalıyken ve ekran okuyucularda deneyimi zayıflatır.
  • Büyük görseller yüklenmeyi yavaşlatır ve mesajın bozuk görünmesine yol açabilir.
  • Zayıf hiyerarşi birincil eylemi gizler.
  • Abonelikten çıkma, adres veya tercih bağlantılarının eksikliği uyumluluk riski yaratır.

Bölüm 1: E-posta Yerleşimi En İyi Uygulamaları

Etkili e-posta tasarımının temeli yerleşimle başlar. Yerleşiminiz, bilginin nasıl aktığını belirler ve okuyucuları istediğiniz eyleme yönlendirir.

Tek Sütunlu ve Çok Sütunlu Yerleşimler

Tek sütunlu yerleşimler modern e-posta tasarımının altın standardıdır:

ÜST BİLGİ
ANA GÖRSEL
ANA METİN
BİRİNCİL CTA DÜĞMESİ
DESTEKLEYİCİ İÇERİK
ALT BİLGİ

Tek sütunlu yerleşimlerin faydaları:

  • Tüm e-posta istemcilerinde tutarlı görüntülenme
  • Yukarıdan aşağıya doğal okuma akışı
  • Kendiliğinden mobil uyumluluk
  • Daha hızlı yüklenme süreleri
  • Marka tutarlılığını korumanın kolaylığı

Çok sütunlu yerleşimleri ne zaman kullanmalı:

  • Birden fazla ürünün yer aldığı ürün vitrinleri
  • Farklı konular içeren bülten tarzı içerikler
  • Karşılaştırma bölümleri
  • Masaüstü ağırlıklı B2B kitleleri

Ters Piramit Yapısı

Ters piramit, okuyucuları doğal biçimde CTA’nıza yönlendirir:

GENİŞ: DİKKAT
Etkileyici başlık
Ana görsel ve metin
ORTA: İLGİ
Destekleyici bilgiler
Faydalar ve özellikler
DAR: EYLEM
Odaklanmış CTA düğmesi

Bu yapı, dikkati doğal olarak eyleme çağrınıza yönlendirir.

İdeal E-posta Genişliği

Önerilen genişlik: 600-640 piksel

GenişlikKullanım durumuUyumluluk
600 pikselStandart e-postalarEvrensel
640 pikselİçerik yoğun e-postalarÇoğu istemci
480 pikselMobil öncelikli tasarımMobil öncelikli

640 pikselden geniş e-postalar bazı e-posta istemcilerinde yatay kaydırmayı tetikleyebilir ve kötü bir kullanıcı deneyimi yaratabilir.

Boşluk ve Nefes Alanı

Boşluk, boş alan demek değildir. Şunları yapan bir tasarım unsurudur:

  • Bölümleri birbirinden ayırır.
  • Gövde metnini taramayı kolaylaştırır.
  • CTA düğmelerine öne çıkabilecekleri alan verir.
  • Görsel yorgunluğu azaltır.
  • Gözü doğal biçimde yönlendirir.

Boşluk yönergeleri:

  • İçerik kenarlarında en az 20 piksel iç boşluk
  • Ana bölümler arasında 30-40 piksel
  • Paragraflar arasında 15-20 piksel
  • Liste öğeleri arasında 10 piksel

Üst Bilgi Tasarımı En İyi Uygulamaları

Üst bilginiz tonu belirler ve marka tanınırlığını anında kurar.

Temel üst bilgi öğeleri:

  1. Logo - En fazla 200 piksel genişlik, web sitesine bağlantılı
  2. Gezinme (isteğe bağlı) - En fazla 2-4 önemli bağlantı
  3. Ön başlık metni - Konu satırını genişletir, 40-100 karakter

Üst bilgi şablonu:

[LOGO] | Alışveriş | Hesabım
Ön başlık: Konu satırınızı
burada genişletin...

Alt Bilgi Tasarımının Temelleri

Alt bilgiler yasal gereklilikleri karşılar ve ek gezinme sağlar:

Zorunlu alt bilgi öğeleri:

  • Fiziksel posta adresi (CAN-SPAM gerekliliği)
  • Abonelikten çıkma bağlantısı (açıkça görünür)
  • E-posta tercihleri bağlantısı
  • Gizlilik politikası bağlantısı

İsteğe bağlı alt bilgi öğeleri:

  • Sosyal medya simgeleri
  • Uygulama indirme bağlantıları
  • Müşteri hizmetleri iletişimi
  • İkincil gezinme
  • Şirket tescil bilgileri

Bölüm 2: E-posta Tasarımında Tipografi

Tipografi okunabilirliği belirler ve markanızın görsel tonunu kurar. E-posta tipografisi, istemciler arasındaki görüntülenme farkları nedeniyle özel dikkat ister.

E-posta İçin Güvenli Yazı Tipi Yığınları

Her yazı tipi e-posta istemcilerinde tutarlı görüntülenmez. Yedekli yazı tipi yığınları kullanın:

Sans-serif yığını (modern, temiz):

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

Serif yığını (geleneksel, otoriter):

font-family: Georgia, 'Times New Roman', Times, serif;

Yedekli web yazı tipi:

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

E-postada Web Yazı Tipleri

Web yazı tipleri marka tutarlılığını güçlendirir ama yedek planı gerektirir.

E-posta istemcilerinin web yazı tipi desteği:

İstemciWeb yazı tipi desteği
Apple MailTam destek
iOS MailTam destek
Outlook (Mac)Tam destek
GmailDestek yok
Outlook (Windows)Destek yok
Yahoo MailKısmi

Uygulama yaklaşımı:

  1. Web yazı tipini birincil olarak tanımlayın
  2. Benzer bir sistem yazı tipini yedek olarak ekleyin
  3. Başlıca istemcilerde görüntülenmeyi test edin
  4. Zarif bir düşüşü kabul edin

Yazı Tipi Boyutu Yönergeleri

Önerilen yazı tipi boyutları:

ÖğeMasaüstüMobil
Başlıklar28-36 piksel24-28 piksel
Alt başlıklar20-24 piksel18-22 piksel
Gövde metni16-18 piksel16 piksel (en az)
İkincil metin14-16 piksel14 piksel (en az)
Yasal metin ve alt bilgi12-14 piksel12 piksel

Hiçbir metin için 12 pikselin altına inmeyin; bu boyut mobilde okunamaz hale gelir ve erişilebilirlik sorunları yaratır.

Satır Yüksekliği ve Aralık

Doğru satır aralığı okunabilirliği belirgin biçimde artırır:

Satır yüksekliği yönergeleri:

  • Başlıklar: yazı tipi boyutunun 1,1-1,3 katı
  • Gövde metni: yazı tipi boyutunun 1,4-1,6 katı
  • Küçük metin: yazı tipi boyutunun 1,5-1,7 katı

Örnek:

16 piksel gövde metni 1,5 satır yüksekliği = 24 piksel satır aralığı

Metin Hiyerarşisi

Okuyucuları içeriğinizde yönlendirmek için görsel hiyerarşi oluşturun:

BAŞLIK (28 piksel, Kalın)
En önemli mesaj
Alt başlık (20 piksel, Yarı kalın)
Destekleyici bağlam
Gövde metni (16 piksel, Normal)
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Ayrıntılı bilgi buraya gelir.
İkincil metin (14 piksel, Normal, Gri)
Ek ayrıntılar, zaman damgaları vb.

Hizalama En İyi Uygulamaları

  • Başlıklar: Ortalanmış veya sola hizalı
  • Gövde metni: Sola hizalı (asla iki yana yaslı değil)
  • CTA’lar: Ortalanmış
  • Listeler: Sola hizalı

E-postalarda iki yana yaslı metinden kaçının; tutarsız kelime aralıkları okumayı zorlaştırır.

Bölüm 3: E-posta Tasarımında Görseller

Görseller dikkat çeker ve bilgiyi hızla aktarır. Ancak dikkatli yönetim gerektiren görüntülenme sorunları da yaratabilirler.

Görsel Optimizasyonu Kontrol Listesi

Herhangi bir görsel eklemeden önce:

  • 1 MB’ın altına sıkıştırın (ideal olarak 200 KB’ın altına)
  • Açık genişlik ve yükseklik özniteliklerini belirleyin
  • Açıklayıcı alt metin ekleyin
  • Uygun dosya biçimini kullanın
  • Görseller devre dışıyken test edin

Görsel Dosya Biçimleri

BiçimEn uygun kullanımEn büyük dosya boyutu
JPEGFotoğraflar, degradeler200 KB
PNGGrafikler, saydamlık150 KB
GIFAnimasyonlar, basit grafikler500 KB
SVGSimgeler (sınırlı destek)20 KB

Alt Metin En İyi Uygulamaları

Alt metin, görseller yüklenmediğinde görünür ve ekran okuyucular tarafından okunur.

Etkili alt metin örnekleri:

Görsel türüZayıf alt metinİyi alt metin
Ürün fotoğrafı”IMG_001""Mavi pamuklu tişört, önden görünüm”
Ana afiş”Afiş""Yaz indirimi: tüm mayolarda %30 indirim”
CTA düğmesi”Düğme""Şimdi alışveriş yap düğmesi”
Dekoratif”Ayırıcı""" (dekoratif öğeler için boş)

Alt metin yönergeleri:

  • 125 karakterin altında tutun
  • Görünüşü değil, işlevi tanımlayın
  • Görsellerdeki önemli metni dahil edin
  • Yalnızca dekoratif görsellerde boş bırakın

Duyarlı Görseller

Görsellerin cihazlar arasında düzgün ölçeklendiğinden emin olun:

<img src="image.jpg"
width="600"
height="400"
alt="Description"
style="max-width: 100%; height: auto;">

Ana Görsel En İyi Uygulamaları

Ana görsel, e-postanızın tamamının görsel tonunu belirler:

Teknik özellikler:

  • Genişlik: 600 piksel (mobilde küçülür)
  • Yükseklik: 200-400 piksel
  • Dosya boyutu: 200 KB’ın altında
  • Metin yerleşimi: Kritik metni görselin içine gömmekten kaçının

Ana görsel şablonu:

ANA GÖRSEL
(Yaşam tarzı veya ürün çekimi)
Üst metin HTML içinde olsun,
görselin içine gömülmesin

Arka Plan Görselleri

Arka plan görselleri görsel ilgi katar ama desteği sınırlıdır:

Destek matrisi:

İstemciArka plan görseli desteği
Apple MailTam
iOS MailTam
GmailTam
Outlook (Windows)Yok
Yahoo MailTam

Outlook kullanıcıları için her zaman düz renk bir yedek ekleyin.

Ürün Görseli Yönergeleri

Ürün gösteren e-ticaret e-postaları için:

  • Tüm ürünlerde tutarlı boyutlar
  • Beyaz veya nötr arka planlar
  • Mümkün olduğunda birden fazla açı
  • Ürün görselleri için en az 300 piksel genişlik
  • Doğrudan ürün sayfalarına bağlantı

Bölüm 4: Mobil E-posta Tasarımı

Mobil davranış listeye ve sektöre göre değişir, ancak her modern e-posta programının mobilde güvenli tasarıma ihtiyacı vardır. Kendi e-posta istemcisi raporlarınızı inceleyin, ardından mobil kalite kontrolünü zorunlu bir gönderim öncesi adım haline getirin.

Mobil Tasarım İlkeleri

Mobil öncelikli yaklaşım:

  1. Önce en küçük ekran için tasarlayın
  2. İçeriği dikey olarak yığın
  3. Dokunma hedeflerini büyütün
  4. Gezinmeyi basitleştirin
  5. Gerçek cihazlarda test edin

Duyarlı Tasarım Teknikleri

Mobil için medya sorguları:

@media screen and (max-width: 600px) {
.content {
width: 100% !important;
padding: 10px !important;
}
.hide-mobile {
display: none !important;
}
}

Dokunmaya Uygun Tasarım

En küçük dokunma hedefi boyutları:

ÖğeEn küçük boyut
Düğmeler44 x 44 piksel
Bağlantılar44 piksel yükseklik
Bağlantı aralığıAralarında 10 piksel

CTA düğmesi şablonu:

ŞİMDİ ALIŞVERİŞ YAPIN
En az 44 piksel yükseklik

Mobil Tipografi

Mobil yazı tipi ayarlamaları:

  • Gövde metni: en az 16 piksel (iOS’ta yakınlaştırmayı önler)
  • Başlıklar: 24-28 piksel
  • Satır yüksekliği: Mobil için %10 artırın
  • Paragraf aralığı: Başparmakla kaydırma için artırın

Mobil Görsel Değerlendirmeleri

  • Akışkan genişlikler kullanın (max-width: 100%)
  • Mobilde görsel sayısını azaltın
  • Dekoratif görselleri gizlemeyi değerlendirin
  • Mümkün olduğunda daha küçük görsel sürümlerini yükleyin

Mobil Test Kontrol Listesi

  • iOS Mail üzerinde test edin
  • Gmail uygulamasında test edin (iOS ve Android)
  • Outlook uygulamasında test edin
  • Görsellerin mobil veri üzerinden yüklendiğini doğrulayın
  • Yüklenme süresinin 3 saniyenin altında olduğunu kontrol edin
  • Dokunma hedeflerinin yeterince büyük olduğunu doğrulayın
  • Koyu mod görüntülenmesini test edin

Bölüm 5: E-posta Tasarımında Renk

Renk duygu aktarır, dikkati yönlendirir ve marka kimliğini pekiştirir. Stratejik renk kullanımı e-posta performansını iyileştirir.

E-postada Renk Psikolojisi

RenkÇağrışımEn uygun kullanım
MaviGüven, sakinlikB2B, finans, teknoloji
YeşilBüyüme, sağlıkÇevre, iyi yaşam, başarı
KırmızıAciliyet, enerjiİndirimler, CTA’lar, uyarılar
TuruncuSamimiyet, eylemCTA’lar, vurgular
MorPremium, yaratıcıLüks, güzellik
Sarıİyimserlik, dikkatUyarılar, vurgular

Renk Kontrastı Gereklilikleri

WCAG 2.1 AA standartları:

  • Normal metin: en az 4,5:1 kontrast oranı
  • Büyük metin (18 piksel ve üzeri): en az 3:1 kontrast oranı
  • Arayüz bileşenleri: en az 3:1 kontrast oranı

Erişilebilirliği doğrulamak için kontrast denetleyicileri kullanın:

KombinasyonKontrast oranıGeçti / Kaldı
Beyaz üzerine siyah21:1Geçti
Mavi üzerine beyaz (#0066CC)4,8:1Geçti
Beyaz üzerine gri (#777)4,48:1Sınırda
Beyaz üzerine açık gri (#AAA)2,32:1Kaldı

Koyu Mod Değerlendirmeleri

Koyu mod davranışı işletim sistemine, uygulamaya ve e-posta istemcisine göre değişir. Her iki mod için de tasarlayın:

Koyu mod stratejileri:

  1. Saydam görseller: Saydam arka planlı PNG kullanın
  2. Renk tersine çevrilmesi: Renklerin ters çevrildiğinde nasıl göründüğünü test edin
  3. Logo sürümleri: Açık ve koyu logo varyantları sağlayın
  4. Kenarlık tanımı: Karışmayı önlemek için ince kenarlıklar ekleyin

Koyu mod meta etiketi:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

CTA Düğmesi Renkleri

CTA’lar çevresindeki içerikten ayrışmalıdır:

CTA rengi yönlendirmesi:

  • Kontrast gerekliliklerini hâlâ karşılıyorsa birincil marka renginizi kullanın.
  • Marka paletinizde düğme kontrastı düşükse zıt bir vurgu rengi kullanın.
  • Aciliyet çağrıştıran promosyon renklerini abonelikten çıkma ve şikayet davranışına karşı test edin.
  • Yalnızca renge güvenmeyin; CTA metnini net yazın.

Düğme tasarımı teknik özellikleri:

DÜĞME METNİ (BÜYÜK HARF) Arka plan: Marka rengi
Metin: Beyaz veya koyu kontrast
İç boşluk: 15px 30px
Kenar yuvarlaklığı: 4-8px

Bölüm 6: E-posta Tasarımında Erişilebilirlik

Erişilebilir e-posta tasarımı, yeteneği ne olursa olsun herkesin içeriğinizle etkileşime geçebilmesini sağlar. Hem etik hem de pratik bir gerekliliktir; erişilebilir e-postalar tüm kullanıcılar için daha iyi performans gösterir.

Erişilebilirliğin Temelleri

Temel ilkeler (WCAG 2.1):

  1. Algılanabilir - İçerik tüm kullanıcılar tarafından algılanabilir
  2. Kullanılabilir - Arayüzde gezinilebilir ve kullanılabilir
  3. Anlaşılabilir - İçerik ve işleyiş açıktır
  4. Sağlam - İçerik yardımcı teknolojiler genelinde çalışır

Ekran Okuyucu Uyumluluğu

Ekran okuyucular, e-postanızı görme engelli kullanıcılar için yorumlar:

En iyi uygulamalar:

  • Anlamsal HTML kullanın (h1, h2, p, ul)
  • Yerleşim tablolarına role=“presentation” ekleyin
  • HTML etiketine lang özniteliğini ekleyin
  • Anlamlı bağlantı metni sağlayın (“buraya tıklayın” değil)
  • Karmaşık öğeler için aria-label kullanın

Örnek:

<html lang="en">
<table role="presentation">
<tr>
<td>
<h1>Summer Sale</h1>
<p>Shop our biggest discounts of the season.</p>
<a href="/sale" aria-label="Shop summer sale items">
Shop the Sale
</a>
</td>
</tr>
</table>
</html>

Klavyeyle Gezinme

Bazı kullanıcılar e-postalarda fare kullanmadan gezinir:

  • Tüm bağlantıların odaklanabilir olmasını sağlayın
  • Mantıklı bir sekme sırası koruyun
  • Görünür odak durumları sağlayın
  • Klavye tuzaklarından kaçının

Görsel Erişilebilirlik

Görme engeli olan kullanıcılar için:

GereklilikUygulama
Renk kontrastıEn az 4,5:1 oran
Yalnızca renge güvenmeyinMetin veya simge ekleyin
Yeniden boyutlandırılabilir metinGöreli birimler kullanın
Net odak göstergeleriGörünür çerçeveler
Alt metinAçıklayıcı, kısa

Bilişsel Erişilebilirlik

Bilişsel engeli olan kullanıcılar için:

  • Açık ve yalın bir dil kullanın
  • İçeriği kısa bölümlere ayırın
  • Tutarlı gezinme sağlayın
  • Yanıp sönen içerikten kaçının
  • Otomatik oynatma üzerinde kullanıcıya kontrol verin

Erişilebilirlik Test Araçları

Önerilen araçlar:

  • Litmus Accessibility Checker
  • Email on Acid
  • WAVE Web Accessibility Evaluation
  • Ekran okuyucu testleri (NVDA, VoiceOver)

Bölüm 7: E-posta Şablonları ve Örnekleri

Bu en iyi uygulamaları, yaygın e-posta türleri için şablon çerçeveleriyle uygulayın.

Promosyon E-postası Şablonu

Amaç: Anında satış veya dönüşüm sağlamak

LOGO Alışveriş | Hesabım
[ANA GÖRSEL / AFİŞ]
Yaz İndirimi: %30 İndirim
BAŞLIK (etkileyici)
Destekleyici metin (kısa)
ŞİMDİ ALIŞVERİŞ YAPIN
Ürün 1 Ürün 2
[Görsel] [Görsel]
$49 $79
[Satın al] [Satın al]
Alt bilgi: Sosyal medya | Abonelikten çık
Adres | Gizlilik

Bülten Şablonu

Amaç: Değer sunmak ve etkileşimi sürdürmek

LOGO Sayı #42
ÖNE ÇIKAN İÇERİK
[Büyük görsel]
Başlık ve özet
[Devamını oku]
DİĞER İÇERİKLER
[Küçük görsel] 2. içerik başlığı
Kısa özet...
[Küçük görsel] 3. içerik başlığı
Kısa özet...
HIZLI BAĞLANTILAR
Bağlantı 1 | Bağlantı 2 | Bağlantı 3
Alt bilgi

İşlemsel E-posta Şablonu

Amaç: Eylemleri onaylamak ve temel bilgileri iletmek

LOGO
Siparişiniz Onaylandı
Teşekkürler, [Name]!
SİPARİŞ DETAYLARI
Sipariş no: 12345
Tarih: 8 Mart 2026
Toplam: $149,99
ÜRÜNLER
[Görsel] Ürün Adı $99
[Görsel] Ürün Adı $50
Ara toplam: $149
Kargo: ÜCRETSİZ
Toplam: $149
SİPARİŞİ TAKİP EDİN
TESLİMAT ADRESİ
John Smith
123 Main Street
City, State 12345
Yardım mı lazım? Destek ekibiyle iletişime geçin
Alt bilgi

Hoş Geldiniz E-postası Şablonu

Amaç: Markayı tanıtmak ve ilk eylemi teşvik etmek

LOGO
[ANA GÖRSEL / YAŞAM TARZI GÖRSELİ]
[Brand] ailesine hoş geldiniz, [Name]!
Kısa ve sıcak bir tanıtım.
Neden çok iyi bir seçim yaptıkları.
HOŞ GELDİNİZ TEKLİFİNİZ
%15 İNDİRİM
Kod: WELCOME15
ŞİMDİ ALIŞVERİŞ YAPIN
BİZİ FARKLI KILAN NE?
[Simge] Fayda 1
[Simge] Fayda 2
[Simge] Fayda 3
Bizi takip edin: Sosyal medya simgeleri
Alt bilgi

Bölüm 8: E-posta Tasarımı Testleri

İyi tasarlanmış e-postalar bile bazı istemcilerde bozulabilir. Kapsamlı test, sorunları kitleniz görmeden önce yakalar.

Gönderim Öncesi Test Kontrol Listesi

İçerik incelemesi:

  • Yazım ve dilbilgisi kontrol edildi
  • Tüm bağlantılar çalışıyor ve izleniyor
  • Kişiselleştirme alanları doğru çalışıyor
  • Konu satırı ve ön başlık optimize edildi
  • Abonelikten çıkma bağlantısı mevcut ve çalışıyor

Tasarım incelemesi:

  • Görseller doğru görüntüleniyor
  • Tüm görsellerde alt metin var
  • Mobil görüntülenme doğrulandı
  • Koyu mod test edildi
  • Yüklenme süresi 3 saniyenin altında

Teknik inceleme:

  • HTML doğrulamadan geçiyor
  • Gereken yerlerde CSS satır içi
  • Dosya boyutu 100 KB’ın altında
  • Görseller güvenilir bir CDN üzerinde barındırılıyor

E-posta İstemcisi Test Matrisi

Kitleniz için en popüler istemcilerde test edin:

ÖncelikE-posta istemcileri
KritikGmail (web), Apple Mail, iOS Mail
YüksekOutlook (Windows), Gmail (mobil)
OrtaYahoo Mail, Outlook (Mac)
DüşükKitlenize göre diğerleri

Test ve Tasarım Araçları

Araçları iş akışınıza göre seçin:

Araç türüÖrneklerNe zaman kullanılır
Kampanya düzenleyiciBrevoPazarlamacıların kampanyaları gönderim platformu üzerinden tasarlayıp göndermesi gerektiğinde
Tasarım sistemi ve önizlemeLitmusModüllere, birlikte çalışmaya, önizlemelere ve istemciler arası kalite kontrole ihtiyacınız olduğunda
Görüntülenme ve gönderim öncesi kalite kontrolEmail on Acidİstemci önizlemelerine, HTML kontrollerine ve lansman öncesi e-posta kalite kontrolüne ihtiyacınız olduğunda
Şablon oluşturucuStripoYeniden kullanılabilir bir sürükle bırak oluşturucuya ve HTML dışa aktarma iş akışına ihtiyacınız olduğunda
CSS desteği referansıCan I emailBir HTML veya CSS özelliğinin e-posta istemcilerinde güvenli olup olmadığını doğrulamanız gerektiğinde

Bir araç seçmeden önce güncel fiyatlandırmayı ve plan sınırlarını kontrol edin. Bazı ürünler oluşturmaya, bazıları kalite kontrole, bazıları da her ikisine odaklanır.

Tasarım Öğelerinde A/B Testi

Performansı iyileştirmek için tasarım varyasyonlarını test edin:

ÖğeTest varyasyonları
Ana görselFotoğraf ve illüstrasyon
CTA rengiMarka rengi ve zıt renk
CTA metni”Şimdi alışveriş yapın” ve “Hemen başlayın”
YerleşimTek sütun ve çok sütun
UzunlukKısa ve ayrıntılı
GörsellerGörselli ve görselsiz

Tajo ve Brevo ile E-posta Tasarımı

Tajo ve Brevo, e-posta tasarımı iş akışının farklı parçalarını çözer.

Brevo; sürükle bırak düzenleyici, şablonlar, yeniden kullanılabilir içerik blokları, stil kontrolleri ve kampanya gönderimi dahil olmak üzere kampanya ve otomasyon ortamını sağlar. Tajo ise Shopify ve Brevo ekiplerinin, bu şablonların arkasındaki müşteri, sipariş, izin, sepet ve ürün verisini doğru tutmasına yardımcı olur.

Brevo Neyi Üstlenir?

  • Kampanya ve otomasyon e-postalarının oluşturulması.
  • Sürükle bırak içerik blokları.
  • Şablon ve kampanya düzenleme.
  • Marka ve stil kontrolleri.
  • Kişiselleştirme alanları.
  • Kampanya gönderimi ve raporlaması.

Tajo Neyi Ekler?

  • Shopify müşteri verisi.
  • İzin ve iletişim alanları.
  • Sipariş ve ürün bağlamı.
  • Sepet ve yaşam döngüsü olayları.
  • Müşteri segmentasyonu sinyalleri.
  • Kişiselleştirilmiş e-ticaret şablonları için veri senkronizasyonu.

Pratik İş Akışı

  1. Görsel şablonu Brevo’da oluşturun.
  2. Yerleşimi duyarlı görüntülenmeye izin verecek kadar basit tutun.
  3. Kişiselleştirmede kullanılan müşteri ve e-ticaret verisini senkronize etmek için Tajo’yu kullanın.
  4. Dinamik ürün ve müşteri alanları için yedek değerler ekleyin.
  5. Mesajı gerçek örnek kişilerle önizleyin.
  6. Kampanya yüksek değerliyse bir kalite kontrol aracıyla başlıca e-posta istemcilerinde görüntülenmeyi test edin.
  7. Lansmandan sonra dönüşümü, abonelikten çıkışları, şikayetleri ve şablona özgü sorunları izleyin.

Tajo, e-posta tasarımı kalite kontrolü ihtiyacını ortadan kaldırmaz. Kişiselleştirilmiş şablonların içindeki veriyi daha güvenilir hale getirir.

Sonraki Adımlar

E-posta tasarımı hem yaratıcı bir disiplin hem de bir üretim sistemidir. Yerleşim, tipografi, görseller, erişilebilirlik, görüntülenme ve kalite kontrol süreci; abonelerin mesajı anlayıp anlayamayacağını ve harekete geçip geçemeyeceğini birlikte belirler.

Şu temel ilkeleri unutmayın:

  1. Önce mobil için tasarlayın - Her önemli kampanyanın mobil kalite kontrolüne ihtiyacı vardır
  2. Basit tutun - Tek sütun, net hiyerarşi, tek birincil CTA
  3. Erişilebilirliği önceliklendirin - İyi erişilebilirlik herkes için sonuçları iyileştirir
  4. Kapsamlı test edin - Göndermeden önce istemciler ve cihazlar genelinde önizleyin
  5. Veriye göre yineleyin - Tasarım öğelerini sürekli A/B testine tabi tutun

Harika e-posta tasarımı her trendi takip etmekle ilgili değildir. Gerçek gelen kutusu koşullarında ayakta kalan net iletişimle ilgilidir.

Shopify ve Brevo ekipleri için, kişiselleştirilmiş e-posta şablonları ve otomasyon iş akışları için müşteri, ürün, sipariş, sepet ve izin verisini hazır tutmak üzere Tajo ile başlayın.

İlgili Yazılar

Sık Sorulan Sorular

E-posta tasarımı nedir?
E-posta tasarımı; bir e-postanın yapısının, hiyerarşisinin, tipografisinin, görsellerinin, düğmelerinin, erişilebilirliğinin, duyarlı davranışının, koyu mod işleyişinin ve e-posta istemcileri genelinde görüntülenme kalite kontrolünün planlanması ve üretilmesidir.
E-posta tasarımına nasıl başlarım?
Tek sütunlu bir yerleşimle, net bir hiyerarşiyle, okunabilir tipografiyle, tek bir birincil CTA ile, optimize edilmiş görsellerle, erişilebilir kontrastla, düz metin alternatifiyle, mobil önizlemeyle, koyu mod kontrolleriyle ve gönderim öncesi görüntülenme testleriyle başlayın.
E-posta tasarımında hangi araçlar yardımcı olur?
Brevo, Stripo, Litmus, Email on Acid ve benzeri araçlar oluşturma, önizleme, test etme, birlikte çalışma ve görüntülenme kalite kontrolü konusunda yardımcı olabilir. Doğru seçim; bir kampanya düzenleyicisine, yeniden kullanılabilir modüllere, kod önizlemelerine, istemci testlerine, erişilebilirlik kontrollerine mi yoksa şablonların içinde e-ticaret verisine mi ihtiyacınız olduğuna bağlıdır.
Her e-posta tasarımı kalite kontrolü neleri içermelidir?
Kalite kontrolü; bağlantıları, kişiselleştirmeyi, alt metinleri, mobil görüntülenmeyi, koyu modu, görsellerin yüklenmesini, kontrastı, abonelikten çıkma ve adres gerekliliklerini, düz metin alternatifini, dosya boyutunu, başlıca e-posta istemcilerini ve dinamik içeriğin güvenli yedek değerleri olup olmadığını kontrol etmelidir.
Tasarım için ideal e-posta genişliği nedir?
En uygun e-posta genişliği 600-640 pikseldir. Bu değer tüm başlıca e-posta istemcileriyle uyumluluğu güvence altına alır ve yatay kaydırmayı önler. Mobil öncelikli tasarımlarda bazı tasarımcılar 480 piksel kullanır. Görüntülenme sorunlarını önlemek için 640 pikseli aşmaktan kaçının.
E-postalarımı mobil uyumlu nasıl yaparım?
Tek sütunlu bir yerleşim kullanın, en küçük yazı tipi boyutunu 16 piksel olarak belirleyin, düğmeleri en az 44x44 piksel yapın, max-width: 100% ile akışkan görseller kullanın ve gerçek mobil cihazlarda test edin. Küçük ekranlarda yerleşimi uyarlamak için medya sorguları içeren duyarlı CSS uygulayın.
E-posta tasarımında web yazı tipleri kullanmalı mıyım?
Web yazı tiplerini kullanabilirsiniz, ancak Gmail ve Windows için Outlook bunları desteklemediğinden yedek sistem yazı tipleri ekleyin. Yazı tipi yığınınızı önce web yazı tipiyle, ardından benzer sistem yazı tipleriyle tanımlayın. Tasarımınızın yedek yazı tipleriyle de kabul edilebilir göründüğünden emin olmak için test edin.
Koyu mod için e-postaları nasıl tasarlarım?
Mümkün olan yerlerde saydam PNG görseller kullanın, renklerinizin ters çevrildiğinde nasıl göründüğünü test edin, logonun açık ve koyu sürümlerini sağlayın ve öğelerin koyu arka planlara karışmasını önlemek için ince kenarlıklar ekleyin. Koyu mod desteğini bildirmek için color-scheme meta etiketini ekleyin.
E-postalar için hangi görsel dosya biçimini kullanmalıyım?
Fotoğraflar ve degrade içeren görseller için JPEG, saydamlık veya metin içeren grafikler için PNG, basit animasyonlar için GIF kullanın. En iyi yüklenme için tüm görselleri 200 KB'ın altında tutun. E-posta istemcisi desteği sınırlı olduğu için SVG kullanmaktan kaçının.
Bir e-postada kaç CTA olmalıdır?
Dönüşümleri en üst düzeye çıkarmak için e-posta başına tek bir birincil CTA'ya odaklanın. İkincil CTA'lar ekleyebilirsiniz, ancak birincil eylemin boyut, renk ve konumlandırma yoluyla görsel olarak öne çıktığından emin olun. Eşit ağırlıkta birden fazla CTA karar felcine yol açar.
Erişilebilirlik için en düşük metin kontrast oranı nedir?
WCAG 2.1, normal metin için en az 4,5:1 ve büyük metin (18 piksel ve üzeri) için en az 3:1 kontrast oranı gerektirir. Renk kombinasyonlarınızın bu standartları karşıladığını doğrulamak için çevrimiçi kontrast denetleyicileri kullanın.
E-postaları farklı istemcilerde nasıl test ederim?
Onlarca e-posta istemcisinde önizleme üreten Litmus veya Email on Acid gibi e-posta test platformlarını kullanın. En azından Gmail (web ve mobil), Apple Mail, iOS Mail ve Outlook (Windows) üzerinde test edin. Kitlenizin en çok kullandığı istemcilere göre bir test matrisi oluşturun.
E-postamın düz metin sürümünü eklemeli miyim?
Evet, her zaman düz metin alternatifi ekleyin. Bazı kullanıcılar düz metni tercih eder ve bu, teslim edilebilirliğe de yardımcı olur. E-posta servis sağlayıcınız bunu genellikle otomatik olarak üretir, ancak okunabilirliğinden emin olmak için gözden geçirin.
Pazarlama e-postaları ne kadar uzun olmalıdır?
Uzunluğu amaca göre belirleyin: promosyon e-postaları güçlü görsellerle 50-125 kelime olmalı, bültenler taranabilir bölümlerle 200-500 kelime olabilir, eğitici içerik ise daha uzun olabilir ama iyi yapılandırılmalıdır. Uzunluk ne olursa olsun taranabilirliğe odaklanın ve kitleniz için neyin işe yaradığını bulmak üzere test edin.

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