Rendering Email Outlook: Bagaimana Saya Belajar Berhenti Khawatir dan Mencintai Outlook

Diterbitkan: 2021-07-02

Kita semua pernah ke sana. Anda membuat email yang indah dengan GIF yang menarik, tombol yang dapat diakses, dan gambar yang menarik. Kemudian Anda mengujinya, dan itu tampak hebat... kecuali di Outlook, yang benar-benar rusak. Orang tidak dapat terlibat seperti yang Anda inginkan dengan email yang rusak.

Outlook telah menjadi wabah pemasar email untuk waktu yang lama, tetapi apakah itu harus? Bagaimana kita bisa bekerja dengannya? Baca terus untuk mengetahui bagaimana saya mulai menyukai Outlook, meskipun banyak kesalahannya. Saya akan membahas:

Versi Outlook
Kiat untuk keanehan Outlook
Kode untuk melakukan perbaikan

Banyak versi Microsoft Outlook

Nama "Outlook" mencakup beberapa klien email yang berbeda dengan beberapa mesin rendering yang berbeda dan setidaknya dua pengaturan tampilan yang berbeda. Semua ini bisa menjadi sakit kepala raksasa jika Anda membiarkannya. Mari selami dan lihat apakah kita bisa meluruskannya sedikit.

Outlook 2007-2019

Ini adalah Outlook versi desktop Windows. Ini menggunakan Word sebagai mesin rendering, yang masuk akal pada saat email seperti menulis surat. Ah, kali lebih sederhana. Tapi, untuk pemasar email, itu tidak memotongnya untuk merender email HTML.

120 DPI (dots per inch) menambah kerumitan. Pengguna Windows dapat memilih 120 DPI untuk meningkatkan resolusi layar mereka. Jika mereka melakukannya, klien email desktop akan menghargai itu dan akan memperbarui gambar dan teks menjadi lebih besar. Yang dapat mendatangkan malapetaka pada email Anda.

Outlook untuk Mac

Ini adalah Outlook versi desktop Mac. Ini menggunakan Webkit sebagai mesin rendering. Yang berarti biasanya setara dengan Apple Mail dan iOS dalam hal rendering email. Jika terlihat bagus di browser Anda, ada kemungkinan besar itu akan terlihat bagus di sini.

Outlook.com dan aplikasi seluler Outlook

Klien ini menggunakan mesin rendering berbasis Webkit atau Webkit, sehingga mereka menyediakan rendering HTML yang baik dan biasanya tidak merusak email Anda.

Outlook Office 365

Ada dua versi berbeda dari Outlook Office 365, klien email desktop dan klien email berbasis web. Versi desktop mirip dengan Outlook 2007-2019 dan menggunakan Word sebagai mesin rendering (sulit untuk email). Klien email berbasis web menggunakan Webkit atau Blink dan membuat email mirip dengan Outlook.com (jauh lebih mudah).

Tidak ada lagi email yang rusak

Pratinjau email Anda di 90+ klien email, aplikasi, dan perangkat—termasuk semua versi Outlook—untuk memastikan pengalaman pelanggan sesuai merek dan bebas kesalahan.

Pelajari caranya →

Satu Outlook untuk mengatur semuanya

Pada bulan Januari, Microsoft mengumumkan visi "Satu Outlook" mereka untuk menggantikan klien desktop dengan satu klien yang berfungsi di mana saja mulai sekitar tahun 2022.

Klien email baru akan didasarkan pada aplikasi web Outlook saat ini. Jadi harapannya tinggi bahwa ia akan memiliki mesin rendering berbasis Webkit dan akan membuat email HTML dengan baik. Sayangnya, semua klien desktop lama itu tidak akan hilang begitu saja ketika itu terjadi, jadi mereka masih harus didukung sampai batas tertentu.

Lakukan atau tidak, tidak ada cobaan

Apakah kepalamu sudah berputar?

Jika ya, mari kita menyaringnya untuk Anda: Kuncinya adalah kami bekerja dengan dua mesin rendering yang berbeda—Word dan Webkit. Webkit lebih mudah dikodekan, dan Word lebih sulit. Tidak ada yang benar-benar baik atau buruk. Mereka hanya membutuhkan pendekatan yang berbeda dan memiliki kebiasaan berbeda yang perlu dipertimbangkan.

Mari kita lihat beberapa masalah rendering umum di klien desktop Outlook dan cara mengatasinya.

Sertakan atribut lebar dan tinggi pada gambar Anda

Outlook tidak mendukung gaya CSS untuk lebar dan tinggi, dan jika Anda tidak menyertakan atribut lebar dan tinggi, Outlook akan menampilkan gambar Anda pada ukuran sebenarnya. Jika Anda menggunakan gambar retina (yang seharusnya), itu berarti Anda akan mendapatkan gambar raksasa yang akan merusak email Anda.

pandangan — Gambar retina tanpa atribut lebar di Outlook membuat email lebih lebar

Sertakan teks ALT

Jangan biarkan pesan keamanan Outlook berbicara untuk gambar Anda. Pastikan untuk menyertakan teks ALT. Terutama karena Outlook tidak menampilkan gambar secara default kecuali orang mengaktifkan fitur tersebut.

Gunakan tabel

Email telah berkembang pesat dan Anda dapat menggunakan blok <div> di banyak klien email, tetapi Outlook bukan salah satunya. Outlook akan mengabaikan sebagian besar gaya yang Anda terapkan ke tag <div> Anda termasuk lebar dan bantalan. Jadi, penting bagi Anda untuk menggunakan tag <table> untuk konten Anda.

Gunakan kode khusus Outlook untuk menyelesaikan masalah rendering

Ini mungkin tidak menyelesaikan semua masalah Anda, tetapi terkadang menyertakan beberapa CSS khusus Outlook dapat membantu Anda memecahkan masalah rendering yang hanya Anda lihat di Outlook. Atau Anda dapat menyembunyikan blok kecil yang tidak berfungsi di Outlook, dan menggunakan kode bersyarat untuk memperlihatkan versi yang akan berfungsi untuk versi Outlook tertentu. (Lebih lanjut tentang kode bersyarat nanti.)

Tambahkan ketinggian garis ke gambar kecil atau sel tabel

Outlook menetapkan ketinggian minimum pada sel tabel dan gambar. Jadi, jika Anda menggunakan sel tabel sebagai pengatur jarak atau memiliki gambar kecil, pastikan untuk menambahkan atribut tinggi garis ke elemen yang sama dengan tinggi yang Anda inginkan. Sebagai contoh:

<tr>
     <td style="font-size: 5px; line-height: 5px; mso-line-height-rule: exactly;">&nbsp;</td>
</tr>

Lakukan koreksi untuk masalah penskalaan DPI

Pada komputer Windows, ada pengaturan global yang dapat diubah orang (atau dalam beberapa kasus, ditetapkan lebih tinggi secara default) yang meningkatkan skala teks dan elemen grafis agar lebih besar dan lebih mudah dibaca. Ini bagus untuk aksesibilitas, tetapi tidak begitu bagus untuk Outlook karena hanya beberapa elemen yang ditingkatkan sementara yang lain tidak.

Untungnya, ada perbaikan. Pertama, Anda harus menambahkan namespace XML ke tag HTML:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

Kemudian, tambahkan beberapa kode untuk memperbaiki penskalaan gambar tepat sebelum tag </head>:

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

Dan terakhir, pastikan untuk menyertakan lebar yang ditetapkan sebagai properti CSS dengan piksel dan bukan sebagai atribut pada tabel Anda.

✗ Tidak ini dengan width =”600":

<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="600">

Ya, seperti ini dengan style="width:600px;" :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">

Itu akan memperbaiki sebagian besar masalah Anda untuk 120 klien DPI. Lihatlah perbandingan berdampingan ini sebelum dan sesudah perbaikan ini:

Outlook 2013 pada 120 DPI (tanpa perbaikan)	Outlook 2013 pada 120 DPI (dengan perbaikan)

Apa bedanya, ya?

Jangan berharap efek hover berfungsi

Outlook tidak mendukung kelas pseudo hover. Anda tetap harus menyertakannya untuk membuat interaksi guna meningkatkan aksesibilitas email Anda di klien email lain, tetapi jangan kaget ketika itu tidak berfungsi di Outlook.

Jangan bergantung pada GIF animasi untuk menyampaikan maksud Anda

Klien desktop Outlook tidak mendukung GIF animasi. Anda dapat membuat bingkai awal menampilkan gambar yang ingin Anda tampilkan di Outlook, atau Anda dapat menyembunyikan GIF animasi dari Outlook dan menggunakan pengkodean bersyarat untuk menampilkan gambar diam yang Anda inginkan. (Sekali lagi, selanjutnya tentang pengkodean bersyarat.)

Jangan gunakan konten interaktif tanpa fallback

Email interaktif sangat tidak disukai Outlook. Mereka bergantung pada pengkodean AMP atau peretasan kotak centang, yang keduanya tidak didukung di Outlook.

Dalam kasus AMP untuk email, file HTML akan ditampilkan sebagai ganti file AMP, jadi tidak ada pengkodean tambahan untuk itu. Untuk interaktivitas peretasan kotak centang, Anda harus menyembunyikan konten interaktif dan menampilkan mundur Outlook. Sekali lagi, pengkodean bersyarat adalah teman Anda di sini.

Jangan menambahkan padding atau margin ke gambar

Outlook menghapus padding dan margin dari gambar. Pastikan untuk menambahkan padding ke sel tabel di sekitar gambar. Atau jika Anda memiliki gambar di sel yang sama dengan salinan, tambahkan margin ke tag di sekitar salinan (<h1>, <h2>, <p>, dll.).

Ketakutan adalah pembunuh email: kode yang Anda butuhkan untuk menghadapi ketakutan Outlook Anda

Pengkodean email yang bagus untuk klien email desktop Outlook membutuhkan lompatan di luar HTML dan CSS "normal". Ada tiga jenis kode yang akan membantu membuat email Anda bersinar di klien ini: pengkodean bersyarat, properti MSO, dan VML.

Mungkin menakutkan untuk bekerja dengan sesuatu yang baru, tetapi saya berjanji itu sepadan. Dan saat itu ketika Anda membuatnya bekerja dengan benar? Anda akan merasa seperti baru saja membuat Kessel Run dalam waktu kurang dari 12 parsec.

Pengkodean bersyarat

Pengkodean bersyarat adalah pengkodean yang melihat klien email atau browser apa yang digunakan pelanggan Anda dan hanya menampilkan kode jika memenuhi persyaratan di dalam komentar, seperti:

<!--[if mso]>
<p>This content is only visible on Outlook desktop clients</p>
<![endif]-->

Anda bahkan dapat menggunakan ini untuk menargetkan versi tertentu dari klien desktop Outlook dengan menambahkan nomor versi:

<!--[if mso 14]>
<p>This content is only visible on Outlook 2010 desktop client</p>
<![endif]-->

Outlook sama sekali tidak mudah, jadi nomor versi tidak sesuai dengan nama klien email:

Outlook 2000 = mso 9
Outlook 2002 = mso 10
Outlook 2003 = mso 11
Outlook 2007 = mso 12
Outlook 2010 = mso 14
Outlook 2013 = mso 15
Outlook 2016, Outlook 2019, dan desktop Office 365 = mso 16

Dan kemudian Anda bisa menjadi lebih rumit dengan menargetkan rentang klien dengan kurang dari (lt), lebih besar dari (gt), kurang dari atau sama dengan (lte), atau lebih besar atau sama dengan (gte). Sebagai contoh:

<!--[if (gte mso 9) | (lte mso 11)]>
<p>This content is only visible on Outlook 2000 to Outlook 2003</p>
<![endif]-->

Jadi, jika Anda hanya melihat beberapa hal liar terjadi pada klien tertentu, Anda dapat menargetkan klien tersebut secara khusus dan menyembunyikan serta menampilkan konten yang lebih baik untuk klien tersebut.

Anda juga dapat menggunakan komentar bersyarat untuk menyembunyikan konten dari Outlook dengan mengatakan "jika !mso" yang berarti "jika tidak mso":

<!--[if !mso]><!-->
<p>This is visible on anything except Outlook desktop clients</p>
<!--<![endif]-->

Sesuatu yang perlu diingat: Kode bersyarat hanya berfungsi di klien desktop Outlook. Karena di sinilah banyak masalah ikut berperan, Anda mungkin akan membutuhkan ini lebih dari perbaikan apa pun untuk klien webmail.

Tetapi ada cara untuk menargetkan klien web juga, meskipun tidak ada cara untuk menargetkan satu klien web Outlook di atas yang lain. Jadi, saat Anda menargetkan Outlook.com, Anda juga akan menargetkan klien web Office 365 (tetapi bukan klien desktop).

Anda dapat menargetkan klien web Outlook dengan memanfaatkan fakta bahwa Outlook menambahkan “x_” ke semua nama kelas, tetapi tidak melakukan ini untuk pemilih atribut. Jadi, jika Anda memiliki kelas "foo" dan ingin memperlakukannya secara berbeda untuk klien web Outlook, Anda dapat menargetkannya dengan kode ini:

[class~="x_foo"] { }

(Terima kasih kepada Mark Robbins untuk perbaikan ini dan kepada Dylan Smith untuk howtotarget.email.)

properti MSO

Seperti disebutkan di atas, ada CSS khusus untuk Outlook yang dapat Anda tambahkan yang hanya akan memengaruhi klien email desktop Outlook. Berikut adalah beberapa yang cukup umum, dan Anda mungkin pernah mendengarnya:

mso-sembunyikan: semua;

Properti ini akan menyembunyikan semuanya dari klien desktop Outlook. Itu dihapus ketika email diteruskan, jadi berhati-hatilah menggunakannya dengan sendirinya jika itu adalah fungsi yang Anda tahu sering dimanfaatkan oleh pelanggan Anda. Anda dapat memasangkannya dengan kode kondisional "jika tidak mso" jika Anda seorang pembuat kode "berjaga-jaga".

mso-line-height-rule: persis;

Properti ini memastikan bahwa Outlook menampilkan tinggi garis Anda pada apa yang Anda tetapkan di properti ketinggian garis. Tanpa itu, Outlook tidak selalu menghargai ketinggian baris Anda. Jika Anda bekerja di industri di mana presisi adalah kuncinya, Anda mungkin sangat akrab dengan properti ini.

mso-padding-alt

Yang ini sedikit kurang umum, tetapi saya harus menggunakannya dari waktu ke waktu. Ini memungkinkan Anda mendeklarasikan padding yang khusus untuk Outlook. Jadi, jika bantalan normal yang Anda miliki di sel tidak dirender dengan benar di Outlook, Anda bisa menggunakan mso-padding-alt untuk menetapkan nilai yang sesuai dengan desain Anda untuk Outlook.

mso-ansi-font-size

Ini adalah salah satu yang hanya saya gunakan sesekali. Ini memungkinkan Anda mengatur ukuran font khusus untuk Outlook. Jadi, jika Outlook merender font Anda sedikit lebih besar daripada klien email lainnya dan Anda berakhir dengan salinan baris akhir pendek yang tidak Anda inginkan, tambahkan mso-ansi-font-size dan atur ukuran font yang membuat salinan Anda pas.

Ada lebih banyak properti MSO yang dapat Anda gunakan, jadi lanjutkan dan lihat apakah ada sesuatu yang akan memperbaiki masalah rendering untuk Anda.

VML

VML adalah singkatan dari Vector Markup Language. Ini adalah SVG versi Microsoft, tetapi bahasanya telah disusutkan dan sangat jarang digunakan (yay email!). Microsoft memang memiliki dokumentasi untuk VML yang diarsipkan secara online, sehingga Anda masih dapat mencari cara menggunakannya untuk membuat vektor di Outlook, yang masih didukung. Secara teoritis, ketika Microsoft bertransisi ke model "One Outlook" mereka, kami akan dapat meninggalkan VML.

Pastikan untuk menyertakan deklarasi namespace VML. Saya biasanya menambahkannya ke elemen <html> di template boilerplate saya sehingga saya dapat menggunakan VML kapan pun saya perlu:

<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">

Setelah Anda memilikinya, Anda dapat menambahkan VML apa pun ke kode Anda di dalam persyaratan MSO:

<!--[if mso]>
    <v:rect fillcolor="blue" stroked="false" style="width:200px; height:50px;"></v:rect>
 <![endif]-->

Kode itu akan membuat persegi panjang biru berukuran 200px kali 50px. Mungkin bukan sesuatu yang benar-benar dapat Anda gunakan dalam email, tetapi Anda dapat menggunakan VML untuk menambahkan tombol dengan sudut membulat ke kode, gambar latar belakang, dan gradien latar belakang Anda. Campaign Monitor memiliki dua alat yang dibuat oleh Stig untuk membantu Anda membuat gambar latar belakang atau tombol dengan sudut membulat. Saya menemukan itu adalah cara yang bagus untuk menambahkan VML ketika Anda baru belajar.

Anda juga dapat menggunakan VML untuk membuat pemosisian absolut palsu, efek bayangan, atau mundur untuk mendukung seni CSS di Outlook. Ada banyak hal yang dapat Anda lakukan dengan VML setelah Anda menyelam.

Panjang umur dan email

Outlook telah lama menjadi kutukan bagi pemasar email, tetapi tidak harus demikian.

Dengan alat yang tepat, Anda dapat membuat email cantik yang ditampilkan dengan benar di Outlook. Lihat sumber daya di seluruh posting ini untuk membangun potongan pengkodean Outlook Anda, dan uji mereka di email Anda dengan Pembuat Litmus dan Pratinjau Email. Pikirkan pengkodean untuk Outlook sebagai teka-teki yang menunggu untuk dipecahkan, dan Anda mungkin menyukai Outlook dan semua keunikannya.

Uji email Anda di Outlook dengan Litmus

Lihat bagaimana email Anda akan terlihat di Outlook dan perbaiki masalah apa pun sebelum Anda menekan kirim. Dengan Litmus, yakinlah bahwa Anda membuat email dengan piksel sempurna yang dapat digunakan oleh pelanggan Anda.

Mulai uji coba gratis Anda →