Genel Bakış
OneSignal’daki HTML Editor, hem masaüstü hem de mobil için düzen ve tasarım üzerinde tam kontrol ile son derece stilize, markalı email’ler oluşturmanıza olanak tanır. HTML email tasarımından en iyi şekilde yararlanmak için şunları öneririz:- Siz veya bir ekip üyenizin farklı istemciler ve cihazlarda iyi şekilde görüntülenen duyarlı HTML email’ler yazma deneyimi olduğundan emin olun.
- Tüm resimleri web siteniz, AWS veya diğer güvenilir barındırma platformları gibi herkese açık erişilebilir bir konumda barındırın.
Kendi şablonlarınızı içe aktarın
Zaten email şablonlarınız var mı? Bunları aşağıdaki seçeneklerle OneSignal uygulamanıza ekleyebilirsiniz:- Email Template forwarding
- Create Template API
- HTML’nizi HTML Editor’e kopyalayın ve yapıştırın
HTML editörünü kullanma
Mesajınızı kurarken HTML Editor seçeneğini seçin. Sol panelde HTML kodunuzu girin. Email’inizin mobil ve masaüstü istemcilerinde nasıl görüntülendiğini kontrol etmek için Send Test Email özelliğini kullanabilirsiniz.
Önizlemenin yanındaki HTML editörünü gösteren görsel
Link’ler
Link izleme varsayılan olarak etkindir. Çoklu link izleme mevcuttur. Daha fazla ayrıntı için Links ve Deep Linking’e bakın.Unsubscribe link’leri
Tüm pazarlama email’leri bir unsubscribe link’i içermelidir. Unsubscribe link’i olmadan, email’lerinizin spam olarak işaretlenme olasılığı daha yüksek olacaktır. Daha fazla ayrıntı için Unsubscribe links’e bakın. OneSignal, kullanıldığında kullanıcının email Subscription’ını abonelikten çıkaracak varsayılan bir unsubscribe link’i sağlar. İsterseniz kendi özel unsubscribe URL’nizi de ekleyebilirsiniz. Sadece email Subscription’ı doğru şekilde yönettiğinizden emin olun (ayrıntılar Create a custom unsubscribe page’de). OneSignal’ın varsayılan[unsubscribe_url]’ini email’lerinize şu şekilde ekleyin:
En iyi uygulamalar
HTML email’ler için önerilen kurulum:Inline CSS kullanın
Birçok email istemcisi gömülü veya harici stilleri kaldırır. Tutarlı görüntüleme sağlamak için her zaman CSS’inizi inline yapın. Bu aracı deneyin: Responsive Email CSS InlinerDark 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.
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.Desteklenmeyen HTML’den kaçının
Çoğu email istemcisi aşağıdakileri desteklemez:- JavaScript veya Flash
- Gömülü ses veya video
- HTML formları
- Iframe’ler
- Metin katmanlama