Menguasai Outlook: Melihat Kembali Masalah Umum Rendering

Microsoft adalah salah satu pemain terbesar di industri email. Microsoft Outlook dan mitra berbasis web Outlook.com memegang pangsa pasar lebih dari 10% secara kolektif. Ini cukup besar!

Di dunia di mana pengguna dapat memilih dari berbagai macam klien email, bagaimana Outlook tetap begitu populer? Tidak hanya Microsoft Office yang biasa diinstal pada komputer di seluruh bisnis di seluruh dunia, tetapi banyak komputer rumah dan laptop yang menjalankan Windows dilengkapi dengan MS Office yang sudah diinstal sebelumnya. Klien email default yang dikemas dengan MS Office adalah…Outlook.

Lalu ada Outlook.com, yang memulai karirnya sebagai klien email sebagai Hotmail, pada tahun 1996. Pada tahun 1997 Microsoft mengakuisisi Hotmail dengan harga sekitar $400 juta dan meluncurkan Hotmail sebagai MSN Hotmail. Itu kemudian berganti nama lagi menjadi Windows Live Hotmail. Akhirnya, pada tahun 2013 Hotmail digantikan seluruhnya oleh Outlook.com. Dengan riwayat Outlook.com yang terjalin dengan Hotmail, seharusnya tidak mengejutkan untuk mengetahui bahwa pada tahun 2015, Outlook.com memiliki lebih dari 400 juta pengguna aktif.

Masalah perenderan umum di Outlook

Membangun email untuk Outlook selalu menantang. Dari Outlook 2007 dan seterusnya, Microsoft berhenti menggunakan Internet Explorer untuk merender email dan memilih untuk menggunakan Microsoft Word sebagai mesin renderingnya. Berita bagus untuk pengguna Microsoft Office, yang dapat menyalin dan menempelkan item dari Word atau Excel dengan mulus ke email Outlook mereka. Bukan berita bagus untuk pemasar email dan pengembang yang menggunakan HTML untuk membuat email mereka. Coba salin dan tempel halaman web HTML ke dalam dokumen Word dan Anda akan melihat sekilas bagaimana Word menerjemahkan HTML.

Tentu saja, para pengembang email berbakat di luar sana mulai mengerjakan keajaiban mereka dalam mengembangkan sejumlah besar peretasan email untuk memastikan email HTML mereka yang indah ditampilkan sama indahnya di Outlook. Bukan tugas yang mudah, karena banyak peretasan cenderung melibatkan VML (Vector Markup Language), yang bukan sesuatu yang cenderung Anda pelajari di sekolah keras untuk pengembangan email!

Berikut ini ikhtisar singkat tentang beberapa masalah populer yang dihadapi pengembang email, saat mengembangkan email untuk Outlook:

Menggunakan tabel dalam pengembangan email

Dalam pengembangan web modern, Anda dapat menggunakan wadah seperti div untuk memuat konten, dengan tabel yang hanya digunakan untuk data tabular. Namun, untuk memposisikan elemen seperti div dengan benar dalam halaman HTML, atribut CSS seperti float dan position sering kali diperlukan.

Outlook tidak mendukung atribut ini. Untuk menyusun email Anda dengan benar untuk kemampuan render lintas-perangkat/klien/browser maksimum, pengembang menggunakan tabel untuk membuat email.

Sementara tabel telah bekerja untuk pengembang email selama bertahun-tahun, tabel tersebut membatasi apa yang dapat dicapai dalam hal desain email. Desainer harus memikirkan baris dan kolom agar desain mereka mudah dibangun dengan tabel.

Gambar latar belakang dengan VML

Teks langsung. Teks langsung. Teks langsung. Ini adalah mantra pemasar email. Miliki teks langsung sebanyak mungkin di email Anda untuk memastikan email Anda tiba di kotak masuk (bukan spam), dapat diakses oleh semua orang, dan dapat dibaca dengan gambar dimatikan.

Gambar latar belakang dapat memungkinkan Anda melapisi teks langsung di atas gambar, baik itu pola atau foto yang indah. Gambar latar belakang dapat menciptakan kesan mendalam yang indah pada desain email Anda, sambil tetap dapat diakses.

Namun, Outlook tidak mendukung gambar latar belakang dengan HTML murni. Outlook memerlukan penggunaan VML untuk membuat gambar latar berfungsi. Untungnya, Anda tidak perlu mempelajari VML secara lengkap untuk dapat menggunakan gambar latar di email Anda. Campaign Monitor memiliki alat hebat yang akan menghasilkan kode VML dan HTML Anda untuk memberi Anda gambar latar belakang antipeluru di email Anda.

Tidak ada dukungan untuk GIF animasi

Dengan kurangnya dukungan video dalam email dan pemasar email yang mendorong untuk membuat email mereka lebih dinamis dan menarik, GIF animasi sederhana adalah cara sempurna untuk menghidupkan email Anda.

Namun, Outlook tidak mendukung GIF animasi. Sementara gambar akan dimuat dan ditampilkan kepada pengguna, hanya bingkai pertama dari animasi yang akan ditampilkan.

Jika Anda memiliki pelanggan yang membuka email di Outlook dan Anda menggunakan GIF animasi, buatlah bingkai pertama dari animasi itu. Jaga agar GIF tetap sederhana dan animasi tidak terpisahkan dengan pesan tetapi lebih seperti manfaat tambahan bagi mereka yang dapat melihat animasi penuh.

Tidak ada dukungan untuk padding pada p, div, dan tag

Padding adalah atribut CSS hebat yang dapat memperkenalkan ruang ke elemen Anda. Ini adalah atribut CSS yang berguna untuk memposisikan elemen dalam email atau untuk membuat ruang bernapas di sekitar elemen untuk menyempurnakan desain.

Solusi mudah untuk ini adalah dengan menggunakan atribut HTML cellpacing dan cellpadding dalam tabel untuk membuat ruang di sekitar elemen di dalam tabel.

Untuk memperkenalkan padding dalam paragraf Anda—tag p—gunakan atribut style mso-line-height-rule:exactly; dikombinasikan dengan tinggi garis untuk memberikan ruang bernapas bagi salinan dan teks Anda, membuatnya lebih mudah untuk diikuti:

 <p>Your text here</p>

Ini bukan hanya Outlook

Sementara klien desktop telah menimbulkan masalah bagi pengembang email selama bertahun-tahun, sekarang ada versi baru Outlook.com untuk ditangani oleh pengembang email, yang dengan sendirinya telah memunculkan bagian dari kebiasaan renderingnya sendiri. Banyak yang berbeda dengan kebiasaan yang ditemukan di Outlook. (Tentu saja.)

Satu perubahan bukanlah langkah ke arah yang benar—Outlook.com menghapus apa pun yang ditempatkan dalam serangkaian kueri media. Jadi tidak ada cara untuk membedakan antara email versi seluler atau desktop.

Ada beberapa kabar baik meskipun. Ada beberapa bug rendering yang ada di versi Outlook.com yang lebih lama yang telah diperbaiki. Terutama: hack float/margin. Agar versi Outlook.com yang lebih lama memahami atribut CSS ini, atribut tersebut harus ditulis menggunakan huruf besar atau campuran huruf besar dan kecil. Sekarang kasus tidak masalah.

Sebelumnya, agar Outlook.com memahami atribut margin, Anda harus menggunakan:

 Margin: 10px;

Tetapi sekarang Anda dapat menggunakan:

 margin: 10px;

Untuk daftar perubahan yang lebih lengkap, pengembang email Remi Parmentier telah menulis blog yang bagus tentang apa yang perlu Anda ketahui tentang Outlook.com baru, dan apa yang harus diperhatikan oleh pengembang email.
Menguasai Pandangan

Menjaga kode Anda tetap relevan

Jika Anda pernah bekerja sebagai pengembang email, sering kali terasa seperti posting tujuan kemampuan render email bergerak lebih dari yang seharusnya. Seiring perkembangan email yang terus berkembang, akan selalu ada teknik baru yang perlu "diterjemahkan" ke Outlook.

Misalnya, ketika pengembangan email hibrida/spons diperkenalkan untuk memastikan aplikasi seluler Gmail merender versi seluler email, pengembang email juga membuat teknik baru untuk memungkinkan Outlook merender email tersebut.

Seiring pengembang email mendorong amplop lebih jauh, dengan banyak yang bercita-cita untuk membuat email tanpa tabel, teknik baru ini harus disederhanakan untuk banyak versi Outlook yang masih digunakan.

Wajar untuk mengatakan bahwa pengembang email yang inovatif dan berbakat tidak pernah lebih diminati. VML belum dikuasai dalam email, dan selama Outlook menggunakan Word sebagai mesin renderingnya, ini akan menjadi area utama di mana pengembang email dapat terus mendorong pengetahuan dan nilai mereka.

Membangun email membutuhkan waktu

Dengan semua tantangan yang dikenakan Outlook pada pengembang email, serta daftar klien email dan perangkat yang terus bertambah yang perlu didukung, tidak mengherankan bahwa sebagian besar waktu yang dihabiskan dalam pemasaran email adalah dalam mengembangkan dan menguji email HTML.

Dalam Status Produksi Email 2016 kami, lebih dari 44% responden dilaporkan menghabiskan lebih dari 3 jam dalam pengembangan email. Ini bukan waktu yang singkat, dan perlu diperhitungkan saat melihat keseluruhan alur kerja pemasaran email.

Outlook selalu menjadi binatang yang rumit untuk diperdebatkan oleh pengembang email. Sayangnya itu tidak dapat diabaikan karena memiliki pangsa pasar klien email yang cukup besar, yang bisa lebih besar jika Anda bekerja di sektor pemasaran B2B. Sederhananya, Outlook tidak dapat diabaikan.

Berjuang untuk membuat email Anda berfungsi di Outlook?

Kami telah bermitra dengan Microsoft untuk memprioritaskan bug rendering email di Outlook, mengidentifikasi masalah lebih cepat, dan mengumumkan peningkatan dan perbaikan kepada komunitas.

Bantu kami menjadikan Outlook lebih baik dan mengirimkan bug rendering Anda.

Kirim bug rendering Outlook →