E-postalarım Outlook İstemcisi İle Neden Kötü Görünüyor?
Yayınlanan: 2018-07-04Gerçekle yüzleşelim. E-posta oluşturmak oldukça kolay bir iştir. Ancak bu e-postaları Outlook uyumlu olacak şekilde biçimlendirmek oldukça zor bir iştir. Aslında, düşündüğünden daha zor.
Outlook, bulabileceğiniz en çok kullanılan, ancak eski e-posta istemcisidir. Ancak, Gmail gibi diğer e-posta istemcilerinde bulduğunuz birkaç gelişmeyi desteklemez.
Bunu örnekleyin:
Arka plan saydamlığına sahip bir PNG görüntüsü kullandıysanız, Outlook çıldırır! Bu tür görüntülerin nasıl oluşturulacağını bilmiyor. Benzer şekilde, yuvarlatılmış düğmelerinizin (border-radius CSS özelliği kullanılarak oluşturulmuş) Outlook istemcisinde neden Kare göründüğünü merak edebilirsiniz. Outlook, border-radius ve diğer bazı CSS özelliklerini desteklemediğinden.
İşte görünüm e-postalarınızın kötü görünmesinin nedenleri ve e-posta tasarımınızı geliştirmek için neler yapabileceğiniz.
E-postalarım Outlook'ta neden kötü görünüyor?
E-posta pazarlamacıları için şu anda en büyük zorluk, Outlook için bir e-posta şablonu oluşturmaktır. Bunun nedeni, Microsoft'un Outlook 2007'den itibaren e-postaları işlemek için Internet Explorer'ı kullanmayı bırakması ve işleme motoru olarak Microsoft Word'ü kullanmaya başlamasıdır. Bu değişiklik, Microsoft ofis kullanıcıları için en uygun olanıydı çünkü Word veya Excel'den Outlook e-postalarına içerik kopyalamalarına veya yapıştırmalarına izin verdi. Ancak senaryoyu HTML tabanlı e-posta oluşturucu için zorlaştırdı. HTML e-posta görünümü farklı göründüğünden, belirli zorlukların üstesinden gelmek için e-posta kampanyalarını iyileştirmek için aşağıdaki adımları izleyin.
Outlook ile e-posta işlemedeki zorluklar
Bir e-posta pazarlamacısının, bir e-posta kampanyası tasarlamadan önce çok fazla dikkate alması gerekir. Outlook kullanan müşteri aboneliğini bilmesi gerekiyor. Outlook'un masaüstü sürümü, mobil sürümü ve web sürümü, bir e-posta oluşturmada birbirinden tamamen farklıdır. Outlook ile e-posta oluşturma söz konusu olduğunda, bakılması gerekenler şunlardır.
Görüntü Neden Kırpılıyor ve Yavaş Yükleniyor
E-postalara resimlerin eklenmesi söz konusu olduğunda, Outlook'un resim boyutunda belirli sınırlamaları vardır.
E-posta bültenleri, e-posta pazarlama kampanyalarında önemli bir rol oynamaktadır. İçine görseller eklenerek dinamik hale getirilirler. Bazen kampanya şablonuna uzun bir resim eklendiğinde, alıcı tarafta kırpılır veya yeniden ölçeklenir. Bunun nedeni, görüntünün üst kısmındaki 1728 piksel yüksekliğini aşan Outlook klipleridir. Bu durumda, resmi kırpmadan görünmesi için 1728 pikselin altında yeniden boyutlandırmamız gerekiyor.
Resmin yeniden boyutlandırılamadığı durumlarda, en iyi alternatif, resmi iki ayrı resim halinde kırpmak ve ardından kampanyada kullanmaktır.
Resim yeniden boyutlandırılmıyor
Outlook, HTML ile sınırlandırılmış resimlerle iyi çalışmaz. Diğer bir deyişle, e-posta şablonu HTML kullanılarak yeniden boyutlandırılmış bir görüntüyle eklenirse, Outlook görüntüyü yeniden boyutlandırılan değerde değil, yalnızca orijinal boyutunda görüntüler. Bu nedenle, herhangi bir e-posta otomasyonunda kullanılmadan önce görüntünün yeniden boyutlandırıldığından emin olmamız gerekir.
Arka Plan Resimleri
Bir müşteriyi 'vay' etmek için en iyi strateji, markayı içeren bir arka plan resmine sahip bir e-posta oluşturmaktır. Görüntünün üzerine canlı metinler yerleştirerek arka plan görüntülerini daha amaçlı hale getirebiliriz. Canlı metin, müşterinin resimle birlikte gösterilmediği zamanlarda bile e-postanın amacını iletmemize de yardımcı olacaktır.
Ancak Outlook, HTML içeren arka plan resimlerini desteklemez. Arka plan görsellerinin abone tarafından görüntülenebilmesi için VML (Vector Markup Language) kullanmamız gerekiyor.
Arka plan resminin tüm e-posta penceresini kaplaması için HTML'nizin <body> etiketine aşağıdaki kodu girin
<div> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="/IMAGE.png" color="#000000"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="IMAGE.png">Yukarıdaki kod, Outlook 2007, 2010 ve 2013'te açılan e-postalarda arka plan görüntüsünün görüntülenmesinde mükemmel bir şekilde çalıştı. Ancak Windows Mail 10'un, arka plan görüntüsüne izin veren kaynağıyla görüntüyü eklemek için kodda bazı değişikliklere ihtiyacı vardı.
Aşağıdaki kod, görüntünün üst katmanının şeffaf olmasını sağlayacak ve arka plan görüntüsünü düzeltmeye yardımcı olacaktır.
<td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" src="/Image Live URL Here" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"> <v:fill opacity="0%" color="#f7901e" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> <!-- HTML Content Here --> </div> <!--[if gte mso 9]> </v:textbox> </v:fill> </v:rect> </v:image> <![endif]--> </td>Hareketli GIF'ler sığmıyor
Video kelimelerden daha çok şey anlatır.
Ancak teknik olarak bir e-posta şablonunun videoları desteklemek için karmaşık kodlamaya ihtiyacı vardır. Alternatifleri düşündüğümde, bir e-posta pazarlamacısı olarak GIF'i dinamik bir seçenek olarak görüyorum. GIF'ler, bir mesajı en basit biçimde iletmek için animasyonlu resimlerdir. Outlook GIF'i desteklemiyor.
GIF görüntüsü yüklenir ancak müşteriye GIF'in yalnızca ilk karesi işlenir.
E-posta listesinde Outlook aboneleriniz varsa, görüntünün ilk karesinin GIF'in ana bağlamını paylaştığından emin olun.
Diğer e-posta istemcilerine sahip abonelere ek bir avantaj sağlamak için animasyon bölümünü kullanmayı düşünün.
Sınır yarıçapı özelliği
E-posta pazarlamasından bahsetmişken, Harekete geçirici mesaj düğmesi, e-postanın bir müşteri adayı oluşturmasını sağlayan bir özelliktir. Yuvarlak uçlu CTA düğmesine kaç kez tıkladık?
Kenarlık yarıçapı özelliği, yaygın bir CSS özelliğidir ancak bu, Outlook ile iyi çalışmaz. Outlook ile abonelere kare kenarlıklı CTA butonları sağlanır.
Ek Boş Alanlar
Bazen, e-posta Outlook ile oluşturulduktan sonra, baskı önizleme seçeneğinde gördüğümüz gibi görüntünün üzerindeki boşluklar.
Blogda daha önce belirtildiği gibi, bunun nedeni Outlook 2007'nin HTML e-postalarını oluşturmak için Microsoft Word kullanmasıdır.
Bu nedenle e-posta, gerçek tasarımdan biraz farklı görünüyor.
Birincil Yazı Tipi sorunu
Abonenin cihazında birincil yazı tipi stili yoksa Outlook, kodda belirtilen yedek yazı tipini yok sayarak tüm e-postayı Times New Roman'da oluşturur.
<!--[if mso]> <style> h1 { font-family: Primary font, Fallback font; } </style> <![endif]-->E-posta şablonu mükemmel olmalıdır
Bir e-ticaret mağazası için bir e-posta kampanyası yürütüyorsunuz. Tasarladığınız şablon, etkili e-posta göndermenize yardımcı olmalıdır, çünkü bu, müşterilerin sizinle yüz yüze tanıştığı eski geleneksel alan pazarlaması değildir.
Pazarlamacının görünüşü, markanın güvenilirliğini belirler. Peki, markamızı temsil etmek için şimdi ne gönderiyoruz?
E-postalar. E-postanızın tasarım şablonu, markanızın müşteriye ilk izlenimini verir. Bir e-posta içerikle ne kadar iyi görünürse, marka da o kadar iyi olur
Ancak, e-postamızın çekici görünmesi için gelişmiş biçim seçeneklerini kullanma özgürlüğüne sahip değiliz. E-postanın Outlook'ta mükemmel göründüğünü görebiliriz, ancak diğer e-posta alıcıları tarafından oluşturulduğunda durum bu olmayacaktır.
E-posta html'nizdeki tabloları kullanmaya bağlı kalmalısınız. Outlook desteklemediğinden, div öğelerini konumlu ve yüzer durumda kullanmaya çalışmayın. Maalesef şu anda bunun için bir geçici çözüm yok.
Abonelikten çıkma seçeneği bir zorunluluktur
Bir e-ticaret mağazasını yönetirken, müşterilerimizi her zaman markamızla etkileşimde tutmak istiyoruz.
Nasıl yapılır?
Bültenler. Müşterilere iş nişinizdeki trend ve güncellemeler hakkında potansiyel bilgiler verin.
Ama nihayetinde markanızı takip edip etmemeye karar veren müşteridir. Bize abone olan bir müşteriye, herhangi bir zamanda abonelik listesinden çıkma seçeneği sunulmalıdır.
Abonelikten çık düğmesi, müşterilerimize gönderdiğimiz her haber bülteninde olmazsa olmazdır ve müşterilerimiz bu düğmeyi göremezse,
Ne Bekliyoruz?
Spam Alabiliriz!
Outlook'tan e-posta göndermek, bu standart seçeneği sunmadığı için markamızı bu riske sokar.
Bağlantılar Altı Çizili Mavi/ Mor renkli metne dönüştürülür
E-posta pazarlamacıları olarak, müşterilere gönderdiğimiz e-postayı tam olarak kullanmamız gerekiyor.
Müşteri katılımını sağlamak için abonelik bağlantıları, trend olan bloglarımıza bağlantılar, web sitemize yönlendirme bağlantıları ekleyebiliriz.
Outlook'tan bir HTML e-postası gönderildiğinde, bu tür bağlantılar farklı e-posta istemcilerinde görüntülendiğinde altı çizili mavi/mor metinde görünür.
Bu sorunu önlemek için <font> etiketini kullanın ve metni bir <span> etiketi ve stil özniteliği ile sarın.
Aşağıdaki kodu kullanmayı deneyin-
<a> <span> <font color="#E3A216"> Click me </font> </span> </a>Outlook, kişisel gelen kutunuzu doldurmak için iyi olabilir.
Ama, Konuşma işi- Kutunun Dışına Bak.