Tüm Platformlarda Çalışan E-posta Şablonu Nasıl Yapılır?

E-posta Uyumluluğu Neden Kritik?

E-postanız harika görünebilir... kendi bilgisayarınızda. Ama alıcınız Outlook kullanıyorsa? Veya telefondan dark mode ile açıyorsa?

Gerçek: E-postaların %40'ı Outlook'ta, %30'u Gmail'de, %20'si Apple Mail'de açılıyor. Her birinin farklı render motoru var!

Uyumsuz bir e-posta şablonu:

• Bozuk görünür
• Güven kaybettirir
• Tıklama oranlarını düşürür
• Marka imajına zarar verir

E-posta İstemcileri Arasındaki Farklar

Gmail

• Modern CSS desteği iyi
• Dark mode: Otomatik renk tersine çevirme uygular
• class attribute'ları desteklemez (inline CSS zorunlu)
• Max-width: 600px ideal

Outlook (Windows)

• **Word render motoru** kullanır (evet, Word!)
• Flexbox ve Grid desteklemez
• Float desteklemez
• Table-based layout zorunlu
• Görsellerde sorunlar olabilir

Apple Mail

• En iyi CSS desteği
• Dark mode: Kullanıcı tercihine saygı duyar
• Media queries destekler
• Responsive tasarım kolay

Mobile Gmail / Outlook

• Küçük ekran, büyük zorluk
• Touch hedefleri min 44x44px olmalı
• Font boyutu min 14px
• Tek sütun layout tercih edilmeli

Dark Mode Desteği

Dark mode artık lüks değil, zorunluluk. Kullanıcıların %80'i dark mode tercih ediyor.

E-posta İstemcileri Dark Mode'u Nasıl İşler?

Dark Mode İçin Tasarım İpuçları

1. Transparan Görseller Kullanmayın

PNG'lerdeki transparan alanlar dark mode'da beklenmedik renkler alabilir. Beyaz veya açık renkli arka plan ekleyin.

2. Siyah Yazı Kullanmayın

Saf siyah (#000000) yerine koyu gri (#333333) kullanın. Dark mode inversiyonunda daha iyi görünür.

3. Beyaz Arka Plan Zorunlu Değil

Açık gri (#f5f5f5) kullanmak dark mode'da daha yumuşak geçiş sağlar.

4. Meta Tag Ekleyin

E-posta HTML'inize color-scheme meta tag'i ekleyin.

5. MSO Conditional Comments

Outlook için özel stiller tanımlayın.

Tablo Tabanlı Layout Neden Zorunlu?

Modern web'de flexbox ve grid kullanırız. E-postada mı? Tablolar!

Outlook'un Word render motoru sadece tabloları anlar. Bu yüzden:

• Ana yapı için table kullan
• Kolon düzeni için td kullan
• Boşluklar için padding/margin yerine td ile spacer
• Nested tables ile karmaşık layoutlar

Inline CSS Zorunluluğu

Gmail ve birçok istemci style etiketlerini çıkarır. Bu yüzden:

Yapılmaması gereken:

• style etiketi içinde CSS yazmak
• class attribute ile stil vermek

Yapılması gereken:

• Her HTML elementine style attribute eklemek
• Inline CSS kullanmak

Bu manuel olarak zor. MJML gibi araçlar bu sorunu çözer - yazarsınız, otomatik inline CSS'e çevirir.

Responsive E-posta Tasarımı

Media Queries (Kısıtlı Destek)

Media queries sadece bazı istemcilerde çalışır:

• ✅ Apple Mail
• ✅ iOS Mail
• ❌ Gmail App
• ❌ Outlook

Bu yüzden fluid design tercih edin:

• Yüzdelik genişlikler
• max-width ile sınırlama
• Tek sütun fallback

Mobile-First Yaklaşım

• Min 44x44px dokunma hedefleri
• Min 14px font boyutu (mobilde 16px ideal)
• Yeterli satır aralığı (1.5 line-height)
• Büyük, tıklanabilir butonlar

Test Kontrol Listesi

E-postanızı göndermeden önce şunları test edin:

• [ ] Gmail Web (Light + Dark mode)
• [ ] Gmail Android App
• [ ] Gmail iOS App
• [ ] Apple Mail (macOS)
• [ ] Apple Mail (iOS)
• [ ] Outlook Windows (2019/365)
• [ ] Outlook Web
• [ ] Outlook Mobile
• [ ] Yahoo Mail
• [ ] Samsung Mail

Bunun için Litmus veya Email on Acid gibi test araçları kullanabilirsiniz.

MJML: Uyumluluk Sorunlarının Çözümü

MJML, e-posta şablonu yazmayı kolaylaştıran açık kaynak bir framework:

Avantajları:

• Modern syntax, karmaşık tablo yapısı gizli
• Otomatik inline CSS
• Responsive varsayılan
• Tüm istemcilerde test edilmiş çıktı

Dezavantajları:

• Öğrenme eğrisi
• Build adımı gerektirir

Maily ile Uyumlu Şablonlar

Maily, tüm bu uyumluluk sorunlarını sizin için çözer:

• **Tüm istemcilerde test edilmiş** şablonlar
• **Dark mode uyumlu** tasarımlar
• **MJML export** ile kolay entegrasyon
• **HTML, React, Vue, Angular** formatları

Artık uyumluluk için saatler harcamak yok. Hemen deneyin!