--- title: "E-posta Bülteni Tasarım Kılavuzu: Düzenler, Şablonlar, Mobil Kontrol ve Örnekler (2026)" description: "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." url: https://tajo.io/tr/blog/email-newsletter-design-guide/ markdown: https://tajo.io/tr/blog/email-newsletter-design-guide.md lang: tr-TR author: "Set Noa" author_url: https://tajo.io/tr/set-noa/ published: 2025-03-08 updated: 2026-08-25 alternates: {en-US: /blog/email-newsletter-design-guide.md, bg-BG: /bg/blog/email-newsletter-design-guide.md, cs-CZ: /cz/blog/email-newsletter-design-guide.md, de-DE: /de/blog/email-newsletter-design-guide.md, da-DK: /dk/blog/email-newsletter-design-guide.md, es-ES: /es/blog/email-newsletter-design-guide.md, fr-FR: /fr/blog/email-newsletter-design-guide.md, el-GR: /gr/blog/email-newsletter-design-guide.md, hi-IN: /hi/blog/email-newsletter-design-guide.md, id-ID: /in/blog/email-newsletter-design-guide.md, hr-HR: /hr/blog/email-newsletter-design-guide.md, it-IT: /it/blog/email-newsletter-design-guide.md, ja-JP: /jp/blog/email-newsletter-design-guide.md, ko-KR: /kr/blog/email-newsletter-design-guide.md, ar-SA: /ar/blog/email-newsletter-design-guide.md, nl-NL: /nl/blog/email-newsletter-design-guide.md, no-NO: /no/blog/email-newsletter-design-guide.md, pl-PL: /pl/blog/email-newsletter-design-guide.md, pt-BR: /pt/blog/email-newsletter-design-guide.md, ro-RO: /ro/blog/email-newsletter-design-guide.md, ru-RU: /ru/blog/email-newsletter-design-guide.md, sv-SE: /se/blog/email-newsletter-design-guide.md, zh-CN: /zh-cn/blog/email-newsletter-design-guide.md, sl-SI: /sl/blog/email-newsletter-design-guide.md, sr-Latn-RS: /sr/blog/email-newsletter-design-guide.md, th-TH: /th/blog/email-newsletter-design-guide.md, ur-PK: /ur/blog/email-newsletter-design-guide.md, vi-VN: /vi/blog/email-newsletter-design-guide.md, sk-SK: /sk/blog/email-newsletter-design-guide.md} --- [E-posta](https://tajo.io/tr/blog/?category=email) # 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. email newsletter Okunabilir bir e-posta bülteni nasıl tasarlanır? 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](https://tajo.io/tr/blog/email-newsletter-design-guide/#e-posta-b%C3%BClteni-tasar%C4%B1m%C4%B1-neden-%C3%B6nemli) 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 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ştirir | Neyi kontrol etmeli | | --- | --- | --- | | Net hiyerarşi | Daha hızlı tarama ve kavrama | Okuyucu ana mesajı tek bakışta anlayabiliyor mu? | | Mobil düzen | Küçük ekranlarda kullanılabilirlik | Düzen yatay kaydırma olmadan düzgün diziliyor mu? | | Görsel stratejisi | Bağlam ve görsel ilgi | Görseller engellendiğinde e-posta anlamlı kalıyor mu? | | Erişilebilir kontrast | Daha fazla abone için okunabilirlik | Metin ve butonlar kontrast gereksinimlerini karşılıyor mu? | | CTA netliği | Eyleme duyulan güven | Tek bir ana eylem ve açıklayıcı buton metni var mı? | | Marka tutarlılığı | Tanınırlık ve güven | Tasarım siteyle, ürünle ve diğer kanallarla örtüşüyor mu? | | Görüntüleme kontrolü | İstemciler arası güvenilirlik | Mesaj 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** ``` The Letter Not uygulamanızda sakladığınız alıntı, içerik takviminizden daha çok çalışıyor. ͏ ͏ ͏ ͏ ͏ ``` ## 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 | Öğe | Yönerge | | --- | --- | | Ana renk | CTA’lar ve vurgular için kullanın | | İkincil renk | Bölümler ve ayırıcılar için kullanın | | Logo | Üstbilgiye ekleyin, altbilgide isteğe bağlı | | Yazı tipleri | En fazla 2 aile (başlık ve gövde) | | Görsel stili | Tutarlı 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 | Öğe | Masaüstü Boyutu | Mobil Boyutu | | --- | --- | --- | | Başlıklar | 28-36px | 22-28px | | Alt başlıklar | 20-24px | 18-22px | | Gövde metni | 16-18px | En az 16px | | CTA’lar | 16-18px | 16-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: ```css /* 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: ```css 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 | | --- | --- | | Klasik | Georgia (başlıklar) + Arial (gövde) | | Modern | Montserrat (başlıklar) + Open Sans (gövde) | | Profesyonel | Roboto Slab (başlıklar) + Roboto (gövde) | | Zarif | Playfair 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 Durum | Format | | --- | --- | --- | | Hero / banner | Ana görsel odak | JPEG veya WebP | | Ürün fotoğrafları | E-ticaret vitrinleri | JPEG | | Simgeler / grafikler | CTA’lar, madde işaretleri | PNG veya SVG | | Logolar | Marka tanımlaması | PNG (saydam) | | Animasyonlu | Dikkat çekme | GIF | ### 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:** ```html Woman wearing our new Spring Collection blue linen dress, standing in a garden ``` **Zayıf alternatif metin:** ```html image 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 ```html 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ışımlar | En Uygun Olduğu Alan | | --- | --- | --- | | Mavi | Güven, istikrar, sakinlik | Finans, teknoloji, sağlık | | Kırmızı | Aciliyet, heyecan, tutku | İndirimler, CTA’lar, aciliyet | | Yeşil | Büyüme, sağlık, doğa | Sürdürülebilirlik, sağlık, başarı | | Turuncu | Enerji, yaratıcılık, sıcaklık | CTA’lar, genç odaklı markalar | | Mor | Lüks, yaratıcılık, bilgelik | Premium markalar, güzellik | | Sarı | İyimserlik, netlik, sıcaklık | Vurgular, dikkat çekme | | Siyah | Zarafet, lüks | Premium, moda | | Beyaz | Temiz, sade, saf | Boş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ör | Etkili CTA | | --- | --- | | E-ticaret | İndirimdeki ürünleri görün | | SaaS | Ücretsiz denemeyi başlatın | | İçerik | Rehberin tamamını okuyun | | Etkinlikler | Yerimi ayırın | | Bülten | Haftalı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:** - 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. ## 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? ## Tajo nerede devreye girer Tajo, ajantik entegrasyon oluşturucudur. Sağlayıcılarınızı koruyun. Gerisini agent’lar bağlar, her senkronizasyonu siz onaylarsınız. Tajo erken erişim aşamasındadır. [Erken erişim isteyin](https://tajo.io/tr/#early-access) ## 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. ## İlgili makaleler ### [İçerik Üreticileri ve İşletmeler için En İyi 10 Bülten Platformu (2026)](https://tajo.io/tr/blog/best-newsletter-platforms/) 22 Mar 2026 · 12 dk okuma 7 bölüm ### [2026'nın En İyi 12 E-posta Bülten Yazılımı](https://tajo.io/tr/blog/email-newsletter-software/) 8 Mar 2026 · 11 dk okuma 10 bölüm ### [2026'nın En İyi 12 Bülten Oluşturucusu: Kapsamlı Karşılaştırma Rehberi](https://tajo.io/tr/blog/newsletter-builder-guide/) 8 Mar 2026 · 11 dk okuma 10 bölüm