Outlook E-posta İşleme: Endişelenmeyi Bırakmayı ve Outlook'u Sevmeyi Nasıl Öğrendim?

Yayınlanan: 2021-07-02

Hepimiz oradaydık. İlginç GIF'ler, erişilebilir düğmeler ve göz alıcı resimlerle güzel bir e-posta oluşturursunuz. Sonra test edersiniz ve harika görünür… tamamen bozuk olduğu Outlook dışında. İnsanlar bozuk bir e-postayla istediğiniz şekilde etkileşime geçemez.

Outlook, uzun süredir e-posta pazarlamacılarının vebasıydı, ama öyle olması gerekiyor mu? Onunla nasıl çalışabiliriz? Birçok hatasına rağmen Outlook'u nasıl sevdiğimi öğrenmek için okumaya devam edin. ele alacağım:

Outlook sürümleri
Outlook tuhaflıkları için ipuçları
Düzeltme yapmak için kod

Microsoft Outlook'un birçok sürümü

"Outlook" adı, birkaç farklı işleme motoruna ve en az iki farklı görüntüleme ayarına sahip birkaç farklı e-posta istemcisini kapsar. İzin verirseniz, tüm bunlar dev bir baş ağrısı olabilir. Hadi, biraz düzeltip düzeltemeyeceğimizi görelim.

Görünüm 2007-2019

Bunlar, Outlook'un Windows masaüstü sürümleridir. Bunlar, e-postanın mektup yazmak gibi olduğu bir zamanda anlamlı olan, oluşturma motoru olarak Word'ü kullanır. Ah, daha basit zamanlar. Ancak, e-posta pazarlamacıları için HTML e-postaları oluşturmak için onu kesmez.

120 DPI (inç başına nokta) karmaşıklığı artırır. Windows kullanıcıları, ekran çözünürlüklerini artırmak için 120 DPI seçebilir. Bunu yaparlarsa, masaüstü e-posta istemcileri buna saygı gösterecek ve resimleri ve metni daha büyük olacak şekilde güncelleyecektir. Bu, e-postanızda hasara yol açabilir.

Mac için Outlook

Bu, Outlook'un Mac masaüstü sürümüdür. Oluşturma motoru olarak Webkit kullanır. Bu, e-posta oluşturma söz konusu olduğunda genellikle Apple Mail ve iOS ile eşit olduğu anlamına gelir. Tarayıcınızda iyi görünüyorsa, burada iyi görünmesi için iyi bir şans var.

Outlook.com ve Outlook mobil uygulamaları

Bu istemciler Webkit veya Webkit tabanlı oluşturma motorlarını kullanırlar, bu nedenle iyi HTML oluşturma sağlarlar ve genellikle e-postalarınızı bozmazlar.

Outlook Office 365

Outlook Office 365'in masaüstü e-posta istemcisi ve web tabanlı e-posta istemcisi olmak üzere iki farklı sürümü vardır. Masaüstü sürümü, Outlook 2007-2019'a benzer ve oluşturma motoru olarak Word'ü kullanır (e-posta için zor). Web tabanlı e-posta istemcisi, Webkit veya Blink'i kullanır ve e-postaları Outlook.com'a benzer şekilde işler (çok daha kolay).

Artık bozuk e-posta yok

Markaya uygun, hatasız bir abone deneyimi sağlamak için e-postalarınızı 90'dan fazla e-posta istemcisi, uygulama ve cihazda (Outlook'un tüm sürümleri dahil) önizleyin.

Nasıl yapılacağını öğrenin →

Hepsine hükmedecek tek bir Outlook

Ocak ayında Microsoft, masaüstü istemcilerini 2022'den başlayarak her yerde çalışan tek bir istemciyle değiştirmeye yönelik "One Outlook" vizyonunu duyurdu.

Yeni e-posta istemcisi, mevcut Outlook web uygulamalarını temel alacaktır. Bu nedenle, Webkit tabanlı bir oluşturma motoruna sahip olacağına ve HTML e-postalarını iyi bir şekilde oluşturacağına dair umutlar yüksek. Ne yazık ki, tüm bu eski masaüstü istemcileri bu gerçekleştiğinde öylece ortadan kaybolmayacaklar, dolayısıyla yine de bir dereceye kadar desteklenmeleri gerekecek.

Yap ya da yapma, denemek yok

Başın dönüyor mu?

Öyleyse, sizin için damıtalım: Temel çıkarım, iki farklı işleme motoruyla çalışıyor olmamızdır: Word ve Webkit. Webkit'i kodlamak daha kolaydır ve Word daha zordur. İkisi de gerçekten iyi ya da kötü değil. Sadece farklı yaklaşımlar gerektirirler ve dikkate alınması gereken farklı tuhaflıkları vardır.

Outlook masaüstü istemcilerindeki bazı yaygın işleme sorunlarına ve bunların nasıl çözüleceğine bakalım.

Resimlerinize genişlik ve yükseklik özelliklerini ekleyin

Outlook, genişlikler ve yükseklikler için CSS stillerini desteklemez ve genişlik ve yükseklik özniteliklerini eklemezseniz Outlook, resminizi gerçek boyutunda görüntüler. Retina görüntüleri kullanıyorsanız (ki kullanmanız gerekir), bu, e-postalarınızı kıracak dev görüntüler alacağınız anlamına gelir.

görünüm — Outlook'ta genişlik özelliği olmayan retina görüntüsü e-postayı genişletiyor

ALT metni dahil et

Outlook'un güvenlik mesajının resimleriniz adına konuşmasına izin vermeyin. ALT metni eklediğinizden emin olun. Özellikle, insanlar özelliği açmadıkça Outlook varsayılan olarak görüntüleri göstermediğinden.

Outlook'ta resimlerin engellendiği e-posta

Tabloları kullanın

E-posta uzun bir yol kat etti ve birçok e-posta istemcisinde <div> bloklarını kullanabilirsiniz, ancak Outlook bunlardan biri değil. Outlook, genişlikler ve dolgular dahil, <div> etiketlerinize uyguladığınız çoğu stili yok sayar. Bu nedenle içeriğiniz için bunun yerine <table> etiketlerini kullanmanız önemlidir.

Oluşturma sorunlarını çözmek için Outlook'a özel kod kullanın

Bu, tüm sorunlarınızı çözmeyebilir, ancak çoğu zaman Outlook'a özgü bazı CSS'lerin eklenmesi, yalnızca Outlook'ta gördüğünüz bir oluşturma sorununu çözmenize yardımcı olabilir. Yoksa Outlook çalışmıyor küçük blok gizlemek ve Outlook belirli bir sürümü için çalışacak bir versiyonu görmek için koşullu kodu kullanabilir. (Daha sonra koşullu kod hakkında daha fazlası.)

Küçük resimlere veya tablo hücrelerine satır yükseklikleri ekleyin

Outlook, tablo hücrelerinde ve görüntülerde minimum bir yükseklik ayarlar. Bu nedenle, ayırıcı olarak bir tablo hücresi kullanıyorsanız veya küçük bir görüntünüz varsa, öğeye, görünmesini istediğiniz yüksekliğe eşit bir satır yüksekliği özelliği eklediğinizden emin olun. Örneğin:

<tr>
     <td style="font-size: 5px; line-height: 5px; mso-line-height-rule: exactly;">&nbsp;</td>
</tr>

DPI ölçekleme sorunları için düzeltme yapın

Windows bilgisayarlarda, insanların değiştirebileceği (veya bazı durumlarda varsayılan olarak daha yükseğe ayarlanır) genel bir ayar vardır; bu ayar, metin ve grafik öğelerini daha büyük ve okunması kolay hale getirmek için ölçeklendirir. Bu, erişilebilirlik için harikadır, ancak Outlook için o kadar iyi değildir, çünkü diğerleri değilken yalnızca bazı öğeler büyütülür.

Neyse ki, bir düzeltme var. İlk olarak, HTML etiketine bir XML ad alanı eklemelisiniz:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

Ardından, </head> etiketinden hemen önce görüntü ölçeklendirme için düzeltmek üzere bir kod ekleyin:

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

Son olarak, herhangi bir set genişliğini tablolarınızda bir nitelik olarak değil, pikselli bir CSS özelliği olarak eklediğinizden emin olun.

✗ Genişlik=”600″ ile bu değil:

<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="600">

Evet, style=”width:600px;” ile böyle. :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">

Bu, 120 DPI istemciler için sorunlarınızın çoğunu çözecektir. Bu düzeltmeden önce ve sonra bu yan yana karşılaştırmaya bir göz atın:

120 DPI'da Outlook 2013 (düzeltme yok)	120 DPI'da Outlook 2013 (düzeltmeyle birlikte)

Ne fark eder, ha?

Fareyle üzerine gelme efektlerinin çalışmasını beklemeyin

Outlook, vurgulu sözde sınıfını desteklemiyor. Diğer e-posta istemcilerinde e-postanızın erişilebilirliğini artırmak için etkileşimler oluşturmak için yine de eklemelisiniz, ancak Outlook'ta çalışmadığında şaşırmayın.

Anlamak için animasyonlu bir GIF'e güvenmeyin

Outlook masaüstü istemcileri, animasyonlu GIF'leri desteklemez. İlk karenin Outlook'ta görünmesini istediğiniz görüntüyü göstermesini sağlayabilir veya animasyonlu GIF'i Outlook'tan gizleyebilir ve istediğiniz hareketsiz görüntüyü görüntülemek için koşullu kodlamayı kullanabilirsiniz. (Yine, daha sonra koşullu kodlama hakkında.)

Geri dönüş olmadan etkileşimli içeriği kullanmayın

Etkileşimli e-postalar Outlook için büyük bir hayırdır. Her ikisi de Outlook'ta desteklenmeyen AMP kodlamasına veya onay kutusu hackine bağlıdır.

E-posta için AMP söz konusu olduğunda, AMP dosyası yerine HTML dosyası görüntülenecektir, dolayısıyla bunun için fazladan kodlama gerekmez. Hack etkileşimi onay kutusu için etkileşimli içeriği gizlemeniz ve Outlook yedeğini göstermeniz gerekir. Yine, koşullu kodlama burada arkadaşınızdır.

Resimlere dolgu veya kenar boşlukları eklemeyin

Outlook, görüntülerdeki dolguyu ve kenar boşluklarını kaldırır. Bunun yerine resmin etrafındaki tablo hücresine dolgu eklediğinizden emin olun. Veya görüntü kopyayla aynı hücredeyse, kopyanın etrafındaki etikete kenar boşluğu ekleyin (<h1>, <h2>, <p>, vb.).

Korku, e-posta katilidir: Outlook korkularınızla yüzleşmek için ihtiyacınız olan kod

Outlook'un masaüstü e-posta istemcileri için harika bir e-postayı kodlamak, "normal" HTML ve CSS'nin dışına çıkmayı gerektirir. Bu istemcilerde e-postalarınızın öne çıkmasına yardımcı olacak üç tür kod vardır: koşullu kodlama, MSO özellikleri ve VML.

Yeni bir şeyle çalışmak korkutucu olabilir ama buna değeceğine söz veriyorum. Ve düzgün çalışmasını sağladığın o an? Kessel Run'ı 12 parsekten daha kısa bir sürede yapmış gibi hissedeceksiniz.

koşullu kodlama

Koşullu kodlama, abonenizin hangi e-posta istemcisini veya tarayıcıyı kullandığına bakan ve kodu yalnızca yorumun içindeki koşul koşulunu karşılıyorsa gösteren kodlamadır, örneğin:

<!--[if mso]>
<p>This content is only visible on Outlook desktop clients</p>
<![endif]-->

Sürüm numaralarını ekleyerek Outlook'un masaüstü istemcilerinin belirli sürümlerini hedeflemek için bunu bile kullanabilirsiniz:

<!--[if mso 14]>
<p>This content is only visible on Outlook 2010 desktop client</p>
<![endif]-->

Outlook basit ama basit değil, bu nedenle sürüm numaraları e-posta istemcisinin adıyla uyuşmuyor:

Outlook 2000 = mso 9
Outlook 2002 = mso 10
Outlook 2003 = mso 11
Outlook 2007 = mso 12
Outlook 2010 = mso 14
Outlook 2013 = mso 15
Outlook 2016, Outlook 2019 ve Office 365 masaüstü = mso 16

Daha sonra, (lt) değerinden küçük, (gt değerinden büyük), (lt) değerinden küçük veya eşit (lte) veya büyük veya eşit (gte) değerine sahip bir dizi istemciyi hedefleyerek daha karmaşık hale getirebilirsiniz. Örneğin:

<!--[if (gte mso 9) | (lte mso 11)]>
<p>This content is only visible on Outlook 2000 to Outlook 2003</p>
<![endif]-->

Bu nedenle, belirli bir istemcide yalnızca bazı çılgın şeyler olduğunu görüyorsanız, o istemciyi özel olarak hedefleyebilir ve bunun için daha iyi içeriği gizleyip gösterebilirsiniz.

"Eğer mso değilse" anlamına gelen "if !mso" diyerek Outlook'tan içeriği gizlemek için koşullu yorumları da kullanabilirsiniz:

<!--[if !mso]><!-->
<p>This is visible on anything except Outlook desktop clients</p>
<!--<![endif]-->

Akılda tutulması gereken bir şey: Koşullu kod yalnızca Outlook masaüstü istemcilerinde çalışır. Pek çok sorun burada devreye girdiğinden, muhtemelen bunlara web posta istemcileri için herhangi bir düzeltmeden daha fazla ihtiyacınız olacak.

Ancak, bir Outlook web istemcisini diğerine göre hedeflemenin hiçbir yolu olmasa da, web istemcilerini de hedeflemenin yolları vardır. Bu nedenle, Outlook.com'u hedeflediğinizde, Office 365 web istemcisini de hedeflemiş olursunuz (masaüstü istemcisini değil).

Outlook'un tüm sınıf adlarına “x_” eklediği, ancak bunu öznitelik seçici için yapmadığı gerçeğinden yararlanarak Outlook web istemcilerini hedefleyebilirsiniz. Dolayısıyla, bir "foo" sınıfınız varsa ve onu Outlook web istemcileri için farklı şekilde ele almak istiyorsanız, onu şu kodla hedefleyebilirsiniz:

[class~="x_foo"] { }

(Bu düzeltme için Mark Robbins'e ve howtotarget.email için Dylan Smith'e teşekkürler.)

MSO özellikleri

Yukarıda belirtildiği gibi, yalnızca Outlook masaüstü e-posta istemcilerini etkileyecek, ekleyebileceğiniz Outlook'a özgü CSS vardır. Burada oldukça yaygın bulacağınız birkaç tane var ve bunları zaten duymuş olabilirsiniz:

mso-hide: tümü;

Bu özellik, Outlook masaüstü istemcilerinden her şeyi gizleyecektir. E-posta iletildiğinde kaldırılır, bu nedenle abonelerinizin sıklıkla yararlandığını bildiğiniz bir işlevse, kendi başına kullanmaktan çekinmeyin. "Her ihtimale karşı" kodlayıcıysanız, "mso değilse" koşullu koduyla eşleştirebilirsiniz.

mso-line-height-kuralı: tam olarak;

Bu özellik, Outlook'un satır yüksekliği özelliğinde belirlediğiniz satır yüksekliğini görüntülemesini sağlar. Bu olmadan, Outlook satır yüksekliklerinize mutlaka saygı göstermez. Hassasiyetin önemli olduğu bir sektörde çalışıyorsanız, muhtemelen bu özelliğe çok aşinasınızdır.

mso-padding-alt

Bu biraz daha az yaygın, ama zaman zaman kullanmak zorunda kaldım. Outlook'a özgü dolgu bildirmenizi sağlar. Bu nedenle, bir hücredeki normal dolgu Outlook'ta tam olarak doğru çalışmıyorsa, Outlook için tasarımınıza uyan değerleri ayarlamak için mso-padding-alt kullanabilirsiniz.

mso-ansi-yazı tipi boyutu

Bu sadece ara sıra kullandığım başka bir şey. Outlook'a özgü yazı tipi boyutlarını ayarlamanıza olanak tanır. Bu nedenle, Outlook yazı tipinizi diğer e-posta istemcilerinden biraz daha büyük gösteriyorsa ve sonunda istemediğiniz kısa bir son kopya satırı elde ederseniz, mso-ansi-font-size ekleyin ve kopyanızı sığdıracak bir yazı tipi boyutu ayarlayın.

Kullanabileceğiniz çok daha fazla MSO özelliği var, bu yüzden devam edin ve sizin için bir oluşturma sorununu çözecek herhangi bir şey olup olmadığına bakın.

VML

VML, Vektör İşaretleme Dili anlamına gelir. Bu, Microsoft'un SVG sürümüdür, ancak dil değer kaybetmiştir ve çok nadiren kullanılmaktadır (e-posta!). Microsoft, çevrimiçi olarak arşivlenen VML belgelerine sahiptir, bu nedenle, hala desteklendiği Outlook'ta vektörler oluşturmak için nasıl kullanılacağını arayabilirsiniz. Teorik olarak, Microsoft "One Outlook" modeline geçtiğinde VML'yi geride bırakabileceğiz.

VML ad alanı bildirimini eklediğinizden emin olun. VML'yi ihtiyacım olduğunda kullanabilmek için genellikle onu ortak şablon şablonumdaki <html> öğesine ekliyorum:

<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">

Buna sahip olduğunuzda, MSO koşulları içinde kodunuza herhangi bir VML ekleyebilirsiniz:

<!--[if mso]>
    <v:rect fillcolor="blue" stroked="false" style="width:200px; height:50px;"></v:rect>
 <![endif]-->

Bu kod, 200 piksele 50 piksel olan mavi bir dikdörtgen oluşturacaktır. Belki bir e-postada gerçekten kullanabileceğiniz bir şey değil, ancak kodunuza, arka plan resimlerinize ve arka plan gradyanlarına köşeleri yuvarlatılmış düğmeler eklemek için VML'yi kullanabilirsiniz. Campaign Monitor, arka plan resimleri veya köşeleri yuvarlatılmış düğmeler oluşturmanıza yardımcı olmak için Stig tarafından oluşturulan iki araca sahiptir. Bunların, yeni öğrenirken VML eklemenin harika bir yolu olduğunu buldum.

Outlook'ta CSS resmini desteklemek için sahte mutlak konumlandırma, gölge efektleri veya bir geri dönüş oluşturmak için VML'yi de kullanabilirsiniz. Bir kez daldığınızda VML ile yapabileceğiniz çok şey var.

Uzun yaşa ve e-posta gönder

Outlook, uzun zamandır e-posta pazarlamacılarının baş belasıydı, ancak olması gerekmiyor.

Doğru araçlarla Outlook'ta doğru şekilde oluşturulan güzel e-postalar oluşturabilirsiniz. Outlook kodlama parçalarınızı oluşturmak için bu gönderideki kaynaklara göz atın ve Litmus Builder ve E-posta Önizlemeleri ile bunları e-postalarınızda test edin. Outlook için kodlamayı çözülmeyi bekleyen bir bulmaca olarak düşünün ve kendinizi Outlook'u ve onun tüm tuhaflıklarını severken bulabilirsiniz.

E-postalarınızı Outlook'ta Litmus ile test edin

Gönder'e basmadan önce e-postalarınızın Outlook'ta nasıl görüneceğini görün ve sorunları giderin. Litmus ile abonelerinizin etkileşimde bulunabileceği piksel mükemmelliğinde e-postalar oluşturduğunuzdan emin olun.

Ücretsiz denemenizi başlatın →