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.
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 unsuru | Neyi etkiler | Nasıl değerlendirilir |
|---|---|---|
| Mobil yerleşim | Okuma akışı, dokunma isabeti, görüntülenme | iOS 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şisi | Karar netliği | Birincil CTA tıklamalarını ve sonrasındaki dönüşümü izleyin |
| Erişilebilir kontrast ve alt metin | Okunabilirlik ve yardımcı teknoloji erişimi | Kontrast kontrolleri ve görseller kapalıyken önizleme yapın |
| Tutarlı marka kullanımı | Tanınırlık ve güven | Gö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üğmesiBu 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şlik | Kullanım durumu | Uyumluluk |
|---|---|---|
| 600 piksel | Standart e-postalar | Evrensel |
| 640 piksel | İçerik yoğun e-postalar | Çoğu istemci |
| 480 piksel | Mobil öncelikli tasarım | Mobil ö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:
- Logo - En fazla 200 piksel genişlik, web sitesine bağlantılı
- Gezinme (isteğe bağlı) - En fazla 2-4 önemli bağlantı
- Ö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:
| İstemci | Web yazı tipi desteği |
|---|---|
| Apple Mail | Tam destek |
| iOS Mail | Tam destek |
| Outlook (Mac) | Tam destek |
| Gmail | Destek yok |
| Outlook (Windows) | Destek yok |
| Yahoo Mail | Kısmi |
Uygulama yaklaşımı:
- Web yazı tipini birincil olarak tanımlayın
- Benzer bir sistem yazı tipini yedek olarak ekleyin
- Başlıca istemcilerde görüntülenmeyi test edin
- Zarif bir düşüşü kabul edin
Yazı Tipi Boyutu Yönergeleri
Önerilen yazı tipi boyutları:
| Öğe | Masaüstü | Mobil |
|---|---|---|
| Başlıklar | 28-36 piksel | 24-28 piksel |
| Alt başlıklar | 20-24 piksel | 18-22 piksel |
| Gövde metni | 16-18 piksel | 16 piksel (en az) |
| İkincil metin | 14-16 piksel | 14 piksel (en az) |
| Yasal metin ve alt bilgi | 12-14 piksel | 12 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 adipiscingelit. 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çim | En uygun kullanım | En büyük dosya boyutu |
|---|---|---|
| JPEG | Fotoğraflar, degradeler | 200 KB |
| PNG | Grafikler, saydamlık | 150 KB |
| GIF | Animasyonlar, basit grafikler | 500 KB |
| SVG | Simgeler (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ülmesinArka Plan Görselleri
Arka plan görselleri görsel ilgi katar ama desteği sınırlıdır:
Destek matrisi:
| İstemci | Arka plan görseli desteği |
|---|---|
| Apple Mail | Tam |
| iOS Mail | Tam |
| Gmail | Tam |
| Outlook (Windows) | Yok |
| Yahoo Mail | Tam |
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:
- Önce en küçük ekran için tasarlayın
- İçeriği dikey olarak yığın
- Dokunma hedeflerini büyütün
- Gezinmeyi basitleştirin
- 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ı:
| Öğe | En küçük boyut |
|---|---|
| Düğmeler | 44 x 44 piksel |
| Bağlantılar | 44 piksel yükseklik |
| Bağlantı aralığı | Aralarında 10 piksel |
CTA düğmesi şablonu:
ŞİMDİ ALIŞVERİŞ YAPIN
En az 44 piksel yükseklikMobil 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ışım | En uygun kullanım |
|---|---|---|
| Mavi | Güven, sakinlik | B2B, finans, teknoloji |
| Yeşil | Büyüme, sağlık | Çevre, iyi yaşam, başarı |
| Kırmızı | Aciliyet, enerji | İndirimler, CTA’lar, uyarılar |
| Turuncu | Samimiyet, eylem | CTA’lar, vurgular |
| Mor | Premium, yaratıcı | Lüks, güzellik |
| Sarı | İyimserlik, dikkat | Uyarı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:
| Kombinasyon | Kontrast oranı | Geçti / Kaldı |
|---|---|---|
| Beyaz üzerine siyah | 21:1 | Geçti |
| Mavi üzerine beyaz (#0066CC) | 4,8:1 | Geçti |
| Beyaz üzerine gri (#777) | 4,48:1 | Sınırda |
| Beyaz üzerine açık gri (#AAA) | 2,32:1 | Kaldı |
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:
- Saydam görseller: Saydam arka planlı PNG kullanın
- Renk tersine çevrilmesi: Renklerin ters çevrildiğinde nasıl göründüğünü test edin
- Logo sürümleri: Açık ve koyu logo varyantları sağlayın
- 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-8pxBö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):
- Algılanabilir - İçerik tüm kullanıcılar tarafından algılanabilir
- Kullanılabilir - Arayüzde gezinilebilir ve kullanılabilir
- Anlaşılabilir - İçerik ve işleyiş açıktır
- 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:
| Gereklilik | Uygulama |
|---|---|
| Renk kontrastı | En az 4,5:1 oran |
| Yalnızca renge güvenmeyin | Metin veya simge ekleyin |
| Yeniden boyutlandırılabilir metin | Göreli birimler kullanın |
| Net odak göstergeleri | Görünür çerçeveler |
| Alt metin | Açı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 | GizlilikBü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 bilgiHoş 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 bilgiBö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:
| Öncelik | E-posta istemcileri |
|---|---|
| Kritik | Gmail (web), Apple Mail, iOS Mail |
| Yüksek | Outlook (Windows), Gmail (mobil) |
| Orta | Yahoo Mail, Outlook (Mac) |
| Düşük | Kitlenize göre diğerleri |
Test ve Tasarım Araçları
Araçları iş akışınıza göre seçin:
| Araç türü | Örnekler | Ne zaman kullanılır |
|---|---|---|
| Kampanya düzenleyici | Brevo | Pazarlamacıların kampanyaları gönderim platformu üzerinden tasarlayıp göndermesi gerektiğinde |
| Tasarım sistemi ve önizleme | Litmus | Modüllere, birlikte çalışmaya, önizlemelere ve istemciler arası kalite kontrole ihtiyacınız olduğunda |
| Görüntülenme ve gönderim öncesi kalite kontrol | Email on Acid | İstemci önizlemelerine, HTML kontrollerine ve lansman öncesi e-posta kalite kontrolüne ihtiyacınız olduğunda |
| Şablon oluşturucu | Stripo | Yeniden 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 email | Bir 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:
| Öğe | Test varyasyonları |
|---|---|
| Ana görsel | Fotoğraf ve illüstrasyon |
| CTA rengi | Marka rengi ve zıt renk |
| CTA metni | ”Şimdi alışveriş yapın” ve “Hemen başlayın” |
| Yerleşim | Tek sütun ve çok sütun |
| Uzunluk | Kısa ve ayrıntılı |
| Görseller | Gö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ışı
- Görsel şablonu Brevo’da oluşturun.
- Yerleşimi duyarlı görüntülenmeye izin verecek kadar basit tutun.
- Kişiselleştirmede kullanılan müşteri ve e-ticaret verisini senkronize etmek için Tajo’yu kullanın.
- Dinamik ürün ve müşteri alanları için yedek değerler ekleyin.
- Mesajı gerçek örnek kişilerle önizleyin.
- Kampanya yüksek değerliyse bir kalite kontrol aracıyla başlıca e-posta istemcilerinde görüntülenmeyi test edin.
- 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:
- Önce mobil için tasarlayın - Her önemli kampanyanın mobil kalite kontrolüne ihtiyacı vardır
- Basit tutun - Tek sütun, net hiyerarşi, tek birincil CTA
- Erişilebilirliği önceliklendirin - İyi erişilebilirlik herkes için sonuçları iyileştirir
- Kapsamlı test edin - Göndermeden önce istemciler ve cihazlar genelinde önizleyin
- 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
- E-posta Pazarlama Kampanyaları: Planlama, Yürütme ve Optimizasyon için Kapsamlı Rehber
- E-posta Pazarlama Stratejisi: Planlama ve Uygulama Rehberi
- Küçük İşletmeler için E-posta Pazarlaması: Kapsamlı Rehber (2026)
- E-posta Pazarlaması ROI: Getiriyi Hesaplama, İzleme ve İyileştirme
- Yeni Başlayanlar için E-posta Pazarlaması: Kapsamlı Başlangıç Rehberi (2026)