Genel Bakış
HTML Editor, kendi HTML’nizi kullanarak tamamen özelleştirilmiş, markalı email’ler göndermenizi sağlar. HTML Editor’ü şu durumlarda kullanmalısınız:- Düzen, aralık ve stil üzerinde tam kontrole ihtiyacınız var
- Zaten üretime hazır HTML email şablonlarınız var
- Email istemci sınırlamaları içinde çalışma konusunda rahat hissediyorsunuz
HTML email’ler web sayfalarıyla aynı değildir. Birçok HTML ve CSS özelliği email istemcileri arasında desteklenmez veya tutarsız şekilde görüntülenir.
Ön koşullar
HTML Editor’ü kullanmadan önce şunlardan emin olun:- Duyarlı HTML email’ler oluşturma deneyiminiz var
- Tüm resimleri herkese açık erişilebilir URL’lerde barındırıyorsunuz (siteniz, CDN, S3, vb.)
Beklenen sonuç
Kurulumdan sonra, email’iniz:- Ana istemcilerde (Gmail, Outlook, Apple Mail) tutarlı şekilde görüntülenir
- Link tıklamalarını doğru şekilde takip eder
- Çalışan bir abonelik iptal mekanizması içerir
- Spam ve teslim edilebilirlik kontrollerini geçer
Kendi şablonlarınızı içe aktarın
Zaten HTML email şablonlarınız varsa, bunları OneSignal’a aşağıdaki yollardan herhangi biriyle ekleyebilirsiniz:- Email Template forwarding kullanın
- Create Template API kullanarak programatik olarak şablonlar oluşturun
- HTML’nizi HTML Editor’e kopyalayın ve yapıştırın
Sıfırdan HTML yazmak yerine kanıtlanmış bir şablonla başlamanızı öneririz.
HTML Editor’ü Kullanın
Email mesajı oluştururken, editör türü olarak HTML Editor’ü seçin.- HTML’nizi editöre yapıştırın veya yazın.
- İstemciler ve cihazlar arasındaki görüntülemeyi önizlemek için Test Email Gönder’i kullanın.
- Zamanlama veya göndermeden önce düzen sorunlarını düzeltin.
Link’ler ve takip
HTML email’ler için link takibi varsayılan olarak etkindir.- Çoklu link takibi desteklenir
- Tıklamalar mesaj raporlarında görünür
Abonelik iptal link’leri
Tüm pazarlama email’leri bir abonelik iptal link’i içermelidir. Geçerli abonelik iptal seçeneği olmayan email’lerin şu olasılığı daha yüksektir:- Spam olarak işaretlenme
- Gönderenin itibarına zarar verme
- Gelen kutusu sağlayıcıları tarafından engelleme
- OneSignal'ın varsayılan abonelik iptal link'i
- Özel abonelik iptal sayfası kullan (isteğe bağlı)
HTML’nizin herhangi bir yerine (genellikle alt bilgide) aşağıdaki yer tutucuyu ekleyin:Tıklandığında, bu link OneSignal’da kullanıcının email Aboneliği’ni iptal eder.
HTML
HTML email en iyi uygulamaları
Her zaman inline CSS kullanın
Çoğu email istemcisi<style> bloklarını ve harici stil sayfalarını kaldırır.
Bu aracı deneyin: Responsive Email CSS Inliner
Dark mode stilleme
Birçok email istemcisi, kullanıcının dark mode etkin olduğunda otomatik renk tersine çevirme uygular. Bu davranış, düğmelerin siyah arka plan ve siyah metin ile görünmesi gibi öngörülemeyen sonuçlara neden olabilir. Tutarlı görüntüleme sağlamak için, email’inizin hem açık hem de koyu modda nasıl görünmesi gerektiğini açıkça tanımlamanızı öneririz. En iyi uygulamalar:- Temel stilleri inline tanımlayın. Varsayılanlara veya şeffaflığa güvenmek yerine her zaman arka plan ve metin renklerini doğrudan öğelerde ayarlayın.
- Dark mode için media query kullanın. Apple Mail ve iOS’ta Outlook gibi istemciler, dark mode için stilleri geçersiz kılabileceğiniz
@media (prefers-color-scheme: dark)’ı destekler. !important’ı dikkatli kullanın. Dark mode geçersiz kılmalarına!importanteklemek, gelen kutularının özel stillerinizin üzerine tersine çevirme kuralları yığmasını önlemeye yardımcı olur.- Tema desteğini işaret edin. Otomatik tersine çevirmeyi azaltmak için HTML head’inizde aşağıdaki meta etiketlerini ekleyin:
İstemciler arasında test edin. Gmail (iOS, Android, web), Outlook ve Apple Mail’in tümü farklı davranır. Test, sorunları erken yakalamanıza yardımcı olur.
Email için önerilen resim boyutları
En boy oranları:- Başlık/banner resimleri:
3:1veya4:1(ör:600×200veya600×150) - Hero resimleri:
16:9veya2:1(ör:600×338veya600×300) - Kare resimler:
1:1(ör:300×300) — ürün gridleri için iyi - Küçük resimler:
1:1veya4:3 - Maksimum genişlik:
600–700pxstandarttır (çoğu email istemcisi) - Retina ekranlar için
2xtasarlayın (ör:1200pxgenişlik,600px’de gösterilen)
- Bireysel resimleri
100–200KBaltında tutun - Toplam email boyutu (resimler dahil)
1MBaltında - Daha küçük = daha hızlı yükleme süreleri ve daha iyi teslim edilebilirlik
- JPG: Fotoğraflar için en iyi
- PNG: Grafikler, logolar, şeffaflık için en iyi
- GIF: Basit animasyonlar için (dosya boyutunu küçük tutun)
- WebP: Email’de henüz yaygın olarak desteklenmiyor — kaçının
- Erişilebilirlik için ve resimler yüklenmediğinde her zaman alt metni ekleyin
- Stil için inline CSS kullanın (birçok istemci
<style>etiketlerini kaldırır) - Arka plan resimlerinden kaçının (tutarsız destek)
- İstemciler arasında test edin (Gmail, Outlook, Apple Mail hepsi farklı görüntüler)
- Outlook genellikle resim boyutlarını görmezden gelir, bu yüzden HTML’de hem width hem height özelliklerini ayarlayın
Resimlere alt etiketleri ekleyin
Alt metni erişilebilirliği artırır ve resimler engellendiğinde veya yüklenemediğinde bile bilgilerin iletilmesini sağlar.| Email İstemcisi | Resimleri Engeller mi? | Alt Metni Gösterir mi | Alt Metnini Stilize Eder mi |
|---|---|---|---|
| AOL | Evet | Evet | Evet |
| Gmail | Evet | Evet | Evet |
| Yahoo | Evet | Evet | Evet |
| Outlook | Bazen | Evet | Evet |
HTML’nizi adlandırın ve biçimlendirin
Erişilebilirlik için anlamsal HTML ve anlamlı etiket adlandırması kullanın. Bu, ekran okuyucuların içeriğinizi daha doğru bir şekilde yorumlamasına yardımcı olur. Ayrıca, sürdürülebilirlik için standart renk formatları ve uygun girintileme kullanın.Bozuk link’leri kontrol edin
Bozuk link’ler teslim edilebilirliği azaltır ve email’lerinizi spam olarak işaretleyebilir. Göndermeden önce tüm link’leri kapsamlı bir şekilde test edin.Yalnızca desteklenen HTML kullanın
Email istemcileri şunları desteklemez:- JavaScript
<iframe>- HTML formları
- Gömülü ses veya video
- Flash
- CSS konumlandırma veya katmanlama hileleri
Göndermeden önce doğrulayın
Göndermeden önce, email’inizi şunlarla doğrulayın:- Tüm link’leri test etme
- Abonelik iptal davranışını doğrulama
- Gmail, Outlook ve Apple Mail’e test email’leri gönderme
- Dark mode görüntülemesini kontrol etme
Email’iniz ana istemcilerde doğru şekilde görüntüleniyorsa ve abonelik iptali çalışıyorsa, gönderilmeye hazırdır.