1) Email Client Itu Bukan Browser 😅

Masalah utama: banyak orang mengira email HTML akan dirender seperti halaman web modern. Padahal, mayoritas email client punya mesin rendering yang berbeda-beda dan sering kali dibatasi. Ada yang mirip browser, ada yang tidak. Ada yang mendukung CSS modern, ada yang hanya mendukung sebagian, dan ada yang punya “kebiasaan unik” yang bikin stres.

Contoh klasiknya adalah Outlook desktop tertentu yang punya perilaku rendering berbeda dibanding Gmail web atau Apple Mail. Akibatnya, layout yang Anda desain dengan nyaman di satu tempat bisa berubah total di tempat lain. Jadi, kalau email terlihat “broken”, sering kali itu bukan salah Anda—itu sifat ekosistem email yang memang tidak seragam.

2) CSS Sering Dibatasi, Dipotong, atau Diabaikan

Di web modern, kita biasa pakai CSS di file terpisah, memakai flex, grid, dan berbagai selector canggih. Di email? Banyak yang tidak mendukung atau mendukung setengah-setengah. Selain itu, beberapa email client membatasi CSS tertentu demi keamanan.

Ini kenapa di email marketing kita sering mendengar “pakai table layout” dan “inline CSS”. Bukan karena orang-orang suka cara lama, tapi karena itu yang paling stabil. Ketika Anda memakai CSS yang terlalu modern, bisa jadi sebagian klien email akan mengabaikannya.

• External CSS bisa diblokir atau tidak dimuat.
• Class selector kadang tidak konsisten, apalagi jika email client melakukan sanitasi.
• Margin pada elemen tertentu bisa berperilaku aneh, sehingga jarak jadi “lompatan”.
• Background image sering tidak tampil di sebagian klien.

Kalau Anda melihat padding hilang, tombol jadi kecil, atau layout bergeser, besar kemungkinan ini karena CSS tidak diterapkan sesuai harapan.

3) Dark Mode Bisa Mengubah Warna Seenaknya 🌙

Dark mode adalah sumber drama baru. Banyak aplikasi email mengaktifkan dark mode secara agresif: mereka mengubah warna teks, background, bahkan kadang memodifikasi elemen tertentu supaya terlihat “kontras”. Sayangnya, modifikasi ini tidak selalu pintar. Bisa saja:

• Teks hitam berubah jadi putih, tapi background tetap putih → teks jadi tidak terlihat.
• Background gelap otomatis, tapi tombol Anda ikut diubah dan kehilangan brand color.
• Ikon PNG gelap jadi “tenggelam” di background gelap.

Solusinya adalah mendesain dengan asumsi bahwa warna bisa “dipaksa” berubah. Gunakan kontras yang aman, hindari teks abu-abu muda di atas background putih, dan uji tampilan email di kondisi dark mode. Untuk elemen penting seperti logo, sering lebih aman memakai versi yang punya ruang putih (padding) atau versi terang/gelap yang adaptif.

4) Gambar Bisa Diblokir (Dan Itu Normal) 🖼️🚫

Banyak email client tidak langsung menampilkan gambar dari internet. Alasannya sederhana: privasi dan keamanan. Memuat gambar eksternal bisa dipakai untuk tracking (misalnya pixel tracking), jadi beberapa klien meminta izin dulu atau menahan loading gambar.

Makanya, jika desain Anda “bergantung” pada gambar—misalnya teks penting ada di dalam gambar—email akan terlihat kosong atau aneh saat gambar tidak dimuat. Ini kesalahan desain yang sering terjadi: banner besar berisi semua informasi utama, tapi begitu gambar off, penerima hanya melihat ruang kosong.

Yang bisa Anda lakukan:

• Pastikan informasi penting berupa teks HTML, bukan gambar.
• Gunakan alt text yang jelas dan informatif.
• Jaga ukuran file gambar agar cepat dimuat saat diizinkan.
• Jangan pakai satu gambar raksasa sebagai “layout”.

5) Font Kustom Sering Tidak Didukung

Anda mungkin memilih font brand yang keren, tapi penerima melihat font default yang berbeda. Ini terjadi karena tidak semua email client mendukung web fonts. Bahkan kalau didukung, kadang font tidak dimuat karena pengaturan keamanan atau koneksi.

Dampaknya bukan cuma estetika. Pergantian font bisa mengubah ukuran huruf dan lebar teks, yang akhirnya menggeser layout: tombol turun ke bawah, baris menjadi dua, atau heading kepanjangan.

Cara aman:

• Pakai font stack yang masuk akal (misalnya pilihan sistem yang mirip).
• Desain layout agar tidak sensitif terhadap perubahan lebar teks.
• Hindari heading yang terlalu panjang kalau posisinya ketat.

6) Lebar Layar dan Responsif: Tidak Semua Mendukung Cara yang Sama 📱

Di web, responsif biasanya beres dengan media query. Di email, dukungan media query tidak merata. Sebagian klien mendukung, sebagian lagi terbatas, dan ada yang “setengah jalan”. Akibatnya, email bisa terlihat bagus di iPhone tapi kacau di Android tertentu, atau sebaliknya.

Praktik yang umum dipakai adalah desain “mobile-first” dengan struktur yang lebih sederhana. Daripada memaksa layout kompleks, lebih baik gunakan satu kolom yang rapi dengan komponen yang jelas. Kalau butuh dua kolom, gunakan table yang bisa turun ke bawah dengan aman tanpa merusak keterbacaan.

7) Link, Tombol, dan “Click Area” Bisa Berubah

Tombol yang Anda desain sebagai <a> dengan background color bisa tampil berbeda antar klien. Ada yang menghapus styling, ada yang menambahkan garis bawah, dan ada yang mengubah warna link sesuai tema. Di beberapa klien, area klik juga bisa jadi lebih kecil atau lebih besar dari yang Anda kira.

Agar tombol tetap terasa seperti tombol:

• Gunakan struktur tombol yang sederhana, sering kali berupa table kecil untuk tombol.
• Pastikan padding dan border-radius tidak bergantung pada fitur CSS modern.
• Jaga ukuran tombol nyaman untuk jari: tidak terlalu kecil, tidak terlalu rapat.
• Pastikan teks tombol tetap jelas walau warna berubah karena dark mode.

8) Sanitasi dan Keamanan: Banyak Tag/Attribute Akan “Dibersihkan”

Email client melakukan sanitasi demi keamanan. Script jelas akan dibuang. Tapi bukan cuma script: beberapa attribute, style tertentu, atau bahkan tag tertentu bisa dihapus. Ini bisa membuat layout Anda kehilangan bagian yang dianggap “berbahaya” atau tidak perlu.

Maka, email HTML harus dibuat dengan asumsi bahwa hanya bagian yang “aman” yang akan lolos. Semakin sederhana strukturnya, semakin besar peluang tampil konsisten. Ini terasa membatasi, tapi justru membantu Anda fokus pada komunikasi, bukan trik tampilan.

Apa yang Bisa Anda Lakukan: Checklist Praktis ✅

Berikut langkah yang biasanya paling efektif untuk membuat email HTML tampil lebih rapi di banyak klien:

1. Gunakan layout berbasis table untuk struktur utama. Untuk email, table masih menjadi pendekatan paling stabil untuk container, kolom, dan tombol.
2. Inline CSS untuk styling penting. Jangan terlalu mengandalkan CSS eksternal atau selector yang rumit.
3. Batasi kompleksitas. Kurangi animasi, background image, dan layout super dinamis. Fokus pada hierarki: judul, ringkasan, CTA, detail.
4. Siapkan fallback. Font fallback, warna yang tetap terbaca di dark mode, alt text yang informatif, dan layout yang tetap masuk akal tanpa gambar.
5. Jaga lebar konten aman. Banyak template email memakai lebar sekitar 600px untuk desktop, dan memastikan mobile tetap nyaman.
6. Gunakan gambar dengan bijak. Kompres, ukuran wajar, dan jangan menyimpan informasi inti hanya dalam gambar.
7. Uji di beberapa klien. Minimal cek: Gmail web, Gmail mobile, Outlook, dan iPhone Mail. Perbedaan kecil bisa Anda temukan lebih awal.

Kalau Anda menerapkan checklist ini, biasanya 80% masalah tampilan sudah beres. Sisanya adalah penyesuaian kecil yang memang hanya bisa diselesaikan lewat testing.

Strategi Isi: Biar Tetap “Bagus” Walau Tampilan Tidak 100% Sama

Satu hal yang sering dilupakan: tujuan email bukan memenangkan lomba desain, tapi mengantar pesan yang jelas. Jadi, selain teknis, Anda juga bisa mengatur konten agar tetap enak dibaca meski style berubah:

• Buka dengan ringkasan singkat yang menjelaskan isi email dalam 2–3 kalimat.
• Gunakan heading yang jelas supaya pembaca bisa skimming.
• Letakkan CTA utama lebih awal, jangan disembunyikan di bawah.
• Pakai paragraf pendek agar nyaman di mobile.
• Hindari teks terlalu kecil yang rentan terlihat pucat di dark mode.

Dengan cara ini, sekalipun ada klien email yang mengubah font atau warna, pesan Anda tetap “nyampe” dan tidak terasa berantakan.

Penutup: Email HTML Itu Seni Bertahan Hidup 😄

Email HTML terlihat “broken” bukan karena Anda tidak bisa desain, tapi karena ekosistem email memang penuh batasan: mesin rendering yang beda-beda, CSS yang dipotong, gambar yang diblokir, dan dark mode yang suka sok kreatif. Kabar baiknya, ada pola yang sudah terbukti: struktur sederhana, table layout, inline CSS, dan selalu siapkan fallback.

Kalau Anda menganggap email HTML sebagai format “khusus” (bukan web page), Anda akan lebih cepat menemukan pendekatan yang stabil. Dan saat inbox penerima tetap rapi di berbagai aplikasi, rasanya seperti menang kecil yang bikin hari jadi lebih enak. 🙌