Pemasaran & Otomasi EmailVideo Pemasaran & Penjualan

Memahami Tantangan (Dan Frustrasi) dari Desain Email HTML

Jika Anda membuka sistem manajemen konten untuk membuat halaman web, prosesnya cukup sederhana. Dukungan browser web modern HTML, CSS, dan JavaScript dengan standar web yang ketat. Dan itu hanyalah segelintir browser yang perlu dikhawatirkan oleh para desainer. Tentu saja ada pengecualian… dan beberapa solusi atau fungsi sederhana khusus untuk browser tersebut.

Karena standar keseluruhannya, mengembangkan pembuat halaman dalam sistem pengelolaan konten sangatlah mudah. Browser mematuhi HTML5, CSS, dan JavaScript… dan pengembang dapat membangun solusi yang sangat kuat untuk membuat halaman web yang responsif terhadap perangkat dan konsisten di seluruh browser. Dua dekade lalu, hampir setiap desainer web menggunakan perangkat lunak desktop untuk mengembangkan halaman web. Saat ini, sangat jarang bagi seorang desainer web untuk mengembangkan halaman web – lebih sering daripada tidak, mereka mengembangkan template dan menggunakan editor dalam sistem konten untuk mengisi konten. Editor situs web luar biasa.

Tetapi editor email sangat tertinggal. Inilah alasannya…

Merancang Email HTML Jauh Lebih Kompleks Dibandingkan Membuat Situs Web

Jika perusahaan Anda menginginkan email HTML yang dirancang dengan indah, prosesnya jauh lebih rumit daripada membuat halaman web karena beberapa alasan:

  • Tidak Ada Standar – TIDAK ada kepatuhan ketat terhadap standar web oleh klien email yang menampilkan email HTML. Hampir setiap klien email dan setiap versi klien email bertindak berbeda. Beberapa akan menggunakan CSS, font eksternal, dan HTML modern. Yang lain menerapkan beberapa gaya inline, hanya menampilkan kumpulan font, dan mengabaikan semuanya kecuali struktur berbasis tabel. Sangat konyol bahwa tidak ada yang menangani masalah ini. Akibatnya, mendesain template yang ditampilkan di seluruh klien dan perangkat secara konsisten telah menjadi bisnis besar dan bisa memakan biaya yang cukup mahal.
  • Keamanan Klien Email – Baru-baru ini, Apple Mail memperbarui untuk memblokir semua gambar dalam email HTML secara default yang tidak tertanam dalam email. Anda dapat memberikan izin untuk memuat email kepada mereka sekaligus atau harus mengaktifkan pengaturan untuk menonaktifkan pengaturan ini. Selain pengaturan keamanan klien email, ada juga pengaturan perusahaan.
  • Keamanan TI – Tim TI Anda mungkin menerapkan aturan ketat tentang objek apa yang sebenarnya dapat dirender dalam email. Jika gambar Anda, misalnya, berasal dari domain tertentu yang tidak masuk daftar putih di firewall perusahaan, gambar tidak akan muncul di email Anda. Terkadang, kami harus mengembangkan email dan menyimpan semua gambar di server perusahaan sehingga karyawan mereka sendiri dapat melihat gambar tersebut.
  • Penyedia Layanan Email – Lebih buruk lagi, pembuat email yang penyedia layanan email (ESPs) justru menimbulkan masalah, bukan membatasinya. Meskipun mereka mempromosikan editornya What You See Is What You Get (WYSIWYG), hal sebaliknya sering terjadi pada desain email. Anda akan melihat pratinjau email di platform mereka, dan penerima akan melihat semua masalah desain. Perusahaan sering kali tanpa sadar memilih editor yang kaya fitur daripada editor yang terkunci, karena mengira editor tersebut memiliki lebih banyak fitur. Yang terjadi justru sebaliknya… jika Anda ingin email ditampilkan secara konsisten di semua klien email, semakin sederhana semakin baik, karena semakin sedikit kesalahan yang terjadi.
  • Rendering Klien Email – Ratusan klien email merender HTML secara berbeda di desktop, aplikasi, perangkat seluler, dan klien email web. Meskipun editor teks bagus di penyedia layanan email Anda mungkin memiliki pengaturan untuk memberi judul pada email Anda, padding, margin, tinggi garis, dan ukuran font mungkin berbeda untuk setiap klien email. Akibatnya, Anda harus memahami HTML dan mengkodekan setiap elemen secara berbeda (lihat contoh di bawah) – dan sering kali menulis pengecualian yang khusus untuk klien email – agar email dirender secara konsisten. Tidak ada tipe blok yang sederhana, Anda harus membuat tata letak berbasis tabel yang setara dengan membangun web tiga puluh tahun yang lalu. Itu sebabnya setiap tata letak baru memerlukan pengembangan dan klien lintas email serta pengujian perangkat. Apa yang Anda lihat di kotak masuk Anda mungkin sangat berbeda dengan apa yang saya lihat di kotak masuk saya. Itu sebabnya alat rendering seperti itu Email Pada Asam or Lakmus adalah suatu keharusan untuk memastikan desain baru Anda berfungsi di semua klien email. Berikut adalah daftar singkat klien email populer dan mesin rendering mereka:
    • Penggunaan Apple Mail, Outlook untuk Mac, Android Mail, dan iOS Mail WebKit.
    • Outlook 2000, 2002 dan 2003 digunakan Internet Explorer.
    • Outlook 2007, 2010 dan 2013 digunakan Microsoft Word (ya, Firman!).
    • Klien webmail menggunakan mesin browser mereka masing-masing (misalnya, Safari menggunakan WebKit dan Chrome menggunakan Blink).

Contoh HTML untuk Web Vs. Surel

Jika Anda menginginkan contoh yang menggambarkan kerumitan mendesain di email versus web, berikut adalah contoh sempurna dari artikel Mailbakery 19 Perbedaan Besar Antara Email dan Web HTML:

Email HTML

Kita harus membuat serangkaian tabel yang menggabungkan semua gaya inline yang diperlukan untuk menempatkan tombol dengan benar dan memastikannya terlihat bagus di seluruh klien email. Tag gaya yang disertakan juga akan ada di bagian atas email ini untuk menyertakan kelas.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left">
         <table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
            <tr>
               <td class="text-button"  style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
                  <a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

web HTML

Kita dapat menggunakan lembar gaya eksternal dengan kelas untuk menentukan huruf besar/kecil, perataan, warna, dan ukuran tag jangkar yang muncul sebagai tombol.

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

Cara Menghindari Masalah Desain Email

Masalah desain email dapat dihindari dengan mengikuti proses yang layak:

  1. Pengujian Template – Memahami klien email yang digunakan pelanggan Anda dan memastikan bahwa email HTML Anda sepenuhnya diuji di perangkat seluler dan desktop sangat penting sebelum menerapkan template apa pun. Kita dapat mendesain email secara harfiah dari tata letak Photoshop… tetapi membaginya menjadi klien email silang berbasis tabel sangat penting untuk menerapkan desain email yang optimal dan konsisten.
  2. Pengujian Internal – Setelah template Anda dirancang dan diuji, itu harus dikirim ke daftar benih internal dalam organisasi untuk ditinjau dan disetujui. Anda bahkan mungkin ingin memulai dengan subset individu yang sangat terbatas untuk memastikan terlebih dahulu tidak ada firewall atau masalah keamanan yang terkait dengan rendering email secara internal. Jika ini membangun sebuah instance pada penyedia layanan email baru, Anda bahkan mungkin menemukan beberapa masalah pemfilteran atau pemblokiran yang terkait bahkan dengan memasukkan email Anda ke kotak masuk.
  3. Pembuatan Versi Template – Jangan mengubah tata letak atau desain Anda tanpa mengerjakan versi baru dari template Anda yang dapat dirancang, diuji dengan benar, dan disebarkan. Banyak bisnis menyukai desain satu kali untuk setiap kampanye… tetapi itu mengharuskan setiap email dirancang, dikembangkan, dan digunakan untuk setiap kampanye. Ini menambah banyak waktu untuk proses pemasaran email internal. Dan, Anda berisiko tidak memahami elemen apa di email Anda yang berkinerja lebih baik daripada elemen apa yang tidak. Konsistensi bukan hanya cara untuk mempermudah proses, tetapi juga penting untuk perilaku pelanggan Anda.
  4. Pengecualian Penyedia Layanan Email – Hampir setiap penyedia layanan email memiliki cara untuk mengatasi masalah yang diperkenalkan oleh pembuat email mereka. Kami sering dapat menambahkan CSS mentah ke akun – atau bahkan memiliki blok konten yang harus disertakan di setiap email – agar perusahaan dapat menggunakan editor email bawaan dan tidak merusak desain email Anda. Tentu saja, itu mungkin memerlukan beberapa pelatihan dan kontrol proses untuk menerapkan langkah-langkah tersebut guna memastikan mereka dipatuhi. Atau – Anda mungkin benar-benar hanya ingin mengembangkan desain email Anda dalam solusi yang terbukti berfungsi di seluruh klien dan perangkat, lalu menempelkannya kembali ke penyedia layanan email Anda.

Platform Desain Email

Karena platform layanan email telah melakukan pekerjaan yang buruk dalam membangun dan memelihara pembangun lintas-klien dan lintas-perangkat yang diberikan secara konsisten, sejumlah platform hebat telah datang ke pasar. Salah satu yang telah kami gunakan secara ekstensif adalah stripo.

Stripo bukan hanya pembuat email, mereka juga memiliki perpustakaan lebih dari 900 templat yang dapat dengan mudah diimpor. Setelah Anda mendesain email, Anda dapat mengirim email ke 60+ ESP, dan klien email, termasuk Mailchimp Intuit, Hubspot, Kampanye Monitor, Aweber, eSputnik, Outlook, dan Gmail. Yang terbaik dari semua template Stripo dilengkapi dengan pengujian rendering email sehingga Anda dapat memastikan template tersebut telah diuji dan bekerja secara konsisten di lebih dari 40 klien email.

Masuk ke Demo Editor Stripo

Douglas Karr

Douglas Karr adalah CMO dari Buka WAWASAN dan pendiri dari Martech Zone. Douglas telah membantu lusinan startup MarTech yang sukses, membantu uji tuntas lebih dari $5 miliar dalam akuisisi dan investasi Martech, dan terus membantu perusahaan dalam menerapkan dan mengotomatiskan strategi penjualan dan pemasaran mereka. Douglas adalah pakar dan pembicara transformasi digital dan MarTech yang diakui secara internasional. Douglas juga merupakan penulis panduan Dummie dan buku kepemimpinan bisnis.

Artikel terkait

Kembali ke atas tombol
Penyelesaian

Adblock Terdeteksi

Martech Zone dapat memberi Anda konten ini tanpa biaya karena kami memonetisasi situs kami melalui pendapatan iklan, tautan afiliasi, dan sponsor. Kami akan sangat menghargai jika Anda menghapus pemblokir iklan saat Anda melihat situs kami.