Tips HTML untuk Email

Tips HTML untuk Email

Beberapa saat yang lalu, salah satu klien gw meminta gw untuk membuatkan template email dalam format HTML untuk perusahaannya . Desainnya sendiri gak rumit, terdiri dari tiga bagian utama dengan logo di atasnya, dan footnote di bawahnya.

Terdengar gampang, gw janjikan akan selesai dalam beberapa jam. Ternyata proyek tersebut molor sampai tiga hari!

Dimana Masalahnya?

Pertama kali gw mendengar HTML email gw asumsikan gak bakal berbeda dengan HTML untuk web. Karena memang HTML untuk email tentu saja sama dengan HTML untuk web, dengan mempertimbangkan program-program email client sekarang (seperti MS Outlook, Mozilla Thunderbird, dsb) sudah sangat canggih. Apalagi jika dibuka dalam web browser seperti Gmail.com atau Outlook.com yang secara teori mengekor pada kemampuan browser.

Oh, betapa salahnya asumsi itu…

Maka blog kali ini gw dedikasikan untuk memberikan tips-tips seputaran membuat email dalam format HTML.

Tips Dasar

Tips dasar ini gw dapat dari mailchimp.com:

  • Lebar email antara 600-800px.
  • Desain sesederhana mungkin.
  • Gambar dalam email biasanya diblokir oleh program, jadi usahakan memberikan attribut width & height.
  • Jangan membuat email yang hanya berisi gambar besar. Sangat menyebalkan!
  • Lupakan JavaScript apalagi Flash.
  • Upayakan responsive design.
  • Tips lainnya bisa dilihat di web mailchimp.

Layout

Untuk membuat layout dalam email, hindari penggunaan div apalagi flex. Div memang didukung tapi position tidak didukung, float pun tidak disarankan. Wajar seh, terutama untuk web mail, bayangkan kalau ada <div style="position:absolute;left:0;top:0"> apa jadinya?

Solusinya? Gunakan table, table, table & nested table.

Lupakan Class & ID

Senjata utama para desainer web sudah pasti class & ID. Rasanya jaman now sudah gak mungkin bisa hidup tanpa memakai class & ID. Tapi tidak semua email client mendukung class & ID, biarpun mendukung, belum tentu selector yang agak rumit seperti div > p > * didukung.

Solusinya? Gunakan inline style, itu tuh yang <p style="text-align:center">.

Tapi betapa repotnya kalau harus satu per satu tag ditambahkan style? Bagaimana kalau style-nya berubah? Tenang, mailchimp.com menyediakan tool gratis untuk mengkonversi semua class & ID menjadi inline style disini.

Header

Biasanya saat membuat HTML, salah satu tag pertama yang kita tulis adalah <head>, tapi dalam HTML email, <head> umumnya dibuang. Apalagi saat dibuka via web mail. Jadi semua konfigurasi yang ditaruh di <head> sebaiknya ditaruh dalam <body>.

Juga harus diperhatikan penggunaan doctype yang berbeda-beda untuk setiap mail client. Untuk lebih jelasnya bisa dibaca disini.

KISS

Keep It Simple, Silly! Seperti yang sudah disinggung diatas, lupakan fitur-fitur HTML teranyar, termasuk JavaScript, Flash, SVG, css animation, css filtering, bahkan banyak fitur CSS3 yang tidak didukung mail client. Contohnya box-radius tidak didukung oleh Mail app-nya Windows 10! Daftar lengkap CSS yang didukung atau tidak didukung mail client ada di sini.

Font Standar

Salah satu permintaan klien pada saat membuat template email adalah menggunakan font khusus (web font) sesuai citra perusahaan. Awalnya gw jelaskan bahwa penerima email bisa mencak-mencak karena harus mendownload font 300KB dari CDN Google Fonts hanya untuk membaca email balasan yang berisi, "Ok" saja.

Tapi masalahnya ternyata gak sampai situ. Beberapa mail client bahkan menolak menggunakan font non standar (kamsudnya seperti Arial, Times, Serif, Courier) walaupun sudah terpasang di PC klien. Maksudnya, penggunaan:

<p style="font-family:Georgia">

Di Mail app Windows 10, yang tampil bukanlah font Georgia, melainkan Trebuchet (atau Calibri?). Padahal Georgia terpasang disekitar 99% PC di dunia.

Jadi apakah kita harus memakai font standar saja? Ternyata ada solusinya! Bahkan solusi ini berlaku untuk web font!

Yang perlu diingat bahwa solusi itu bukan berarti bisa memakai web font di semua email client, melainkan menampilkan font default yang lebih pantas. Lucu kan kalau font "Century Gothic" malah diganti Times oleh MS Outlook.

Seriously…

Membuat desain HTML email ternyata susah-susah gampang. Tidak adanya standar penerapan dalam setiap mail client membuat HTML email dapat tampil berbeda-beda. Sebenarnya sudah ada upaya untuk standarisasi HTML email tapi sampai saat ini belum ada kesepakatan antar vendor. Jangankan standarisasi email, standarisasi web browser saja masih belum optimal.

Tulisan ini hanya menampilkan beberapa tips & trik untuk membuat template HTML email. Mungkin masih banyak tips & triks lain yang belum ditampilkan disini. Kalau kamu punya tips & trik lain yang ingin dibagikan, silahkan cantumkan di kolom komentar yah.

Semoga tulisan ini bisa berguna bagi web developer yang ingin membuat HTML email, tapi terkejut melihat emailnya tampil berantakan di email client tertentu.


Posted By: admin
Posted On: Mar-10-2018 @ 11:30pm
Last Updated: Mar-10-2018 @ 11:41pm

There is no comment

More Comments/Post Your Own