Her Aboneyi Bir E-posta Arka Plan Resmiyle Kolayca Nasıl Etkilersiniz (+ Bunu Yapacak Kod!)

Yayınlanan: 2021-07-23

E-postalar burada bir resim, orada bir metin bloğu ile biraz öngörülebilir gelebilir… Abone deneyimini canlandırmanın bir yolu mu? Arka plan resimleri. Beklenmedik şeylerdir ve tasarımınıza başka bir boyut ekleyerek e-postalarınızı "popüler" hale getirirler. İyi yapıldığında, e-postanızı bir milyon dolar gibi hissettirirler, ancak çıkarması inanılmaz derecede kolaydır.

Şunlar için okumaya devam edin:

Arka plan resimlerinin faydaları
İlham veren e-posta örnekleri
Tasarım konuları
Arka plan resimleri nasıl kodlanır

Arka plan resimleri nelerdir? (Ve ne anlamı var?)

Arka plan görüntüleri, bir öğenin arka planına veya arkasına uygulanan görüntülerdir. Bir kahraman resmi gibi e-postanın ana odak noktası olmak yerine, genellikle daha incelikli ve kampanyadaki diğer içeriği tamamlayıcı niteliktedirler.

Arka plan resimleri kullanmanın en büyük yararı, bunların üzerine ek HTML içeriği yerleştirmenize izin vermesidir. Bu alanda yalnızca görüntünün kendisinin bulunabileceği diğer görüntülerin aksine, arka plan görüntüleri katmanlama olanakları sağlar, böylece aynı alanda fazladan görüntü, metin veya harekete geçirici mesaj (CTA) bulundurabilirsiniz.

arka plan görüntüsü üzerinde canlı HTML metni ve kurşun geçirmez düğme örneği

Bu metni görüntünün bir parçası olarak eklemek yerine arka plan görüntüsünün üzerinde canlı HTML metni kullanmak, görüntüler kapatıldığında mesajınızın okunabilir olduğu anlamına gelir, bu da bunu daha iyi, daha erişilebilir HTML e-postaları oluşturmak için harika bir teknik haline getirir.

Arka plan resimleri, daha iyi bir okuma deneyimi sağlayan kampanyalar oluşturmaya yardımcı olmanın yanı sıra, zengin tasarım olanakları sunarak kampanyanızı rekabette farklı kılar.

Markaların arka plan resimlerini kullanmanın yaratıcı yolları

Miro , kahraman bölümünün arkasına şekiller içeren bir arka plan resmi yerleştirdi ve e-postanın canlı metin kullanılarak üst üste bindirilen ana başlığına ve mesajlaşmasına dikkat çekti.

Arka plan resmi olan Miro e-postası — Kaynak: Gerçekten İyi E-postalar

Uplers , hizmetlerinde bir indirimi vurgulamak için bir kupon kodunun arkasına yerleştirilmiş bir kupon resmi ile bir arka plan resmi kullandı.

Kupon kodu için Uplers e-posta arka plan resmi — Kaynak: Gerçekten İyi E-postalar

Figma , bu e-postanın gövdesine ince bir yinelenen arka plan deseni ekleyerek bizi yeni beyaz tahta ürünleriyle tanıştırdı. Sahip oldukları desen, üründe bulunan arka planı yansıtır.

E-postadaki Figma arka plan resmi — Bu e-postayı Litmus Builder'da görüntüleyin

Chipotle , bu etkileyici jumbo kahraman ve vücut bölgesinin arkasına, ürün fotoğrafçılığı ve bir çizgi deseni de dahil olmak üzere bir jumbo arka plan görüntüsü yerleştirdi. Bu görüntünün üst kısmında, şeffaf arka plana sahip hareketli bir GIF ve gövde alanında canlı metin bulunur.

İnce arka plan resmine sahip Chipotle Arkadaş Günü e-postası — Kaynak: Gerçekten İyi E-postalar

Animasyonlu GIF'ler, canlı metin ve animasyonlu arka planın üstüne yerleştirilmiş bir CTA düğmesi dahil olmak üzere kahraman içerikli şenlikli koleksiyonları tanıtan Adobe Stock'taki bu örnekte olduğu gibi arka plan görüntüleri olarak da kullanılabilir.

Animasyonlu GIF arka plan resmine sahip Adobe Stock e-postası — Kaynak: Gerçekten İyi E-postalar

Tasarım konuları

Arka plan görüntüsünü uygulamayı düşünürken, dikkate alınması gereken bazı tasarım hususları vardır.

Zıtlık

Tüm okuyucuların arka plan görüntülerinin üzerine yerleştirilmiş içeriğin değerini almasını sağlamak için zıtlıklara dikkat etmek önemlidir. Görüntüye düz bir renkle aynı şekilde davranın ve görüntünüzdeki renkleri içeriğinizin renklerine karşı test edin.

Figma kullanarak tasarım yapıyorsanız, Web İçeriği Erişilebilirlik Yönergelerini (WCAG) karşılayıp karşılamadığınızı görmek için Renk Körlüğü ve Kontrast gibi eklentiler ekleyebilirsiniz. Tasarımlarınızdaki renkleri test edebileceğiniz WebAim'in Kontrast Denetleyicisi gibi bir dizi web uygulaması da vardır.

Basitlik

Okunabilirliği sağlamanın başka bir yolu da işleri basit tutmaktır. Meşgul arka planlar, resminize yerleştirdiğiniz herhangi bir canlı metnin değerini elde etmeyi zorlaştırabilir. Bu nedenle, arka plan resminizi bir özellikten ziyade bir geliştirme olarak düşünmek genellikle yararlıdır.

Düz renk geri dönüşü

Tüm e-posta istemcileri arka plan görüntülerini dikkate almayacağından, tek renkli bir geri dönüş tasarlayın. Görüntülerinizi desteklemeyen e-posta istemcileri kullanan aboneler, düz renkle yine de harika bir deneyim yaşayabilir. Tasarımınıza uyan ve ön plan öğeleriyle iyi bir kontrast oluşturan bir yedek renk seçtiğinizden emin olun.

E-postada arka plan resimleri nasıl kodlanır

Kodu gözden geçirmeden önce, hangi istemcilerin arka plan CSS stili oluşturacağını ve hangilerinin bir VML yedeğinin yardımına ihtiyaç duyduğunu görelim.

İyi haber: Web posta istemcilerinin artık bu yöntemi tam olarak desteklemesiyle, satır içi arka plan CSS desteği iyileştirildi, yani arka plan HTML özniteliği artık gerekli değil.

Kötü haber: Ne yazık ki, Windows 10 Mail arka plan resimlerini sevmiyor. Satır içi CSS'yi veya kullanımdan kaldırılan HTML arka plan özelliğini oluşturmaz. Ve VML uygulamak, 'görüntü görüntülenemiyor' hata mesajıyla işleme sorunlarına neden olur.

Windows 10 Mail abonelerinin edindiği deneyim konusunda endişeleriniz varsa, VML'den ayrılmayı düşünün. Bu, yedek arka plan renklerinin Microsoft Outlook Suite hedef kitlenize ekstra dekorasyon olmadan harika bir e-posta okuma deneyimi sunmasını sağlar.

Windows 10 Mail'de e-posta arka plan resimleri nasıl görünür?

Arka plan resimleri için e-posta istemci desteği

E-posta istemcisi	Satır içi CSS kullanma	VML'yi kullanma
elma postası 14	✓	✘
Office 365 (Mac)	✓	✘
Office 365 (Windows)	✘	✓
Outlook 2016 (macOS 10.12.6)	✓	✘
Outlook 2013, 2016, 2019 (Windows 10)	✘	✓
Windows 10 Posta	✘	✘
Gmail Uygulaması (Android 10)	✓	✘
Gmail Uygulaması (iOS 13.4.1)	✓	✘
Görünüm (Android 7.0)	✓	✘
Görünüm (iOS 12.0)	✓	✘
Samsung Posta (Android 7.0)	✓	✘
iPad 11 Air (Gen 4 iOS 14.2)	✓	✘
iPhone 12 (iOS 14.2)	✓	✘
AOL Posta (Kenar)	✓	✘
Gmail (Chrome)	✓	✘
Ofis 365	✓	✘
Outlook.com	✓	✘
Yahoo! Posta	✓	✘

Aboneleriniz hangi e-posta istemcilerini kullanıyor?

Litmus Email Analytics ile kendi e-posta istemcisi pazar payınıza bir göz atın. Arka plan resimlerinizi hangi e-posta istemcileri için optimize etmeniz gerektiğini görün. (İpucu: Windows 10 Mail düşükse, acele etmeyin.)

Daha fazla bilgi edinin →

Artık bunu aradan çıkardığımıza göre, hadi koddan bahsedelim!

E-postalarınıza arka plan görüntüsü getirmenin eğlenceli yanlarından biri, bunu başarmanın birkaç farklı yolu olmasıdır. Küçük bir bölümü doldurabilir veya e-postanızın gövdesini kapatabilir, tek bir resim veya tekrar deseni kullanabilir ve okuyucunuzun masaüstünde, mobilde, Açık Modda, Karanlık Modda veya hatta ne zaman olduğuna bağlı olarak arka plan görüntülerinizi değiştirebilirsiniz. resminizin üzerinde gezinirler veya yuvarlanırlar.

Her tekniğin farklı bir yaklaşıma ihtiyacı vardır, bu yüzden bunları kodlamanın en iyi yollarına bir göz atalım.

Genişlik tanımlı veya sabit arka plan resmi

sabit genişlikli arka plan

Arka plan resimleri uygularken, kodunuzu içeren tablonun hücresine eklemek her zaman en iyisidir. <table> veya <body> gibi başka herhangi bir HTML öğesine başvurmak, bazı e-posta istemcilerinden destek alma olasılığı düşüktür. Bunun nasıl görünmesi gerektiği aşağıda açıklanmıştır:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Burada görüntü, satır içi CSS stillerine background-size:cover dahil edilerek hücrenin genişliğine ve yüksekliğine uyacak şekilde yapılır ve ardından merkeze konumlandırılır. Bu stilleri eklemek, 2x görüntü kullanmanıza olanak tanır; bu, retina ekranlarda net işleme göreceğiniz anlamına gelir ve kapsayıcı farklı cihazlarda görüntülenmek üzere yeniden boyutlandırılsa bile, kapsayıcınıza tam olarak sığacak şekilde yeniden boyutlandırılacaktır.

Ancak bu, görüntünüz çok küçükse veya kapsayıcıyla orantılı değilse, pikselli veya gergin görünebileceği anlamına da gelir. Özellikle de bu fotoğrafçılıksa.

Arka plan resminiz çalışıyor mu?

Arka plan resimleri kodumuzun Gmail ve Outlook gibi en popüler e-posta uygulamalarında kendi e-postanızda nasıl çalıştığını görün.

Daha fazla bilgi edinin →

Bugün, çoğu e-posta istemcisi satır içi CSS arka plan stilini destekler, böylece arka plan kısayolu CSS özelliğini kullanarak arka plan resminizi ve yedek renginizi ekleyebilirsiniz. Başka bir deyişle, bunları basitçe 'arka plan' stiline uygulayın. Ne yazık ki, daha fazla arka plan stili satır içi kodlama yaparken steno ile çok iyi çalışmaz, bu nedenle herhangi bir konumlandırma veya boyutlandırmanın ayrı stiller olarak yazılması gerekir. Örneğin, arka plan konumu kullanılarak: merkez; arka plan boyutu: %80; arka plan yerine : merkez/%80; .

Bunun Outlook'ta bir VML yedeği ile çalışmasını sağlama

Masaüstü için Outlook ve Office 365 de CSS arka plan stilleri oluşturmayacağından arka plan resimlerini görüntülemek için biraz yardıma ihtiyaç duyar. Arka plan resmimizin bu e-posta istemcilerinde görüntülenmesini sağlamak için, Stig Morten Myre tarafından Kampanya İzleme için popüler hale getirilen bir teknikten yararlanmamız ve Microsoft'un Vektör İşaretleme Dili'ni (VML) uygulamamız gerekiyor.

Daha önce oluşturduğumuz kodu alarak, gerekli VML'yi ve içeren bir <div> tablo hücremize yerleştiriyoruz:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
           <v:fill type="frame" src="fixed-background.jpg" />
           <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
           <![endif]-->
           <div>
<!--add your content here-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

    </td>
</tr>
</table>

Tekrar etmeden kapsayıcıyı doldurması gereken resimler için vml:fill etiketi içinde 'frame' kullanmamız gerekiyor. Bu şekilde, bu etiket içinde 2x görüntü kullanabilirsiniz. Yalnızca kapsayıcınızın genişliğini v:rect etiketinde satır içi stili kullanarak ayarladığınızdan emin olun (yukarıdaki örnekte 600 piksel olarak ayarlanmıştır).

Kapsayıcınızda dolgu istiyorsanız, bulabileceğiniz bir şey VML'yi kapsayıcıya yerleştirmek dolgunun çökmesine neden olacaktır. Bunu düzeltmenin yolu, VML'yi kapsayıcımızın etrafına sarmaktır, bu nedenle kapsayıcımızı aşağıdaki gibi başka bir tablonun içine yerleştirmemiz gerekir:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
<v:fill type="frame" src="fixed-background.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--add your content here-->
    </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

Yinelenen arka plan resmi

Ayrıca yerleştirdiğiniz kap içinde tekrar eden bir arka plan da ekleyebilirsiniz. Harika bir örnek, e-postanızın gövdesi boyunca bir kalıbı tekrarlamaktır.

yinelenen arka plan resmi örneği

Konteyner hücremize yerleştirdiğimiz görüntü konteynerden daha küçük ise hem yatay hem de dikey olarak otomatik olarak tekrar edecektir. Sadece bir yönde tekrarlamak için, 'arka plan-tekrar' CSS ile stil verin ve yatay olarak tekrarlamak için tekrar-x veya dikey olarak tekrarlamak için tekrar-y değerini ekleyin.

Tüm kabı tamamen tekrar eden bir desenle doldurmak için kod çok basittir:

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    <td style="background: url(repeat-background.png) #B5CFE3;">
        <!--add your content here-->
    </td>
</tr>
</table>

Bunun Outlook'ta bir VML yedeği ile çalışmasını sağlama

Yine, Outlook istemcilerinde arka plan oluşturma işleminizi görmek isterseniz, VML uygulayabilirsiniz. Kod bu sefer biraz farklıdır, VML konteynerin önüne yerleştirilmiştir:

<div>
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="repeat-background.png" color="#ffffff"/>
  </v:background>
  <![endif]-->
  <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;">
     <tr>
        <td align="center" style="background-image: url(repeat-background.png);">
       </td> 
    </tr>
</table>
</div>

Arka planı tekrar yapmak için v:fill etiketini 'tile' türüyle doldurun. Şaşırtıcı değil, Windows 10 Mail'de bazı oluşturma sorunları var ve tekrar eden arka planlarla oluşturma sorunları çok daha çirkin olabilir. Bu nedenle, herhangi bir Windows 10 Mail aboneniz varsa VML'yi dışarıda bırakmak en güvenli yaklaşım olabilir.

Gelişmiş teknikler

Sabit ve yinelenen arka plan görüntüleri, e-posta tasarımlarınızı yükseltmek için birçok fırsat sunar, ancak dahası da vardır:

Kontrast görüntü takası

Artık Karanlık Mod, birden çok e-posta istemcisinde kullanılabildiğine göre ve abone tercihlerine uymak, daha geniş bir kitleye ulaşmanıza ve güven oluşturmanıza yardımcı olur; arka plan resminizi değiştirmek, açık veya Koyu Mod tasarımını tamamlamanın harika bir yoludur. Ve aynı zamanda eğlenceli ve basit bir geliştirme.

kontrast modları

Bunu uygulamak için, Dark Mode medya sorgularına bazı gömülü CSS eklemeniz gerekir. Bu, Karanlık Mod arka plan resminizin bu tür medya sorgusunu destekleyecek e-posta istemcilerinde sunulmasını sağlar:

.darkmode-switch {
            background-image:url(background-dark.png) !important;
            background-color:#111111 !important;
        }

Koyu bir geri dönüş rengi eklemeye değer. Bu, okuyucu harekete geçmeden görüntüleri yüklemeyen e-posta istemcilerine yardımcı olur ve görüntünüz yüklenmediğinde mesajınızın okunabilmesini sağlar.

Şimdi, HTML'nizde, ışık modu arka plan resminizi içeren hücreye sınıfınızı uygulayın. Basit!

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class= "darkmode-switch" style="background: url(background-light.png) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Dikkat edin : Tasarlanması zor ve kodlaması daha da zor olan bir şey, Karanlık Mod ortamında e-postanızın renklerini tersine çeviren ve Karanlık Mod medya sorguları yazmak için harcadığınız tüm zor işleri tamamen göz ardı eden e-posta istemcileridir.

Bu e-posta istemcilerini bir tarafa almak neredeyse imkansız. Bununla birlikte, şeffaflık düzeyine sahip arka plan resimleriyle oynayabilir ve kabınıza ışık modu için beyaz ve Koyu Mod için siyah gibi yüksek kontrastlı bir arka plan rengi uygulayabilirsiniz. Bu, arka plan renginin tersine çevrilmesine izin verecektir. Bunu bir sonraki örnekle denedim:

farklı Karanlık Mod senaryolarında e-posta arka plan resmi

Chevron arka plan resmimin oklarda %30 opaklığı var ve oklar arasında tamamen şeffaf. Bu, rahatsız edici e-posta istemcileri Karanlık Mod oluşturmamın kontrolünü ele geçirdiğinde içeriğin okunabilir olduğu anlamına gelir.

Karanlık Mod için kodlama ve e-posta istemcisi desteği hakkında daha fazla bilgi için, Karanlık Mod E-posta için Nihai Kılavuzumuza bakın.

Etkileşimli arka plan

Aboneleri biraz etkileşimle memnun etmeye ne dersiniz? Okuyucu imlecini içeriğinizin üzerinde hareket ettirirken kapsayıcınızın arka planını değiştirerek basit bir vurgulu veya rollover efektiyle biraz neşe yayabilirsiniz.

e-posta arka plan resmi, fareyle üzerine gelindiğinde veya üzerine gelindiğinde geçiş yapar

Bunun çalışması için biraz gömülü CSS'ye ihtiyacınız var. Bunu <style> etiketinizin içine yerleştirin:

.background-rollover:hover{ 
        background-image: url(background-rollover-b.png) !important; 
        background-color:#020203 !important;
}

Şimdi yapmanız gereken tek şey bu sınıfı tablo hücrenize şu şekilde uygulamak:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class="background-rollover" style="background: url(background-rollover-a.png) #DBE8F0; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Tasarımlarınızın seviyesini yükseltin

Zengin fırsatlarla, e-posta tasarımlarınızı geliştirmek için arka plan resimleri kullanmak, sınırları zorlamak ve e-postalarınızı kalabalığın içinde öne çıkarmak için harika bir yoldur. Bu teknikleri uygulamaya koymanıza yardımcı olmak için, bu gönderide yer alan kodu alabileceğiniz kullanışlı bir kaynak oluşturduk.

E-postalarınızda arka plan görüntülerini nasıl kullandığınızı görmek isteriz—örneklerinizi aşağıdaki yorumlarda paylaşın.

Litmus ile arka plan resimlerinizin çalıştığından emin olun

İşe yaradı mı? Litmus ile arka plan resimlerinizi (ve e-postanızın geri kalanını) 100'den fazla e-posta istemcisinde, uygulamasında ve cihazında önizleyin. Ve markaya uygun, hatasız e-postalara merhaba deyin.

Ücretsiz denemenizi başlatın →

İlk olarak 24 Mayıs 2019'da Jason Rodriguez tarafından yayınlandı. Son güncelleme 21 Temmuz 2021.