Menyampaikan Episode 4: Memahami Gambar Latar Belakang di Email

Dalam episode Menyampaikan ini, kita akan melihat teknik penting untuk desainer email: gambar latar belakang yang sederhana—namun kuat. Pelajari mengapa gambar latar belakang penting, cara mengkodekannya menggunakan berbagai teknik, dan bagaimana berbagai metode tersebut dibandingkan di berbagai klien email. Episode ini adalah pendamping dari Panduan Utama kami yang baru-baru ini diperbarui untuk Gambar Latar Belakang di Email. Simak tips, trik, dan kodenya.

Pastikan untuk berlangganan Menyampaikan di iTunes atau Spotify untuk mendengarkan episode mendatang dan bergabung dengan percakapan di Twitter menggunakan tagar #DeliveringPodcast.

Transkrip Episode

Ada banyak cara untuk menambahkan visual yang menarik ke kampanye email.

Meskipun CSS memungkinkan banyak opsi gaya yang berbeda, terkadang Anda hanya membutuhkan gambar yang bagus. Tapi apa cara terbaik untuk menggunakan gambar dalam email? Dalam episode Menyampaikan ini, kita akan melihat teknik penting untuk desainer email: gambar latar belakang yang sederhana—namun kuat.

Saya Jason Rodriguez dan selamat datang di Delivering, podcast tentang pemasaran email dan tempatnya di dunia. Pengiriman dipersembahkan oleh Litmus, platform industri terkemuka untuk pemasar email. Bergabunglah dengan lebih dari 600.000 profesional email yang menggunakan Litmus untuk membuat, meninjau, menguji, dan melacak kampanye pemasaran email yang lebih baik. Cari tahu lebih lanjut dan dapatkan uji coba 7 hari gratis di Litmus.com.

Gambar adalah pokok dari kampanye pemasaran email. Mereka digunakan untuk pemotretan produk, ilustrasi lucu, logo, ikon, dan—dalam beberapa kasus—untuk keseluruhan email itu sendiri. Khususnya di dunia ritel, pemasar cenderung merancang kampanye sepenuhnya dalam alat seperti Photoshop, mengiris gambar-gambar itu, dan membuangnya ke HTML sebelum mengirim ke pelanggan. Semua informasi—berita utama, salinan, ajakan bertindak, apa pun—ada di dalam gambar.

Ini adalah cara yang baik untuk mematuhi pedoman merek dan menghasilkan email dengan cepat, tetapi menggunakan gambar dengan cara ini memiliki beberapa kelemahan utama.

Yang pertama adalah banyak klien email menonaktifkan gambar secara default. Gambar—dan semua konten—dalam email benar-benar ditinggalkan oleh klien email, menghasilkan kampanye kosong yang terlihat rusak bagi banyak pelanggan.

Kedua, pelanggan yang menggunakan teknologi bantu, seperti perangkat lunak pembaca layar, tidak akan dapat melihat konten dalam email.

Dalam kedua kasus tersebut, semua salinan, penawaran, dan nilai yang Anda habiskan untuk dimasukkan ke dalam kampanye email Anda pada dasarnya sia-sia. Harus ada solusi yang lebih baik, bukan?

Masukkan gambar latar belakang.

Gambar latar belakang hanyalah gambar, seperti gambar lainnya dalam email. Mereka adalah file yang diunggah ke server dan ditautkan dalam kode. Perbedaannya adalah gambar latar diterapkan bukan dengan tag gambar HTML, tetapi sebagai atribut atau CSS pada elemen HTML lainnya.

Ada empat cara untuk mengkodekan gambar latar belakang, masing-masing dengan pro dan kontra.

Yang pertama, dan metode yang lebih tradisional, adalah dengan menerapkan atribut latar belakang ke sel tabel. Nilai atribut hanyalah URL yang mengarah ke gambar. Metode ini keren karena cukup didukung di seluruh klien email. Kejatuhan utama, bagaimanapun, adalah bahwa itu tidak terlalu fleksibel. Anda tidak dapat mengontrol ukuran gambar latar belakang Anda dan gambar akan, secara default, berulang di seluruh elemen Anda.

Anda juga dapat memuat gambar latar belakang menggunakan CSS. Dua teknik berikut menggunakan metode yang sama, tetapi diterapkan secara berbeda.

CSS memiliki sejumlah properti latar belakang, terutama: background-image, background-repeat, background-position, background-size, dan background-color. Ada juga properti steno latar belakang yang sangat membantu.

Dengan menggunakan properti ini, Anda dapat menyertakan URL ke gambar, mengontrol bagaimana gambar itu diposisikan dan apakah gambar itu berulang atau tidak, serta menyertakan warna mundur saat gambar tidak dimuat.

Cara pertama untuk menggunakan latar belakang CSS adalah dengan menyematkan properti tersebut dalam blok gaya di kepala email Anda. Cukup targetkan elemen HTML seperti sel tabel atau div, dan lakukan. Metode ini mudah untuk dikodekan, dibaca, dan dipelihara, tetapi gaya yang disematkan tidak didukung di semua klien email.

Metode yang lebih kuat adalah dengan memasukkan properti tersebut sebaris pada elemen HTML Anda. Ini bisa menjadi berantakan jika Anda menggunakan gambar latar belakang pada beberapa elemen tetapi, karena kami adalah geeks email dan terbiasa menggunakan gambar sebaris, itu masih dapat dikelola dengan sempurna.

Cara terakhir untuk memasukkan gambar latar belakang dalam email adalah dengan menggunakan apa yang disebut "latar belakang anti peluru". Latar belakang antipeluru dibangun di atas metode atribut HTML dengan juga menyertakan VML—atau Bahasa Markup Vektor—dalam kode. VML adalah bahasa Microsoft eksklusif yang digunakan dalam produk Office seperti Outlook. Dengan menerapkan gambar latar belakang di VML, mereka akan bekerja di Microsoft Outlook, yang belum tentu benar untuk metode lain yang telah dibahas sebelumnya.

Kelemahan utama dari penggunaan VML adalah tidak mudah diakses atau terdokumentasi dengan baik, dan menambahkan banyak kode yang, sejujurnya, sulit dimengerti. Untuk membuatnya lebih mudah, teman-teman kami di Campaign Monitor sebenarnya telah membuat alat yang luar biasa untuk menghasilkan latar belakang antipeluru. Anda dapat menemukannya, dengan mudah, di background.cm.

Terlepas dari metode mana yang Anda pilih, ada manfaat luar biasa untuk menggunakan gambar latar belakang dalam email daripada gambar yang dikodekan secara tradisional.

Manfaat utamanya adalah aksesibilitas. Dengan menggunakan gambar latar belakang, Anda dapat mengandalkan teks HTML langsung alih-alih gambar untuk semua konten Anda. Teks tidak mengalami pemblokiran seperti gambar, jadi meskipun gambar dimatikan, pesan Anda masih dapat dibaca oleh pelanggan. Dan, bagi pengguna yang membutuhkan pembaca layar, mereka akan dapat mendengar konten yang dibacakan kepada mereka, tidak seperti gambar tradisional.

Anda dapat menggunakan CSS untuk menata konten HTML tersebut sehingga terlihat dirancang dengan baik seperti gambar yang keluar dari Photoshop, dan Anda bahkan dapat menyertakan tombol CTA di sana juga.

Gambar latar belakang, kemudian, digunakan untuk menyertakan gaya visual tambahan, apakah itu gradien sederhana, beberapa bidikan produk mewah, atau pola berulang. Mereka bekerja bersama dengan teks HTML untuk membuat email yang indah dan bermanfaat.

Yang lebih keren lagi adalah Anda dapat melakukan hal-hal yang lebih canggih seperti menyertakan GIF animasi sebagai gambar latar, menukar gambar berdasarkan ukuran layar atau perangkat, atau bahkan mengkodekan latar belakang video seperti yang kami lakukan beberapa tahun lalu untuk email pengumuman Litmus Live kami.

Ada banyak hal yang digunakan untuk memanfaatkan gambar latar secara maksimal. Kami baru-baru ini menerbitkan pembaruan untuk Panduan Utama kami untuk Gambar Latar Belakang dalam Email di blog Litmus yang layak untuk dicoba. Ini adalah cara yang bagus untuk melihat kode yang mendukung gambar latar belakang, serta mendapatkan inspirasi untuk memperbarui kampanye Anda sendiri. Buka saja catatan acara hari ini untuk tautannya.

Dan pastikan untuk berlangganan Menyampaikan di iTunes atau Spotify untuk mendengarkan episode mendatang di mana kami menggali lebih banyak teknik untuk membuat email HTML yang lebih baik.