Email Pixel Art: Taktik Desain Bertahan Paling Langka dan Paling Keren

Diterbitkan: 2018-09-19

Pemblokiran gambar biasa terjadi, dengan beberapa klien email menonaktifkan gambar secara default dan beberapa pelanggan mematikan gambar untuk menghemat data seluler atau karena alasan lain. Karena itu, pemasar email perlu menggunakan teknik desain defensif untuk memastikan bahwa pesan mereka tersampaikan saat gambar dinonaktifkan.

Desain defensif, yang juga membantu aksesibilitas email, terdiri dari tiga taktik utama:

  1. Menggunakan HTML atau teks langsung sebanyak mungkin, alih-alih menyematkan semua teks Anda ke dalam gambar Anda
  2. Menambahkan teks ALT ke gambar Anda—atau lebih baik lagi, teks ALT bergaya
  3. Menggunakan warna latar belakang pada sel tabel

Mari kita fokus pada taktik terakhir itu.

Salah satu hal besar yang terjadi ketika gambar diblokir adalah email Anda kehilangan strukturnya. Email menjadi rata dan semuanya mulai kabur bersama. Menggunakan teks HTML dan menata ukuran dan warna teks ALT Anda dapat membantu membuat struktur dan hierarki, tetapi warna latar belakang bahkan lebih kuat.

Menambahkan warna latar belakang ke sel tabel membuat spanduk, blok konten, dan penting untuk membuat tombol antipeluru. Email Twitter ini menunjukkan bagaimana warna latar belakang pada sel tabel dapat mempertahankan integritas desain email saat gambar diblokir.

Desain defensif di email Twitter

Itu bagus, tetapi sel tabel berwarna latar belakang dapat melakukan lebih banyak—lebih banyak lagi. Selain digunakan bersama dengan teks HTML untuk membuat konten email yang tidak terpengaruh oleh pemblokiran gambar, warna latar belakang sel tabel dapat digunakan sebagai pengganti gambar.

Anda melakukan ini dengan membuat mosaik dari serangkaian tabel bersarang dengan warna latar belakang yang diterapkan ke sel tabel. Anda kemudian mengiris gambar sehingga setiap irisan pas dengan sempurna ke dalam sel tabel mosaik Anda. Dengan begitu, ketika gambar overlay diblokir dan menghilang, mosaik yang mendasari sel tabel berwarna muncul.

Contoh Seni Piksel Email

Untuk mendemonstrasikan kekuatan mosaik email, berikut adalah beberapa contoh, masing-masing menampilkan email dengan gambar yang diaktifkan di sebelah kiri dan gambar yang dinonaktifkan di sebelah kanan:

Mothercare menciptakan seni piksel kereta dorong mereka di email ini, yang juga memanfaatkan teks ALT gaya secara bebas di seluruh.

seni piksel email di email Mothercare

Pizza Express menggunakan seni piksel dalam email ulang tahun yang dipicu ini, yang juga menyertakan gambar yang dipersonalisasi dan teks ALT bergaya personal yang sesuai.

seni piksel email di email Pizza Express

PlayStation Selandia Baru menggunakan mosaik email untuk membuat simbol Autobots, dengan cerdik memainkan slogan "robot yang menyamar" Transformers.

email pixel art di Sony PlayStation Selandia Baru email

Benton Lingerie menangkap sentimen pesan email Hari Ibu, menggunakan seni piksel email untuk membuat hati merah muda yang besar.

email pixel art di Bendon Lingerie email

Desain & Pertimbangan Strategis

Sebelum membuat mosaik email, pertimbangkan masalah desain dan strategi berikut:

1. Seni piksel email bisa menjadi berat , yang dapat menyebabkan email Anda terpotong di Gmail jika email melebihi 102KB. Jadi buat semuanya tetap sederhana, dengan fokus pada gambar seni piksel minimum yang layak.

Misalnya, hati berpiksel Benton Lingerie bisa jadi lebih berkontur dengan penggandaan atau penggandaan jumlah sel tabel. Tetapi eksekusi mereka sangat jelas merupakan jantung dan juga sangat efektif.

2. Seni piksel email bisa menjadi banyak pekerjaan ekstra , jadi umumnya yang terbaik adalah mencadangkannya untuk email bervolume tinggi atau berdampak tinggi. Itu berarti mungkin menggunakannya untuk email siaran utama untuk pengumuman produk baru, kampanye Cyber ​​Monday, dan acara besar serupa. Tetapi itu juga berarti mempertimbangkannya untuk email yang dipicu volume tinggi, seperti email ulang tahun Pizza Express di atas.

Demikian pula, Anda dapat mempertimbangkannya untuk elemen email bervolume tinggi, seperti logo atau elemen footer. Jika Anda melakukan ini, terapkan sebagai sebagian, sehingga Anda dapat mengubah atau memperbarui seni piksel di semua contoh logo atau footer Anda.

Pendekatan mana pun yang Anda pilih, Anda ingin memastikan untuk mendapatkan dampak dari upaya desain ekstra Anda.

3. Seni piksel email tidak selalu kompatibel dengan desain responsif. Bergantung pada cara Anda mengkodekan email responsif Anda, mosaik email mungkin tidak diterjemahkan dari versi desktop ke versi seluler. Menyembunyikan dan menumpuk konten email di versi seluler Anda dapat merusak seni piksel email Anda. Pastikan untuk mempertimbangkan ini saat mendesain mosaik email Anda.

4. Seni piksel email tidak harus mencoba mengganti gambar yang diblokir. Seperti yang kita lihat di contoh PlayStation dan Benton Lingerie, seni piksel email bisa sangat berbeda dari gambar di email. Jangan merasa bahwa Anda selalu harus membuat versi 8-bit dari gambar pahlawan Anda. Terkadang menyampaikan semangat sebuah gambar sama efektifnya—dan mungkin lebih mudah untuk dikodekan dan lebih sedikit untuk disampaikan.

5. Beberapa email cenderung memiliki gambar yang diblokir. Kemungkinan gambar dalam email diblokir tidak seragam. Peluang pemblokiran gambar lebih tinggi di awal hubungan email dan menjelang akhir.

Untuk email pertama yang Anda kirim ke pelanggan, mereka mungkin memiliki gambar yang diblokir untuk pengirim yang tidak dikenal. Itu berarti Anda mungkin ingin mencurahkan lebih banyak upaya untuk desain defensif untuk email sambutan Anda dan untuk email transaksional Anda.

Untuk email yang datang terlambat dalam suatu hubungan—yaitu, setelah lama tidak aktif—gambar mungkin diblokir karena ada di folder spam pelanggan. Itu berarti Anda mungkin ingin melakukan upaya desain ekstra defensif ke dalam email re-engagement dan email izin ulang Anda.

Dalam kedua kasus tersebut, upaya ekstra tersebut dapat mencakup seni piksel email, selain penggunaan teks HTML secara bebas dan teks ALT bergaya.

Optimalkan untuk Pemblokiran Gambar

Litmus Builder memungkinkan Anda untuk dengan mudah membuat kode email dan mempratinjaunya di 70+ aplikasi dan perangkat email. Mengaktifkan dan menonaktifkan gambar dengan satu klik untuk menyempurnakan seni piksel email Anda.

Buat email yang bagus →

Cara Membuat Seni Pixel Email

Dengan pertimbangan tersebut, apa cara terbaik untuk membuat seni piksel email?

Untuk memulai, kami menyarankan:

  • Konverter Gambar ke Tabel
  • Anjing yang Dioptimalkan Email
  • Aplikasi gambar-HTML

Namun, Anda mungkin tidak menemukan itu membantu dalam semua kasus. Lebih sering daripada tidak, kami berharap Anda ingin membuat seni piksel email Anda secara manual.

Jika itu rute yang Anda tuju, berikut adalah langkah-langkah utama yang harus Anda ambil:

  1. Buat sketsa gambar seni piksel email minimum yang layak pada kertas grafik atau dalam perangkat lunak desain pilihan Anda.
  2. Gunakan alat pengiris di Photoshop atau perangkat lunak desain lainnya untuk membagi gambar Anda ke dalam ukuran blok yang diperlukan untuk membuat mosaik email Anda dan menyimpannya sebagai gambar terpisah. Gunakan konvensi penamaan file yang memudahkan untuk menyatukan kembali keseluruhan gambar Anda.
  3. Menggunakan serangkaian tabel yang bersarang di dalam tabel, buat blok di posisi yang Anda perlukan untuk mengakomodasi desain Anda.
  4. Untuk memastikan bahwa gambar irisan Anda cocok satu sama lain dengan mulus, tentukan bahwa cellpadding=“0”, cellspacing=“0”, dan border=“0” disetel untuk tabel Anda.
  5. Terapkan bgcolor yang dibutuhkan ke setiap sel tabel Anda.
  6. Pratinjau email Anda dengan gambar yang dinonaktifkan untuk memastikan itu dirender sebagaimana dimaksud.

Berikut adalah contoh bagus seni piksel email dari buletin EmailWeekly Action Rocket. Pilih "Toggle Images" di antarmuka Litmus Builder untuk melihat email dengan gambar mati.

Taktik Langka dan Tak Terduga

Pemasar email memahami kebutuhan untuk mendesain gambar mati. Kita tahu itu karena 83% merek menggunakan teks ALT untuk gambar email mereka selalu atau sering, menurut Survei Email Negara Litmus 2018 terhadap hampir 3.000 pemasar.

Namun, meskipun menambahkan teks ALT cukup sederhana, membuat seni piksel email sama sekali tidak. Akibatnya, hampir 77% merek tidak pernah menggunakan mosaik email.

Hampir Seperempat Merek Menggunakan Email Pixel Art untuk Melibatkan Pelanggan saat Gambar Diblokir

Untuk merek pemberani, itu adalah peluang. Kelangkaan taktik ini berarti bahwa ini adalah cara yang efektif untuk mengejutkan dan menyenangkan pelanggan dengan memberikan hal yang tidak terduga—dan semakin banyak merek yang mengikuti. Lebih dari 23% merek menggunakan seni piksel email setidaknya jarang, yang naik dari 18% pada tahun 2017.

Ingin lebih banyak sumber daya seperti ini?

Berlangganan Litmus Weekly untuk mendapatkan dosis mingguan inspirasi email, tips, dan trik, langsung di kotak masuk Anda.

Masuk daftar →