10 Tips Mendesign Email Newsletter Dengan HTML

Suka atau tidak, benci ataupun senang, anda pasti menyadari email dengan format HTML sudah popular dan memang tool yang baik untuk internet marketing. Bagi sebagian developer membuat newsletter bisa menjadi bagian dari mimpi buruk yang rutin dilakukan (apalagi untuk perusahaan yang sering mengadakan campaign).

Bagi anda yang belum tau bagaimana mendesign sebuah newsletter dengan HTML silahkan percaya atau tidak bahwa memang sanga sulit membuat newsletter yang tampilannya baik dan pastinya anda akan “melanggar” hampir semua aturan dalam web design yang sudah pernah anda pelajari, tapi menguasai cara mendesign newsletter yang baik bukanlah hal yang buruk untuk dikuasai. Hari ini saya akan mengulas dengan cepat beberapa tips untuk memulai mendesign newsletter mail.

#1. Gunakan Table

Apaaaaa??!… Bukankah semua web developer sudah meninggalkan penggunaan table yang notabene memang sulit untuk di atur posisi dan stylenya? Yeap, anda benar dan sekarang anda sebaiknya kembali mempelajarinya. Sayangnya, hampir semua email client tidak mendukung CSS dan juga layout style seperti yang anda pergunakan sekarang jadi sebaiknya mulailah pelajari dan kenali dirimu dengan “cellspacing“.

Jika anda kurang familiar dengan layout table-based, ini ada sedikit contoh gambarannya :

<table border="0" cellspacing="0" cellpadding="10">
     <tbody>
          <tr>
               <td width="100"></td>
          </tr>
     </tbody>
</table>

Setiap table di pisahkan dengan row/baris dan setiap row memiliki cell/kolom. Setiap row di presentasikan dengan tag <tr> dan setiap cell di presentasikan dengan tag <td>. Anda bisa melihat detail lebih lanjut menyangkut hal ini di W3Schools.

Jika anda ingin lebih mudah membuat struktur table menggunakan HTML, anda bisa menggunakan generator gratis dibawah ini :

#2. Gunakan Inline CSS

Newsletter mail mendukung style menggunakan CSS, tapi tunggu dulu anda tidak bisa menggunakan file CSS external. Sebaliknya, anda harus menggunakan Inline CSS untuk mendesign atau memberikan style pada setiap elemen di table. Contohnya seperti ini :

<p style="background: #cccccc; color: white;">Silahkan tulis teks disini.</p>

Contoh diatas memberikan penjelasan kepada anda dasar dalam penggunaan Inline CSS. Seperti yang anda lihat semua kodenya memang sama seperti CSS yang biasa, hanya saja anda langsung memasukan kode tersebut di antara kode HTML anda daripada membuat link menggunakan file CSS lain.

Tool untuk Inline CSS

Jika anda lebih nyaman menggunakan file CSS terpisah dalam development, anda bisa menggunakan salah satu tool dibawah ini untuk merubahnya menjadi Inline CSS setelah anda selesai.

  • Premailer: Merubah CSS ke Inline CSS style dan memeriksa semua kode anda apakah sudah memenuhi standar email.
  • HTML Inline Styler: Merubah semua aturan CSS menjadi atribut Inline Style.

#3. Masukan Table ke Dalam Container

Kebiasaan lain dari email client adalah tidak konsisten dalam hal menginterpretasikan margin dan padding. Untuk mengatasi masalah ini, masukanlah table anda kedalam Container. Mungkin kodenya agak sedikit menjadi berantakan tapi anda akan mendapatkan hasil yang lebih memuaskan dan bisa berjalan hampir di semua email client.

Maksud dari memasukan table ke dalam sebuah container adalah memasukan sebuah table di dalam table, jadi anda akan memiliki susunan yang cukup rumit karena di dalam table akan ada tabel lagi. Anda dapat memasukan banyak table di dalam 1 table, tapi sebisa mungkin hindari terlalu banyak penggunaan table di dalam table karena akan membuat kode menjadi sangat berantakan dan akan sulit untuk memperbaiki kesalahannya. Beberapa email client bahkan akan mulai menunjukan bugs jika anda membuat hingga 8 container tadi. tapi saya yakin angka ini bisa dihindari dengan meminimalisir design pada newsletter mail anda.

#4. Perhatikan Lebar Halaman Anda

Beberapa email client sangat membatasi lebar dari email yang mereka terima. Seperti halnya pada Gmail, jika anda membuat newsletter yang sangat lebar lalu menampilkannya di Gmail maka akan membuat tampilan jendela Gmail menjadi aneh dan akan ada scrollbar secara horizontal yang akan muncul di jendela browser anda.

Terlalu banyak kemungkinan dari ukuran layar disetiap email client karena itu konsensus dari perkumpulan web community biasanya akan menyarankan agar anda menjaga agar newsletter anda tidak terlalu lebar. Biasanya ukuran lebar dari newsletter yang standar adalah 600px.

#5. Hati – Hati Dalam Penggunaan Gambar

Ada beberapa pertimbangan yang harus di pikirkan terlebih dahulu sebelum anda menggunakan gambar atau image di dalam newsletter mail yang akan anda buat. Pertama, beberapa email client tidak mendukung penggunaan image background, yang lainnya mendukung penggunaan image background tapi biasanya secara default hal ini di matikan oleh email client tersebut. Tapi ini bukan berarti anda tidak boleh menggunakan image di dalam newsletter email anda. Point yang kuat dalam newsletter mail salah satunya adalah newsletter yang anda buat dapat memenuhi kualitas dan standarisasi dari setiap email client yang ada, dan jika anda menggunakan image sangat mungkin menurunkan kualitas dari newsletter yang anda buat, karena belum tentu newsletter anda bisa tampil dengan baik di setiap email client dengan baik.

Daripada anda mencari – cari cara penggunaan image lebih baik anda memastikan pesan dari newletter anda tampil dengan baik di setiap email client tanpa menggunakan image. Gunakanlah warna background sebagai fallback dari penggunaan image background di newsletter anda jadi jika image tidak muncul pesan anda tetap bisa tampil dengan baik tanpa image, pastikan anda juga sudah mencoba untuk trial di email client dengan mematikan fitur image background.

Hal lainnya yang harus anda perhatikan dalam penggunaan image adalah anda tidak boleh (atau malah sebaiknya jangan) menempelkan (embed) image yang anda gunakan kedalam email. Sebaiknya anda menyimpan image tersebut di hosting – hosting yang banyak tersedia di pasaran dan anda hanya perlu memasukan link image tersebut ke dalam newsletter anda.

Terakhir, pastikan anda sudah memeriksa lama waktu yang diperlukan untuk menampilkan newsletter anda. User biasanya selalu mengklik email untuk melihat isinya, dan tidak menunggu sampai semua image dalam email akan muncul. Jika anda membuat user terlalu lama menunggu sampai semua bisa muncul secara sempurna, maka akan user akan lebih cepat menekan tombol “delete” untuk menghapus email tersebut sebelum anda sempat menjelaskan keuntungan dari menunggu email tersebut muncul secara sempurna.

#6. Berikan User Kemudahan Untuk Unsubscribe

Newsletter mail biasanya rutin dikirimkan ke setiap user yang menjadi anggota di website anda. Seringkali user mendaftar ke sebuah layanan website tanpa menyadari bahwa mereka akan menerima newsletter secara berkala. Dan terkadang mereka memang dengan sengaja mendaftar untuk mendapatkan newsletter yang tersedia tapi mereka berubah pikiran setelah beberapa kali menerima newsletter tersebut.

Dalam kedua kasus tersebut proses menghentikan penerimaan newsletter seharusnya tidak berbelit – belit dan user tidak perlu bersusah payah mencari cara untuk menghentikan pengiriman newsletter tersebut. Pastikan user dapat dengan mudah menemukan link untuk menghentikan pengiriman newsletter tersebut, masukan link di posisi yang langsung terlihat oleh user namun tidak mengganggu design dari newsletter yang anda buat. Designer dan Marketing yang dengan sengaja menyembunyikan link ini atau mempersulit proses penghentian pengiriman newsletter ini kurang integritas dan kurang menghormati audiensi mereka.

Jika user tidak menginginkan email anda, mereka juga tidak akan membaca email anda. Tidak ada gunanya mengirimkan 10.000 email ke folder spam diseluruh dunia. Akan lebih baik untuk mengenali mereka yang menerima email anda memang benar – benar tertarik.

#7 Perhatikan Isi Dari Newsletter Anda

Marketing dan pemilik perusahaan seringkali memandang newsletter sebagai satu – satunya cara untuk menjalin kerjasama yang konsisten dengan customer mereka.

Marketers and business owners often see an email newsletter as the sole source of consistent contact with their customer base. Karena itu mereka sering tergoda untuk mengisinya dengan konten dan informasi sebanyak mungkin. Sebagai seorang desainer, membantu mereka menahan dorongan ini dengan merancang template yang menampilkan sedikit informasi sangat baik daripada banyak informasi tapi tidak berguna bagi customer.

Kuncinya di sini adalah kualitas daripada kuantitas. Tidak akan ada yang membaca ribuan kalimat dari email yang dikirimkan oleh marketing. Anda saja mungkin paling – paling hanya bertahan 3 – 5 detik sebelum menekan tombol “delete” (diambil dari rata – rata user) , dan hanya waktu ini yang anda miliki untuk menarik minat customer membaca lebih lanjut email anda. Jadi pastikan newsletter anda loading dengan cepat, visual yang menarik, dan menuliskan isi serta header yang jelas.

#8 Include Other Viewing Options

Selain pilihan berhenti berlangganan, Anda setidaknya harus menampilkan dua cara alternatif untuk tampilan email yang anda kirim sehingga user akan memiliki kesan berbeda setiap menerima email anda. Untuk design minimalis, versi teks sederhana adalah yang terbaik. Ada banyak orang di luar sana yang berpikir email harus tetap sederhana sehingga tidak memakan waktu lama untuk menunggu semua image muncul dengan baik.

Disisi lain ada user yang ingin melihat email dengan penuh warna dan grafik tapi terbentur oleh keterbatasan kemampuan dari email client yang ada. Untuk jenis user seperti ini anda dapat menampilkan link yang mengarahkan user agar bisa menampilkan isi email dari browser karena browser pasti akan lebih baik dalam menampilkan newsletter ketimbang email client yang ada, biasanya link ini diletakan di awal email newsletter yang anda kirim. Anda bisa juga lebih mempercantik tampilan dibrowser seperti layaknya sebuah website daripada tampilan di email yang anda kirim.

#9. Pastikan Anda Melakukan Test

Saat mendesign sebuah halaman web, salah satu proses yang paling menyebalkan adalah melakukan trial ke setiap browser yang ada di pasaran. Proses ini biasanya dilakukan pada browser – browser besar seperti Chrome, Safari, Firefox, IE, Opera, dll. Percaya atau tidak melakukan testing untuk newsletter lebih buruk dari pada melakukan testing pada website.

Ada sekitar 30 lebih email client yang paling banyak di gunakan oleh user, dan setiap email client ini memiliki kebiasaan dan standarisasi yang berbeda – beda satu sama lain. Untuk memulainya, anda bisa mencoba terlebih dahulu dengan email client yang sering anda gunakan, jangan lupa untuk mendaftar di beberapa email client besar lainnya seperti Gmail, AOL and Yahoo. Dan pastikan anda juga melakukan test pada PC dan Mac.

Pada kenyataanya anda tidak mungkin melakukan testing pada setiap email client yang ada. Jika anda memiliki budget untuk hal ini anda bisa mendaftar ke layanan seperti Litmus pada saat fase testing. Ini akan membuat anda lebih cepat mendapatkan tampilan dari newsletter anda pada 33 email client yang berbeda dan inilah cara terbaik agar semua user dapat melihat newsletter anda terbuka dengan sempurna.

Pada tahap design pastikan anda sudah melihat ke The Email Standards Project. Ini adalah salah satu sumber terbaik yang tersedia saat ini untuk apa yang di dukung dan apa yang tidak didukung oleh berbagai jenis email client yang ada.

#10. Gunakan Template

Cara terbaik yang saya temukan untuk memulai proses design email newsletter anda untuk pertama kalinya adanya dengan menggunakan template yang sudah ada di pasaran. Walaupun anda memiliki design yang sangat spesifik dan detail di dalam otak anda, merubah atau memodifikasi template professional yang sudah ada akan jauh lebih baik daripada anda membuatnya dari awal, dan dapat dipastikan anda bisa menghemat banyak waktu.

Hal ini juga memberikan anda arahan bagaimana seharusnya tampilan dan struktur yang baik dari newsletter itu sendiri. Tapi ingat anda tidak dapat menjual kembali atau mendistribusikan kembali design template yang gratis ke berbayar karena ini berarti pelanggaran hak cipta dari pekerjaan orang lain.

Ini adalah beberapa contoh template newsletter yang dapat anda lihat dan anda gunakan :

Kesimpulan

Jadi untuk membuat sebuah newsletter yang baik mulailah dengan template dasar yang baik, buatlah kode seperti kode – kode yang ada pada template jaman dulu, buatlah konsep email anda tidak terlalu lebar (kurang dari 600px), pastikan user bisa menghentikan langganan dengan mudah, dan jangan lupa test semua design anda.

Comments are closed.