#NoFailMail: En Yaygın 5 E-posta Tasarım Başarısızlığı (ve Bunları Önlemenin Yolları)

Tasarım, e-postayla ilgili en kafa karıştırıcı şey olabilir. #NoFailMail girişimimizi başlatmamızın başlıca nedenlerinden biri, e-posta tasarımcılarının, geliştiricilerin ve pazarlamacıların, e-postayı bozabilecek her şeyi (görüntüler, biçimlendirme veya e-posta istemcileri) ele geçirmesine yardımcı olmaktır.

Çok açık, ama yine de söyleyeceğiz: Bir sonraki e-postanızı göndermeden önce tasarım hatalarını bulup düzeltmelisiniz. Tasarım hataları, okuyucularınızın mesajlarınızı açıp harekete geçmesini engelleyebilir ve marka itibarınızı etkileyebilir.

Bu gönderide, e-postanın başına bela olan beş yaygın e-posta tasarımı başarısızlığı ve bunların her birinin nasıl düzeltileceği hakkında bilgi edineceksiniz.

Başarısızlar üzerine!

E-posta Başarısız # 1. Birden çok ekran boyutu için tasarlamıyor.

E-posta dünyası artık masaüstü ve mobil olarak bölünmüş değil. Aboneleriniz, duvardaki "akıllı" TV ekranından bileklerindeki akıllı saate kadar her şeyde e-postanızı okuyabilir.

Mesajlarınızı okumuyor bile olabilirler. Bunun yerine, Alexa veya Google Home gibi bir ev asistanı veya bir ekran okuyucu e-postalarınızı yüksek sesle okurken dinliyor olabilirler.

Litmus ve Fluid tarafından 2016 yılında yapılan bir araştırma, tüm abonelerin %51'inin akıllı telefonlarında görüntülenmeyen veya iyi çalışmayan e-postaların aboneliğinden çıktığını ve %43'ünün bu e-postaları spam olarak bildirdiğini gösterdi. Bu istatistikler, birden fazla ekran için tasarım yapmanın artık hoş bir şey olmadığını kanıtlıyor.

E-posta Müşteri Pazar Payı'na hızlı bir bakış, mobilin manzaraya nasıl hakim olduğunu gösterir. En iyi 10 e-posta istemcisinden dördü yalnızca mobildir ve tüm e-postaların toplamda %40'ından fazlasının açıldığını iddia ederler:

• Apple iPhone, %29
• Apple iPad, %10
• Samsung Posta 4%
• Google Android, %3

Farklı boyutlarda içerik akışını sağlamak için akışkan tablolar ve resimler kullanan duyarlı ve hibrit tasarım, istemciler ve platformlar arasında düzgün şekilde işlenen e-postalar oluşturmak için en iyi seçenektir.

Ücretsiz e-kitabımız The Ultimate Guide to Email Optimization and Troubleshooting, masaüstü merkezliden mobil için optimize edilmiş biçimlere geçiş yapıyorsanız hangi yaklaşımın en iyi sonucu vereceğini anlamanıza yardımcı olacaktır.

Bu arada, bu beş geçici çözüm, e-postalarınızı daha okunaklı hale getirecek ve abonelerinizin bunları masaüstü bilgisayarlarda mı yoksa mobil cihazlarda mı görüntülediğine göre hareket etmeyi kolaylaştıracaktır:

1. Daha büyük bir yazı tipi boyutu kullanın.
   Kulağa çılgınca geliyor – daha küçük bir ekranda daha büyük bir yazı tipi mi? – ama işe yarıyor. Hedef, insanları içeriğinizi görmek için mesajlarınızı sıkıştırmaya, yakınlaştırmaya veya bir yandan diğer yana kaydırmaya zorlamadan okunabilirliktir. Gövde kopyası için minimum 14 piksel ve başlıklar için 22 piksel yazı tipi boyutu öneririz.
2. Dokunmatik dostu bir CTA tasarlayın.
   Parmak, bilgisayar fareniz kadar hassas değildir. Tıklanabilir bağlantıları düğmelerle değiştirin. Ardından, bu düğmeleri, kabaca ortalama bir parmak ucunun boyutu olan minimum 44 piksel X 44 piksel boyutunda boyutlandırın.
3. Bir sütuna kadar inceltin.
   İki veya üç sütunlu e-posta düzenleri daha küçük ekranlarda iyi okunmaz. Amacınızın e-posta içeriğinizi sıkıştırmadan, yakınlaştırmadan veya yana kaydırmadan okunmasını kolaylaştırmak olduğunu unutmayın. Duyarlı tasarıma geçmeye hazır değilseniz, tek sütunlu bir düzeni seçmek, e-postalarınızı daha fazla ekran boyutunda daha okunabilir hale getirecektir.
4. İçeriğinizi kolaylaştırın.
   Tıklama veya dönüşüm elde etmek için e-postanızdaki tüm bu içeriğe gerçekten ihtiyacınız var mı? Okuyucularınızın neyi tıkladığını ve neyi görmezden geldiklerini anlamak için bağlantı izleme ve diğer araçları kullanın. Bir veya en fazla iki birincil kopya bloğuna gidin. Daha küçük ürün fotoğrafları kümesi yerine güçlü bir kahraman resmiyle dikkat çekin.
   Ayrıca, daha kısa cümleler hedefleyin ve blokları kopyalayın. Standart bir masaüstü biçimindeki beş satırlık kopya, mobil cihazlarda kolayca 10 veya 15'e sarılabilir.
5. Beyaz alanı pompalayın.
   Beyaz boşluk, görüntülerin ve kopya bloklarının etrafındaki boş alandır. Dikkati içerik alanlarına odaklamak, CTA düğmesine daha fazla nefes alma alanı sağlamak ve bir kopya bloğundaki paragrafları bölmek için özgürce kullanın.

E-posta Hatası #2: Mavi bağlantıların tasarımınızı bozmasına izin vermek

Otomatik bağlantı, hem iOS hem de Gmail'de yararlı ancak bazen can sıkıcı bir özelliktir. Tarihler, telefon numaraları ve adresler otomatik olarak tıklanabilir/dokunulabilir mavi bağlantılar haline geldiğinde bunu görürsünüz.

Bunlar, uygun oldukları için düz metin veya kişisel e-postalarda yardımcı olabilir; tek bir dokunuş bir haritayı başlatabilir veya tıkla ve ara veya bir etkinliği bir takvime kaydedebilir. Ancak beyaz olmayan herhangi bir arka plana karşı okunması da zor olabilir. Ayrıca, bu e-posta için markanıza müdahale ederler.

Neyse ki, bu mavi bağlantıları devre dışı bırakmanın yolları var. iOS Mail'de, Apple Mail'in veri algılayıcı seçicisini şekillendirerek mavi bağlantıların üzerine yazabilirsiniz (Nasıl yapıldığını öğrenin). Gmail'deki mavi bağlantılar, yöntem kullanılarak düzeltilebilir (bu, adresleri veya telefon numaralarını bir etikete sarmak ve bu yayılma için stili tanımlamaktır veya CSS'nize Gmail'e özgü bir stil bildirimi ekleyerek tüm varsayılan stillerin üzerine yazabilirsiniz (İşte nasıl yapılır) ).

E-POSTALARINIZIN MAVİ BAĞLANTILARI VAR MI? 90'dan fazla popüler e-posta istemcisinde ve cihazında e-postalarınızı önizleyin ve göndermeden önce mavi bağlantılar dahil hataları tespit edin. Daha fazla bilgi edinin →

E-posta Başarısız 3: Görüntüler ters gitti

Ah, görüntüler. Pek çok yönden yanlış gidebilirler, ancak onları doğru kullandığınızda e-postalarınıza hayat verirler. Bu nedenle, her gün gördüğümüz görüntü hatalarını ve bunların tasarımınızı bozmasını nasıl önleyebileceğinizi kontrol etmek için zaman ayırmaya değer:

1. Yanlış görüntü formatı kullanma
   Buradaki çözüm, ister JPEG, GIF, PNG veya SVG olsun, "doğru" görüntü formatını kullanmak değildir, çünkü tek bir doğru format yoktur. Her format, dosya boyutu, sıkıştırma, kalite ve en iyi kullanım durumu bakımından diğerlerinden farklıdır. En yaygın görüntü formatlarının artı ve eksilerinin ayrıntılı bir karşılaştırması için bkz. “PNG, GIF veya JPEG? E-posta için En İyi Görüntü Formatı Hangisi? Litmus blogunda.
2. Retina ekran için optimize edilmiyor
   "Retina ekran", mobil cihazlarda görülen yüksek DPI ekranlara atıfta bulunmak için Apple tarafından kullanılan bir terimdir. Retina ekran için optimize edilmemiş görüntüler genellikle bulanık veya bulanık görünerek ortalamanın altında bir görsel deneyime yol açar.
   

   

   Görsellerinizi retinaya hazır hale getirmek için, görüntünüzü, görüntülemeyi planladığınızın yaklaşık iki katı büyüklüğünde oluşturun, ardından görüntü boyutunu HTML'de istediğiniz boyut olarak tanımlayın. 300×200 piksellik bir görüntü görüntülemek istiyorsanız, onu 600×400'de oluşturun ve HTML niteliklerini veya CSS özelliklerini kullanarak 300×200 olarak tanımlayın.

   Yine de dosya boyutuna dikkat ettiğinizden emin olun. Retina görüntüleri kullanmak görsellerinizin görünümünü iyileştirirken, dosya boyutlarını da artırır ve bu da görsellerinizin gelen kutusuna yüklenmesinin daha uzun sürebileceği anlamına gelir. Retina için optimize edilmiş birkaç resim kullanıyorsanız, Gmail'de ileti kırpmayı tetikleyebilirsiniz.

Resminizin dosya boyutunu + yükleme süresini test edin Litmus Kontrol Listesi ile resimlerinizi dosya boyutu, yükleme süresi ve bozuk bağlantılar açısından test edebilirsiniz. Ayrıca, kampanyalarınızın popüler e-posta istemcilerinde nasıl göründüğünü anında görün. Bir Kontrol Listesi Başlat →

E-posta Hatası #4: Görüntüler için tasarım yapılmaması kapalı

Görüntülerle ilgili diğer sorun, oluşturulmadıklarında ortaya çıkar. Bazı e-posta istemcileri, kullanıcı izin verene kadar resimlerin yüklenmesini otomatik olarak engeller. Veya, kullanıcılar varsayılan olarak görüntüleri engellemeyi ve hangilerini görmek istediklerini seçmeyi tercih ederler.

Her iki durumda da, resim engelleme, e-postanızın mesaj açılır açılmaz iletişim kurma yeteneğini azaltır. Kullanıcıları resimlerin engelini kaldırmaya zorlayamasanız da, bir resim kapalı mesajının iyi görünmesi için adımlar atabilirsiniz. ALT metin ve kurşun geçirmez düğmelerin uygulanması kolaydır ve onları sürdürecek görüntüler olmadan kaybetmiş olabileceğiniz dönüşümleri kurtarmanıza yardımcı olabilir:

1. Temel veya stil sahibi ALT metni kullanın. ALT metni, görüntüyü tanımlamak için seçtiğiniz ve görüntü engellendiğinde görünen kelimelerin birleşimidir. Bu standart bir uygulama olmalıdır – çoğu e-posta düzenleyicisi size görsel açıklamanızı yazmanız için bir alan sağlar – ancak gelen kutusundaki hızlı bir tarama, hemen hemen tüm diğer e-postaların resimlerinin olduğunu ancak ALT metninin olmadığını ortaya çıkarır. Resimler devre dışı bırakıldığında, ALT metni olmadan resim ağırlıklı bir e-posta şöyle görünür:
   İşte resimlerin etkinleştirildiği aynı e-posta. Müşterinizin neyi gözden kaçırdığını gördünüz mü?
   İyi bir ALT metin uygulaması, yalnızca bir görüntü etiketi değil, etkili bir açıklama yazmaktır. Bir adım ötesine geçmek için stil sahibi ALT metni deneyin. Burada, ALT metninin yazı tipini, rengini, boyutunu, stilini ve ağırlığını değiştirmek için biraz satır içi CSS eklersiniz.
2. Kurşun geçirmez düğmeler kullanın
   Harekete geçirici mesajınızı bir görüntünün içine koyarsanız, görüntüler kapatıldığında görünmez olur. Kurşun geçirmez bir düğme, JPG'ler ve GIF'ler gibi görüntü biçimleri yerine HTML ve CSS kullanır. E-postada görünmek için görüntü işlemeye güvenmezler. Ve işte resimlerin etkinleştirildiği aynı e-posta:

Litmus topluluğu ve ürün müjdecisi Jason Rodriguez, "E-posta Tasarımı için Kurşun Geçirmez Düğmeler için Ultimate Guide" adlı kılavuzunda düğme tasarımına yönelik dört temel yaklaşımı özetliyor. Her yaklaşımın kodlamasını, örneklerini ve artılarını ve eksilerini görmek için göz atın.

E-posta Başarısız #5. Düz metin e-posta için optimize edilmemesi

Hayır, 2000'lerin başındaki Büyük Metin-HTML-Münazarasını yeniden canlandırmayacağız. Ancak düz metin e-posta, özellikle hiçbiri HTML oluşturmayan akıllı saatlerin, ekran okuyucuların ve ev asistanlarının büyümesiyle, e-posta stratejinizde hala önemli bir rol oynamaktadır.

Bu ipuçları, ister tek başına bir mesaj, ister çok parçalı bir MIME mesajının metin versiyonu olsun, ilgi çekici bir düz metin e-posta oluşturmanıza yardımcı olacaktır:

• Kısa ama net başlıklar yazın. Her bir başlığı altındaki kopya bloğundan ayırmak için en az bir satır boşluk kullanın. Kısa çizgi veya eşittir işaretleri gibi tipografik cihazlarla ayarlayın.
• Uzun kopya bloklarını ayırın. Korkunç ve okunamayan gri kopya nehrinden kaçınmak için daha fazla ancak daha kısa kopya blokları kullanın.
• Listelerle bilgi hiyerarşisi oluşturun. Düz metin e-postadaki tüm yazı tipleri aynı yazı tipi ve punto boyutundadır. Bu nedenle, okuyucunuzu kilit noktalara yönlendirmek için daha çok çalışmalısınız. Bir dizideki bilgileri vurgulamak için listeleri kullanın. Her öğeyi kısa çizgi (–) veya yıldız işareti (*) gibi metin dostu bir adla ayarlayın. (Maddeler düz metinde çalışmaz.)
• Boşluğu özgürce kullanın. Beyaz boşluk, kolay tarama için ilgili bilgileri düzenler. Kopyalama blokları, harekete geçirici mesajlar ve üstbilgiler veya idari altbilgiler arasında geniş kenar boşlukları ve fazladan satır sonları kullanın.
• CTA'ları tanımlayın. İnsanlar CTA düğmelerine sahip olmadan önce ne yaptı? Onları diğer kopyalardan ayırmak için beyaz boşluk gibi dikkat çekiciler ve onları harekete geçirmek için oklar (>> ve <<) gibi tipografik araçlar kullandılar. Uzun CTA listelerinden kaçının ve onları tıklama veya parmak dostu hale getirmek için beyaz boşluklarla çevreleyin.

Bu e-posta, düz metin e-postalar için tüm bu en iyi uygulamaları göstermektedir:

Bu önceki blog gönderilerinde #NoFailMail göndermenin daha fazla yolunu ele aldık: #NoFailMail için daha fazla ipucu ve kaynak

• #NoFailMail: Neden Hatalardan Kaçınmak E-posta Başarısının Anahtarıdır?
• Test Etme En Büyük 5 E-posta Başarısızlığından Kaçınmanıza Nasıl Yardımcı Olur?
• Kaçınmanız Gereken 5 Metin Yazarlığı Başarısızlığı

Bunun gibi daha fazla kaynak ister misiniz? En son e-postalardan haberdar olmak için bültenimize kaydolun.