En Yaygın E-posta Kodlama Hataları ve Bunların Önlenmesi

E-postanızın tüm zillerine ve ıslıklarına rağmen, kodlama hataları onu tamamen mahvedebilir. Yalnızca bir yanlış kısaltılmış bağlantı veya yanlış renk biçimi - ve özellikle bir kullanıcı web e-posta istemcisi yerine akıllı telefon aracılığıyla kontrol etmeye karar verirse veya farklı bir ekran çözünürlüğüne sahip bir gadget'a geçerse e-postanız berbat görünecektir.

Bu yazıda, yaygın HTML e-posta kodlama hatalarından bahsedeceğiz ve bunlardan kaçınmak için bazı tavsiyeler paylaşacağız.

E-posta görüntüleme sorunları nereden geliyor?

Basitçe söylemek gerekirse, bir kullanıcının e-postanızı planladığınız yolun dışında görmesinin iki olası nedeni vardır. Birincisi, kullanıcınızın cihazının teknik özellikleriyle ilgilidir. İkincisi, daha kesin olmak gerekirse, e-posta istemcisidir - oluşturma motoru.

Bir kullanıcının cihazının teknik özellikleri

Herhangi bir cihazın dikkate almanız gereken en az iki teknik özelliği vardır:

1. Ekran çözünürlüğü — piksel cinsinden verilen ekranın boyutu. Örneğin iPhone X, 1125×2436 piksel ekran çözünürlüğüne sahip. E-postanız, her sütunda 600 piksel olmak üzere iki sütun metin içeriyorsa, doğru şekilde görüntülenmez.
2. PPI veya inç başına piksel — ekranın bir inçindeki piksel sayısı. iPhone X'in ÜFE'si 458. Hayal edin: e-postanıza bir işlem düğmesi eklemeniz gerekiyor. Düğme, iPhone X için 132×132 piksel anlamına gelen 44 noktadan azsa, ekran alanının üçte birinden daha azını kaplar ve kullanıcı buna zorlukla dokunamaz.

Akılda tutulması gereken bir şey daha var: kullanıcılar genellikle mobil cihazlarını döndürür, bu nedenle e-postanız düzgün görünmeli ve hem dikey hem de yatay görünümde tam işlevselliğe sahip olmalıdır.

Kullanıcının cihazının teknik özellikleriyle ilgili sorunları önlemek için duyarlı bir e-posta tasarımı kullanmalısınız.

İlk olarak, e-postanızın head medya sorguları eklemelisiniz. Örneğin, @media screen ve (max-width: 600px) sorgusu, ekran genişliğinin 600 pikselden az olması durumunda e-posta tasarımının optimize edileceği anlamına gelir. Ekranın genişliği 600 pikselden fazlaysa, kullanıcı bu e-postanın sabit genişlikli sürümünü görecektir.

İkinci olarak, içinde hücreler bulunan bir tablo şeklinde bir e-posta oluşturmalısınız:

 <tablo>
<tr>
    <td>...</td>
</tr>
</tablo>

Ardından, her hücre için stil eklersiniz, örneğin:

 <td><img src="http://somewebsite.com/someimage.jpg" width="600" alt=""></td>

Ancak, bu önlemleri almış olsanız bile, e-postalarınızı görüntüleme konusunda sorun yaşayabilirsiniz. Sorunun kaynağı, e-posta istemcisinin işleme motorudur.

Bir e-posta istemcisi

Olası görüntüleme sorunlarının ikinci kaynağı, alıcılarınızın kampanyalarınızı açmak için kullandığı e-posta istemcisidir. Bir e-posta istemcisinin temel kısmı bir işleme motorudur. Uzun bir kod komut dosyası olarak bir e-posta alır, işler ve e-postaları almaya alıştığımız şekilde çıktılar: resimler, bağlantılar ve diğer ortamlarla birlikte anlaşılır, yapılandırılmış ve biçimlendirilmiş metin.

Aşağıdaki örneğe bir göz atın. Gmail'in işleme motorunun gördüğü gibi, promosyon e-postasından alınan bir kod parçasıdır. Bu e-posta potansiyel bir müşteriye bu şekilde görüntülendiyse, kodu zorlukla kesecekler ve %40 indirimli bir promosyon kodu olduğunu anlayacaklardır.

Her e-posta istemcisinin kendi işleme motoru vardır; bu, farklı e-posta istemcileri aracılığıyla açılan aynı e-postanın tamamen farklı bir görünüme sahip olabileceği anlamına gelir.

İşte dünya çapında en popüler e-posta istemcilerinin bir listesi. Açıkçası, alıcılarınız gönderdiğiniz e-postaları açmak için bunlardan birini veya birkaçını kullanır.

Bu e-posta istemcilerinin tümü, HTML e-posta kodlaması yaparken göz önünde bulundurmanız gereken bazı özelliklere sahiptir.

Örneğin, iOS için Apple Mail şunları desteklemez:

• inline-size CSS özelliği;
• @media (orientation) medya sorgusu;
• çapa bağlantıları;
• HDR, PPM ve SVG görüntü biçimleri ve daha fazlası.

Gmail, aşağıdakiler dışında çeşitli CSS özelliklerini ve medya sorgularını destekler:

• box-shadow, text-shadow, ve diğer bazı CSS özellikleri;
• @media (prefers-color-scheme) medya sorgusu ve daha fazlası.

Yaygın e-posta kodlama hataları ve bunlardan nasıl kaçınılacağı

E-posta kodlama hatalarından kaçınmak için en iyi genel tavsiye, envanterinizi sürümleri ne kadar eski olursa olsun çoğu e-posta istemcisi tarafından desteklenen kodla sınırlamaktır. Basit bir ifadeyle, geri adım atmak ve 1999 yılıymış gibi kodlamak. Örneğin, yaygın olarak kullanılması önerilir:

• CSS3 yerine CSS2,
• HTML5 yerine HTML4,
• arka plan resimleri yerine renk,
• <div> yerine table-layout ,
• stil kümeleri veya <style> blokları yerine satır içi CSS.

Bu yaklaşımın, e-postaların görüntülenmesiyle ilgili çoğu sorunu önlediğine inanılmaktadır. Ancak, e-postanızı mahvedebilecek bazı kodlama hatalarına daha yakından bakalım ve bunlara çözüm bulmaya çalışalım.

Düz metin sürümü yok

Potansiyel sorunlar. Outlook ve Gmail gibi bazı e-posta istemcileri, düz metin sürümü yoksa e-postanızı spam olarak tanımlayabilir. Ayrıca, bazen e-posta istemcilerinin HTML kodunu oluşturmada sorunları olabilir. Bu nedenle, düz metin e-postalar her zaman aynı görünürken, HTML e-postaları yanlış görüntülenebilir.

Önleme. E-postanıza düz metin sürümünü ekleyin. Neyse ki, çoğu e-posta servis sağlayıcısı bunu otomatik olarak ekler.

Düz metin e-postaları e-posta pazarlama stratejinize uygulayabilirsiniz. Her şeyden önce, bu tür e-postalar daha kişisel görünür ve bu nedenle abonelerle iletişiminizi yükseltebilir. Ayrıca, bazı insanlar doğrudan e-postanın konusuna gelmeyi tercih eder ve renkli bir düzen onları geciktirir.

JavaScript, ActiveX, Flash ve daha fazlasını kullanma

Potansiyel sorunlar. Çoğu e-posta istemcisi bu dilleri, çerçeveleri ve eklentileri desteklemez, bu nedenle e-postanızın bir kısmı oluşturulmaz ve aboneleriniz boş bir alandan başka bir şey görmez. Ayrıca, e-posta anti-virüs yazılımı tarafından yasaklanabilir.

Önleme. E-postaları HTML ve CSS'ye kodlamak için kullandığınız dilleri koruyun. Biraz video veya ses eklemeniz gerekiyorsa, bir web sitesine yükleyin ve ona bir bağlantı verin.

NiftyImages'ın yeni ürün özelliklerini nasıl sunduğuna bir göz atın: şirket, açıklayıcı bir video olsa da bir dizi görüntü seçti.

Çok fazla yönlendirme

Potansiyel sorunlar. Yönlendirmeler, analitik için gerekli olsa da, e-postanıza yarardan çok zarar verebilir. Örneğin, bir web sayfasının yüklenme süresini önemli ölçüde uzatırlar. Ardından, bir kullanıcının tarayıcısının yönlendirmeleri engelleme olasılığı vardır - bu nedenle URL'ye erişilemez.

Önleme. Yönlendirmelerden kaçınmaya çalışın. Ancak yine de bunları kullanmanız gerekiyorsa, bir hedef URL'nin yüklenmesinin ne kadar sürdüğünü kontrol edin - tüm kampanyayı başlatmadan önce e-postanızı test edin. Abonelerinizin deneyimini düşünün: URL'nin yüklenmesini beklemek isteyip istemediklerini.

Kısaltılmış bağlantılar

Potansiyel sorunlar. Kısaltılmış bağlantılar, e-postalarınızı spam klasörüne düşme riskine sokar. Mesele şu ki, kısaltılmış bağlantılarda hedef URL belirsizdir. Basit bir deyişle, her yere götürebilir. Doğal olarak, bilgisayar korsanları ve spam gönderenler bundan yararlanır.

Önleme. Kısaltılmış bağlantılar kullanmayın. Amacınız e-postanızın uzun URL'ler olmadan düzenli görünmesini sağlamaksa, aşağıdaki HTML etiketini kullanmanız daha iyi olur: <a href="URL">...</a> . Ne kadar uzun olursa olsun, herhangi bir URL'yi buraya ekleyebilirsiniz.

Hala kısaltılmış bağlantılar için hevesliyseniz, üçüncü taraf araçları kullanmak yerine kendi URL'lerinizi kısaltın. En azından bağlantı kısaltıcıların kara listelerini önceden tarayın.

Büyük e-posta gövdesi dosya boyutu

Potansiyel sorunlar. Hem e-posta istemcileri hem de e-posta hizmeti sağlayıcıları, nispeten küçük hacimli bilgileri aktarmak üzere tasarlandıkları için e-posta gövde boyutu sınırlarına sahiptir. Bu sınırlara uymazsanız, e-postanız kesilebilir - sonu gizlenir.

Bir müzik şirketinin haber bültenine bir göz atın. Gmail ile açıldığında kırpılır.

Tam sürümünü görmek için abonenin bir bağlantıya dokunması gerekir.

Büyük bir e-posta gövdesi dosya boyutu da teslim edilebilirlikle ilgili sorunlara neden olabilir. Ayrıca, boyutu nedeniyle, e-posta, kullanıcının anti-virüs yazılımı tarafından bir güvenlik tehdidi olarak değerlendirilebilir.

Önleme. E-posta servis sağlayıcınızın ve abonelerinizin kullandığı e-posta istemcilerinin e-posta gövdesi boyutu sınırlarını kontrol edin. Örneğin, Google, 200 KB'lık bir e-posta gövdesi boyutu sınırı talep eder. Ancak, çoğu e-posta istemcisinin gereksinimlerini karşılamak için e-postalarınızı 100 KB ile sınırlamanız yaygın olarak önerilir. Aslında, yukarıdaki örnekteki e-postanın boyutu 136 KB'dir.

Çok fazla yazı tipi ve renk

Potansiyel sorunlar. E-posta istemcileri arasındaki farklar nedeniyle, tüm yazı tipleri ve renkler doğru görüntülenemez. Ayrıca, tüm yazı tipleri ve renkler birbiriyle iyi bir şekilde bir araya gelmez - bu nedenle, zayıf bir e-posta tasarımı oluşturma riskiyle karşı karşıya kalırsınız.

Abonelerinizin cihazlarının, örneğin parlaklık gibi farklı ekran ayarlarına sahip olduğunu da unutmayın. Ve e-postanızı daha canlı hale getirmeye çalışırken, kullanıcılar bu renk cümbüşünden zarar görebilir.

Bu, e-posta tasarımının şüpheli bir örneğidir: her bloğun kendi renkleri vardır; bu bolluk, kullanıcıyı en önemli bilgilerden uzaklaştırır.

Önleme . Arial, Comic Sans MS, Courier New, Times New Roman veya Verdana gibi e-posta dostu yazı tiplerini seçin: bunlar en popüler e-posta istemcileri tarafından desteklenir. Metin yazı tipinizin boyutu 12-13 pikselden az olmamalıdır; aksi takdirde, bir kullanıcının e-postanızı yakınlaştırması veya gözlerini zorlaması gerekir.

Renklere gelince, ikiden fazla kullanmamalısınız: biri genel metin bloğu için, diğeri ise bağlantılar ve düğmeler kadar önemli şeyleri vurgulamak için. Seçtiğiniz renklerin arka planla eşleştiğinden ve bir kullanıcı karanlık moda geçtiğinde iyi göründüğünden emin olun.

Bir metin düzenleyiciden veya web sitesinden e-posta şablonu HTML kodunu kopyalama

Potansiyel sorunlar. E-postanız için metin oluşturmak için Microsoft Word veya benzeri bir şey kullanır ve ardından kopyalarsanız, e-posta düzeninizi bozabilecek bazı gereksiz biçimlendirmeleri yakalama riskiyle karşı karşıya kalırsınız. Ve bir web sitesinden görüntüleri veya metnin bazı bölümlerini kopyalarsanız, e-postanıza JavaScript veya Flash öğeleri eklenebilir.

Önleme. Bir e-postayı kodlamak için Windows için Notepad veya Mac için TextEdit gibi kendi biçimlendirmelerini eklemeyen metin düzenleyicileri kullanın. TextCleanr gibi biçimlendirmenizi temizleyebilecek bazı çevrimiçi araçlar da vardır. Kullanıcı dostu bir düzenleyicide bir e-posta oluşturmanıza ve aynı anda kodu kontrol etmenize olanak tanıyan bir HTML Temizleyici aracı da kullanabilirsiniz.

Üç basamaklı HEX renk kodlarını kullanma

Potansiyel sorunlar. Üç ve altı basamaklı renk biçimleri eşdeğer olsa da, bazen e-posta istemcileri üç basamaklı bir biçimi biraz farklı bir şekilde oluşturur. Örneğin, Gmail ile planladığınız siyah yerine mor olma riskini alırsınız: color: #000 , color: #500050 .

Önleme . Genel bir kural olarak, altı basamaklı renk biçimine bağlı kalın ve bunu tüm e-posta boyunca kullandığınızdan emin olun.

ekler

Potansiyel sorunlar. Genellikle spam gönderenler ve bilgisayar korsanları e-postalarına bazı dosyalar ekler. Bir ek eklerseniz, bu bir güvenlik tehdidi olarak kabul edilebilir.

Önleme. Dosyayı doğrudan e-postaya eklemek yerine bir dosya yükleme sayfasına bağlantı verin.

Söz verdiğiniz dosyaya kullanıcılara nasıl erişim izni verebileceğinize ilişkin bir örnek aşağıda verilmiştir. Bağlantının nasıl belirlendiğine dikkat edin: Kullanıcının bağlantıya dokunduğunda ne olacağını bilmesi için tıklanabilir, anlaşılır bir metin parçası olmalıdır.

Eksik alternatif metin

Potansiyel sorunlar . Bazı kullanıcılar tarayıcılarında resim indirmeyi devre dışı bırakır. Alternatif metin içermeyen resimler de dahil olmak üzere bir e-posta alırlarsa, resimler yerine yalnızca boş alanlar görürler ve e-postanın amacını anlamazlar.

Birinin internet bağlantısı, görüntüleri yeterince hızlı indirmek için çok düşük olduğunda da aynı şekilde çalışır. Alternatif metin, bu sorunun bir şekilde çözülmesine yardımcı olur: görüntülerin indirilmesi yanlış gittiğinde, kullanıcı bunun yerine bir metin görebilir.

Önleme. alt tüm resimlere bir alt özelliği ekleyin. Bunu bir img etiketine ekleyerek doğru yaptığınızdan emin olun: <img alt="text"> . Alternatif metni boşluklar dahil 125 karakterle sınırlayın. Genellikle görüntüyü tam olarak tanımlayan birkaç kelime eklemek yeterlidir. Biraz yeriniz kaldıysa, bu açıklamaya biraz bağlam ekleyebilirsiniz.

Sephora'dan bir e-postadan bir alıntıya bakın.

Bu e-postanın kodunu kontrol ederseniz, resmin alternatif metni olarak bir CTA bulabilirsiniz. Kullanıcılar görseli görmeseler bile markanın ne sunduğunu anlayacaklardır.

Yalnızca görüntü düzeni

Potansiyel sorunlar. E-postanız yalnızca resimlerden oluşuyorsa ve herhangi bir metin içermiyorsa, teslim edilebilirlik, görüntüleme ve daha fazlasıyla ilgili sorunlarla karşılaşabilirsiniz. Örneğin, bir kullanıcı resim indirmeyi engellerse, e-postanızda kelimenin tam anlamıyla hiçbir şey görmez. İkinci olarak, çok sayıda resim e-posta gövdesinin boyutunu büyütür ve e-posta istemcilerinin onu kırpması olasıdır. Üçüncüsü, bir kullanıcı kelimeye göre arama yaparak e-postanızı bir klasörde bulamaz.

Önleme. Bir e-posta oluştururken metin ve resimleri birleştirin. E-postanın düz metin sürümünü ve resimler için alternatif metni eklemeyi unutmayın; yukarıda verdiğimiz diğer tavsiyeleri dikkate alın.

Ecwid'den gelen bu e-postaya bir göz atın. Tablo düzenini ve max-width: 570px gibi medya sorgularını içeren duyarlı bir tasarıma sahiptir. E-posta, farklı içerik türlerini birleştirir: renkli, büyüleyici bir resim ve metin. Altı basamaklı renk biçimi kullanılır, örneğin color:#979797 veya color:#4A4A4A . E-postada çok fazla resim yok, bu yüzden gövde boyutu çok büyük değil. Dahası, e-postada ne kısaltılmış bağlantılar ne de yönlendirmeler bulun. Genel olarak, bu e-posta yukarıda verilen önerilerin çoğunu karşılamaktadır.

Bu nedenle, en yaygın HTML e-posta kodlama hatalarına bir göz attık. Tavsiyemizi uygulayın ve göndermeden önce e-postalarınızı test etmeyi unutmayın: e-postanızı açmak için en az üç popüler e-posta istemcisi kullanın; mümkünse farklı cihazlardan da kontrol edin. Emülatörler de kullanışlı olacaktır.

E-posta kodlama hatalarından kaçınmanın bir yolu daha

Bir gerçek var: Kod yazmazsanız HTML kodlama hataları yapmazsınız. Neyse ki SendPulse ile kodsuz e-posta tasarımı sizi bekliyor.

Sezgisel sürükle ve bırak düzenleyicimizle, e-posta kodlama hataları yapmanızı zaten engelledik. E-postanıza resim, metin veya video ekleyin, yazı tiplerini ve renkleri marka stilinize uyacak şekilde ayarlayın ve sosyal medya sayfalarınıza bağlantılar ekleyin.

Her şeyi daha da basitleştirmek için ücretsiz e-posta şablonlarımızdan seçim yapabilirsiniz. SendPulse ile oluşturulan tüm e-postalar duyarlıdır, bu nedenle bir kullanıcı hangi cihazı açmayı seçerse seçsin iyi görüneceklerdir.

Yaygın HTML e-posta kodlama hatalarından kaçınmak için kontrol listesi

Aşağıda, yaygın HTML e-posta kodlama hatalarından nasıl kaçınılacağına ilişkin ana kuralları bulacaksınız. Bu kurallara uyarak, teslim edilebilirlik ve e-postalarınızı görüntüleme ile ilgili sorunlardan kaçınabilirsiniz.

• E-postalarınıza düz metin sürümünü ekleyin.
• JavaScript, ActiveX, Flash veya benzerini kullanmayın. Biraz video veya ses eklemeniz gerekiyorsa, bir web sitesine yükleyin ve ona bir bağlantı verin.
• Bir web sayfasının yükleme süresini artırmamak için yönlendirmelerden kaçınmaya çalışın.
• Kısaltılmış bağlantılar kullanmayın - HTML kullanarak bir metin parçasını veya resmi bir bağlantıya dönüştürün.
• E-posta gövdesi boyutunu 100 KB ile sınırlamaya çalışın veya en azından gönderen sağlayıcınızın ve abonelerinizin en çok kullandığı e-posta istemcilerinin sınırlarını kontrol edin.
• Arial, Comic Sans MS, Courier New, Times New Roman veya Verdana gibi e-postayla uyumlu yazı tiplerini seçin.
• Bir e-postada ikiden fazla rengi birleştirmemeye çalışın - aksi takdirde dikkat dağıtıcı görünecektir.
• E-postanız için MS Word veya web siteleri gibi metin düzenleyicilerden metin ve resim kopyalamayın: bazı gereksiz biçimlendirmeleri yakalama riski vardır.
• Altı basamaklı bir renk biçimi kullanın.
• Dosya eklemeyin — bunun yerine bir dosya yükleme sayfasına bağlantı verin.
• Görsellere alternatif metin eklemeyi unutmayınız.
• Yalnızca görsellerden oluşan e-postalar oluşturmayın - her zaman biraz metin ekleyin.
• Bir kampanya başlatmadan önce bir e-postayı test etmeyi unutmayın. En az üç e-posta istemcisi ve farklı cihazlar kullanın.

Tüm bunları düşünmek zorunda kalmamak için SendPulse'u ücretsiz kullanmaya başlayın!