Mengapa Email Saya Terlihat Buruk Dengan Klien Outlook?

Diterbitkan: 2018-07-04

Mari kita hadapi kebenaran. Membuat email adalah tugas yang cukup mudah. Tetapi memformat email-email itu agar kompatibel dengan Outlook adalah tugas yang cukup berat. Infact, lebih sulit dari yang Anda pikirkan.

Outlook adalah klien email yang paling sering digunakan, tetapi kuno, yang pernah Anda temukan. Namun, itu tidak mendukung beberapa kemajuan yang Anda temukan di klien email lain seperti Gmail.

Contoh ini:

Jika Anda telah menggunakan gambar PNG dengan transparansi latar belakang, Outlook akan panik! Ia tidak tahu bagaimana membuat gambar seperti itu. Demikian pula, Anda mungkin bertanya-tanya mengapa tombol bulat Anda (dibuat menggunakan properti CSS radius perbatasan) terlihat Kotak di klien Outlook. Karena Outlook tidak mendukung radius batas dan beberapa properti CSS lainnya.

Berikut adalah alasan mengapa email prospek Anda terlihat buruk dan apa yang dapat Anda lakukan untuk meningkatkan desain email Anda.

Mengapa email saya terlihat buruk dengan Outlook?

Tantangan terbesar bagi pemasar email sekarang adalah membuat template email untuk Outlook. Ini karena, dari Outlook 2007, Microsoft telah berhenti menggunakan Internet Explorer untuk merender email dan mulai menggunakan Microsoft Word sebagai mesin rendering mereka. Pergantian ini paling cocok untuk pengguna kantor Microsoft karena memungkinkan mereka untuk hanya menyalin atau menempelkan konten dari Word atau Excel ke email Outlook. Tapi, membuat skenario sulit untuk pembuat email berbasis HTML. Karena email HTML terlihat berbeda dalam pandangan, untuk mengatasi tantangan tertentu ikuti langkah-langkah di bawah ini untuk meningkatkan kampanye email.

Tantangan dalam rendering email dengan Outlook

Seorang pemasar email perlu mempertimbangkan banyak hal sebelum merancang kampanye email. Dia perlu mengetahui langganan pelanggannya yang menggunakan Outlook. Versi desktop, versi seluler, dan versi web Outlook sangat berbeda satu sama lain dalam merender email. Ketika berbicara tentang rendering email dengan Outlook, berikut ini adalah hal-hal yang harus diperhatikan.

Mengapa Gambar menjadi Terpotong dan Memuat lambat

Dalam hal penyertaan gambar dalam email, Outlook memiliki batasan tertentu pada ukuran gambar.

Buletin email memainkan peran utama dalam kampanye pemasaran email. Mereka dibuat dinamis dengan menambahkan gambar ke dalamnya. Terkadang saat gambar panjang ditambahkan ke template kampanye, gambar tersebut akan terpotong atau diskalakan ulang di pihak penerima. Ini karena Outlook memotong bagian atas gambar yang melebihi tinggi 1728px. Jadi, dalam hal ini, kita perlu mengubah ukuran gambar di bawah 1728px agar tampak tanpa kliping.

Dalam situasi di mana gambar tidak dapat diubah ukurannya, alternatif terbaik adalah memotong gambar menjadi dua gambar terpisah dan kemudian menggunakannya dalam kampanye.

Gambar tidak diubah ukurannya

Outlook tidak berfungsi dengan baik dengan gambar yang dibatasi dengan HTML. Artinya, jika template email ditambahkan dengan gambar yang diubah ukurannya menggunakan HTML, Outlook akan menampilkan gambar hanya dalam ukuran aslinya, bukan dalam nilai yang diubah ukurannya. Jadi, kita perlu memastikan bahwa gambar diubah ukurannya dengan baik sebelum digunakan dalam otomatisasi email mana pun.

Gambar Latar Belakang

Strategi terbaik untuk membuat pelanggan 'wow' adalah membuat email dengan gambar latar belakang yang menampilkan merek tersebut. Kita dapat membuat gambar latar belakang lebih terarah dengan melapisi teks langsung pada gambar. Teks langsung juga akan membantu kami menyampaikan tujuan email bahkan saat pelanggan tidak ditampilkan dengan gambar.

Namun, Outlook tidak mendukung gambar latar belakang dengan HTML. Kita perlu menggunakan VML (Vector Markup Language) agar gambar latar dapat dilihat oleh pelanggan.

Masukkan kode di bawah ini di tag <body> HTML Anda untuk gambar latar belakang untuk menutupi seluruh jendela email

 <div> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="/IMAGE.png" color="#000000"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="IMAGE.png">

Kode di atas bekerja dengan sempurna dalam menampilkan gambar latar belakang dengan email yang dibuka di Outlook 2007, 2010 dan 2013. Tetapi Windows Mail 10 memerlukan beberapa modifikasi dalam kode untuk menambahkan gambar dengan sumbernya yang memungkinkan gambar latar belakang.

Kode di bawah ini akan memungkinkan lapisan atas gambar menjadi transparan dan membantu memperbaiki gambar latar belakang.

 <td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" src="/Image Live URL Here" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"> <v:fill opacity="0%" color="#f7901e" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> <!-- HTML Content Here --> </div> <!--[if gte mso 9]> </v:textbox> </v:fill> </v:rect> </v:image> <![endif]--> </td>

GIF animasi tidak cocok

Video berbicara lebih dari kata-kata.

Namun, secara teknis, template email membutuhkan pengkodean yang rumit untuk mendukung video. Memikirkan alternatif, sebagai pemasar email, saya melihat GIF sebagai opsi dinamis. GIF adalah gambar animasi untuk menyampaikan pesan dalam bentuk yang paling sederhana. Outlook tidak mendukung GIF.

Gambar GIF dimuat tetapi hanya bingkai pertama GIF yang diberikan kepada pelanggan.

Jika Anda memiliki pelanggan prospek dalam daftar email, pastikan bingkai pertama gambar berbagi konteks utama GIF.

Pertimbangkan untuk menggunakan bagian animasi untuk menjadi keuntungan tambahan bagi pelanggan dengan klien email lainnya.

Properti radius perbatasan

Berbicara tentang pemasaran email, tombol Call to action adalah fitur yang membuat email menghasilkan lead. Berapa kali kita mengklik tombol CTA berujung bulat?

Properti radius perbatasan adalah properti CSS umum tetapi ini tidak berfungsi dengan baik dengan Outlook. Dengan Outlook, pelanggan diberikan tombol CTA dengan batas persegi.

Ruang Kosong Tambahan

Terkadang ruang kosong di atas gambar seperti yang biasa kita lihat di opsi pratinjau cetak setelah email dirender dengan Outlook.

Seperti yang dikatakan sebelumnya di blog, ini karena Outlook 2007 menggunakan Microsoft Word untuk merender email HTML.

Oleh karena itu email terlihat sedikit berbeda dari desain sebenarnya.

Masalah Font Utama

Jika perangkat pelanggan tidak memiliki gaya font utama, Outlook akan merender seluruh email dalam Times New Roman, mengabaikan font cadangan yang disebutkan dalam kode.

 <!--[if mso]> <style> h1 { font-family: Primary font, Fallback font; } </style> <![endif]-->

Template email harus sempurna

Anda menjalankan kampanye email untuk toko eCommerce. Template yang Anda rancang akan membantu dalam mengirim email yang efektif karena, ini bukan pemasaran lapangan tradisional lama di mana pelanggan dapat bertemu langsung dengan Anda.

Penampilan orang pemasaran menentukan kredibilitas merek. Jadi, apa yang kami kirimkan sekarang untuk mewakili merek kami?

Email. Template desain email Anda memberikan kesan pertama merek Anda kepada pelanggan. Semakin baik tampilan email dengan kontennya, semakin baik mereknya

Namun, kami tidak mendapatkan kebebasan menggunakan opsi format lanjutan untuk membuat email kami terlihat menarik. Kita mungkin melihat email terlihat sempurna di Outlook, tetapi itu tidak akan menjadi skenario ketika diberikan oleh penerima email lain.

Anda harus tetap menggunakan tabel di html email Anda. Jangan mencoba menggunakan elemen div dengan posisi dan float karena Outlook tidak mendukungnya. Sayangnya tidak ada solusi untuk ini sampai sekarang.

Opsi berhenti berlangganan adalah suatu keharusan

Mengelola toko eCommerce, kami selalu ingin membuat pelanggan kami terlibat dengan merek kami.

Bagaimana cara melakukannya?

Buletin. Berikan informasi potensial kepada pelanggan tentang tren dan pembaruan di ceruk bisnis Anda.

Tetapi pada akhirnya pelangganlah yang memutuskan untuk mengikuti merek Anda atau tidak. Setelah pelanggan berlangganan dengan kami harus diberikan opsi untuk keluar dari daftar berlangganan kapan saja.

Tombol berhenti berlangganan adalah suatu keharusan di setiap buletin yang kami kirim ke pelanggan kami dan jika pelanggan kami tidak dapat melihat tombol ini,
Mengharapkan Apa?
Kita mungkin terkena Spam!

Mengirim email dari Outlook membuat merek kami berada pada risiko ini karena tidak memberikan opsi standar ini.

Tautan diubah menjadi teks berwarna Biru/Ungu yang Digarisbawahi

Sebagai pemasar email, kita perlu memanfaatkan sepenuhnya email yang kita kirim ke pelanggan.

Kami dapat menyertakan tautan berlangganan, tautan ke blog kami yang sedang tren, tautan pengalihan ke situs web kami untuk mencapai keterlibatan pelanggan.

Saat email HTML dikirim dari Outlook, tautan tersebut muncul dalam teks biru/ungu yang digarisbawahi saat dilihat di klien email yang berbeda.

Untuk menghindari masalah ini, gunakan tag <font> dan bungkus teks dengan tag <span> dan atribut gaya.

Coba gunakan kode berikut-

 <a> <span> <font color="#E3A216"> Click me </font> </span> </a>

Outlook mungkin baik-baik saja untuk mengisi kotak masuk pribadi Anda.

Tapi, Berbicara bisnis- Lihat di luar Kotak.