4. Bölüm Teslimi: E-postadaki Arka Plan Resimlerini Anlama

Teslim Etme'nin bu bölümünde, e-posta tasarımcıları için önemli bir tekniğe göz atacağız: mütevazı ama güçlü arka plan görüntüsü. Arka plan görüntülerinin neden önemli olduğunu, bunları çeşitli teknikler kullanarak nasıl kodlayacağınızı ve bu çeşitli yöntemlerin farklı e-posta istemcileri arasında nasıl karşılaştırıldığını öğrenin. Bu bölüm, yakın zamanda güncellenen E-postadaki Arka Plan Görselleri için Nihai Kılavuzumuzun bir tamamlayıcısıdır. İpuçları, püf noktaları ve kod için göz atın.

Gelecek bölümleri dinlemek ve #DeliveringPodcast hashtag'ini kullanarak Twitter'daki sohbete katılmak için iTunes veya Spotify'da Teslime abone olmayı unutmayın.

Bölüm Transkript

E-posta kampanyalarına ilginç görseller eklemenin birçok yolu vardır.

CSS birçok farklı stil seçeneğine izin verirken, bazen sadece iyi bir görüntüye ihtiyacınız vardır. Ancak e-postada görsel kullanmanın en iyi yolu nedir? Teslim Etme'nin bu bölümünde, e-posta tasarımcıları için önemli bir tekniğe göz atacağız: mütevazı ama güçlü arka plan görüntüsü.

Ben Jason Rodriguez ve e-posta pazarlaması ve dünyadaki yeri hakkında bir podcast olan Delivering'e hoş geldiniz. Teslim etme, e-posta pazarlamacılar için sektör lideri platform olan Litmus tarafından sağlanır. Daha iyi e-posta pazarlama kampanyaları oluşturmak, incelemek, test etmek ve izlemek için Litmus'u kullanan 600.000'den fazla e-posta uzmanına katılın. Daha fazlasını öğrenin ve Litmus.com'da 7 günlük ücretsiz deneme hakkı kazanın.

Görseller, e-posta pazarlama kampanyalarının temelini oluşturur. Ürün çekimleri, sevimli çizimler, logolar, simgeler ve bazı durumlarda tüm e-postanın kendisi için kullanılırlar. Özellikle perakende dünyasında, pazarlamacılar kampanyaları tamamen Photoshop gibi araçlarla tasarlamaya, bu görüntüleri dilimlemeye ve abonelere göndermeden önce HTML'ye dökmeye eğilimlidir. Tüm bilgiler (başlıklar, metinler, harekete geçirici mesajlar, ne olursa olsun) resimlerin içinde bulunur.

Marka yönergelerine uymak ve hızlı bir şekilde e-posta oluşturmak için iyi bir yoldur, ancak görüntüleri bu şekilde kullanmanın bazı önemli dezavantajları vardır.

Birincisi, birçok e-posta istemcisinin görüntüleri varsayılan olarak devre dışı bırakmasıdır. Bir e-postadaki görseller ve tüm içerik, e-posta istemcisi tarafından kelimenin tam anlamıyla yüklenmeden bırakılır ve bu da birçok aboneye bozuk görünen boş kampanyalarla sonuçlanır.

İkincisi, ekran okuyucu yazılımı gibi yardımcı teknolojileri kullanan abonelerin e-postadaki içeriği deneyimleyemeyecek olmasıdır.

Her iki durumda da, e-posta kampanyanıza harcadığınız tüm kopya, anlaşmalar ve değer esasen boşa gitti. Daha iyi bir çözüm olmalı, değil mi?

Arka plan resimlerini girin.

Arka plan resimleri, bir e-postadaki diğer resimler gibi basit resimlerdir. Bir sunucuya yüklenen ve kodla bağlantılı dosyalardır. Aradaki fark, arka plan resimlerinin bir HTML resim etiketiyle değil, diğer HTML öğelerinde bir nitelik veya CSS olarak uygulanmasıdır.

Arka plan resimlerini kodlamanın her birinin artıları ve eksileri olan dört yolu vardır.

İlk ve daha geleneksel yöntem, arka plan özniteliğini bir tablo hücresine uygulamaktır. Özelliğin değeri, yalnızca resme işaret eden URL'dir. Bu yöntem harika çünkü e-posta istemcileri arasında oldukça iyi destekleniyor. Bununla birlikte, en büyük düşüş, çok esnek olmamasıdır. Arka plan resminizin boyutunu kontrol edemezsiniz ve resim varsayılan olarak öğenizde tekrarlanır.

CSS kullanarak arka plan resimleri de yükleyebilirsiniz. Aşağıdaki iki teknik aynı yöntemi kullanır, ancak farklı şekilde uygulanır.

CSS'nin bir dizi arka plan özelliği vardır, en önemlisi: arka plan görüntüsü, arka plan tekrarı, arka plan konumu, arka plan boyutu ve arka plan rengi. Ayrıca süper yardımcı arka plan stenografi özelliği de var.

Bu özellikleri kullanarak, bir görüntünün URL'sini ekleyebilir, bu görüntünün nasıl konumlandırıldığını ve tekrarlanıp tekrarlanmayacağını kontrol edebilir ve ayrıca resimler yüklenmediğinde bir geri dönüş rengi ekleyebilirsiniz.

CSS arka planlarını kullanmanın ilk yolu, bu özellikleri e-postanızın başlığındaki bir stil bloğuna gömmektir. Tablo hücresi veya div gibi bir HTML öğesini hedefleyin ve ona sahip olun. Bu yöntemin kodlanması, okunması ve bakımı kolaydır, ancak gömülü stiller tüm e-posta istemcilerinde desteklenmez.

Daha sağlam bir yöntem, HTML öğenize bu özellikleri satır içi olarak eklemektir. Birden fazla öğe üzerinde arka plan resimleri kullanıyorsanız bu biraz dağınık olabilir, ancak e-posta meraklıları olduğumuz ve satır içi resimler kullanmaya alıştığımız için, yine de mükemmel şekilde yönetilebilir.

Bir e-postaya arka plan resimleri eklemenin son yolu, "kurşun geçirmez arka planlar" olarak adlandırılanları kullanmaktır. Kurşun geçirmez arka planlar, koda VML veya Vektör İşaretleme Dili de dahil edilerek HTML öznitelik yönteminin üzerine inşa edilir. VML, Outlook gibi Office ürünlerinde kullanılan tescilli bir Microsoft dilidir. VML'de arka plan resimleri uygulayarak, daha önce tartışılan diğer yöntemler için mutlaka doğru olmayan Microsoft Outlook'ta çalışacaklardır.

VML kullanmanın en büyük dezavantajı, çok erişilebilir veya iyi belgelenmiş olmaması ve açıkçası anlaşılması zor olan birçok kod eklemesidir. Bunu kolaylaştırmak için, Campaign Monitor'deki arkadaşlarımız kurşun geçirmez arka planlar oluşturmak için gerçekten harika bir araç geliştirdiler. Bunu rahatlıkla backgrounds.cm'de bulabilirsiniz.

Hangi yöntemi seçerseniz seçin, geleneksel olarak kodlanmış resimler yerine e-postada arka plan resimlerini kullanmanın inanılmaz faydaları vardır.

Ana avantajı erişilebilirliktir. Arka plan resimlerini kullanarak, tüm içeriğiniz için resimler yerine canlı HTML metnine güvenebilirsiniz. Metin, benzer görüntülerin engellenmesinden muzdarip değildir, bu nedenle görüntüler kapatıldığında bile mesajınız aboneler tarafından okunabilir olacaktır. Ve ekran okuyucuya ihtiyaç duyan kullanıcılar, geleneksel görsellerin aksine içeriğin kendilerine okunduğunu duyabilecekler.

Bu HTML içeriğini, Photoshop'tan çıkan görüntüler gibi iyi tasarlanmış görünecek şekilde biçimlendirmek için CSS'yi kullanabilir ve hatta CTA düğmelerini de buraya ekleyebilirsiniz.

Arka plan resimleri, daha sonra, basit bir degrade, bazı süslü ürün çekimleri veya yinelenen bir desen olsun, ek görsel stil eklemek için kullanılır. Güzel ve kullanışlı e-postalar oluşturmak için HTML metniyle birlikte çalışırlar.

Daha da havalı olan şey, arka plan resimleri olarak hareketli GIF'ler eklemek, görüntüleri ekran boyutuna veya cihaza göre takas etmek veya hatta birkaç yıl önce Litmus Live duyuru e-postamız için yaptığımız gibi bir video arka planını kodlamak gibi daha gelişmiş şeyler yapabilmenizdir.

Arka plan resimlerini sonuna kadar kullanmaya giden çok şey var. Kısa bir süre önce Litmus blogunda E-postada Arka Plan Resimleri için Nihai Kılavuzumuza göz atmaya değer bir güncelleme yayınladık. Arka plan resimlerini destekleyen koda bakmanın ve kendi kampanyalarınızı güncellemek için ilham almanın harika bir yoludur. Bağlantı için bugünün gösteri notlarına gidin.

Daha iyi HTML e-postaları oluşturmak için daha fazla teknik araştıracağımız gelecek bölümleri dinlemek için iTunes veya Spotify'da Teslime abone olduğunuzdan emin olun.