Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Pengubah HTML Email Responsif dari MJML

PengembangTeks

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

KELUARAN

Sisi klien

HTML Email Responsif

HTML siap produksi dengan kondisi Outlook (MSO) dan gaya inline.

Tempelkan MJML di kiri untuk melihat pratinjau langsung di sini.

IKLAN · HAPUS?

Memandu

Pengubah HTML Email Responsif dari MJML

Tempelahkan markup MJML dan segera dapatkan HTML email responsif yang siap diproduksi dengan kondisional Outlook (MSO), gaya inline, dan tampilan desktop/mobil langsung. Proses kompilasi berjalan sepenuhnya di browser Anda menggunakan mesin resmi MJML, sehingga template Anda tidak pernah meninggalkan mesin Anda.

Cara Penggunaan

Tempelkan atau ketik sumber MJML Anda di editor kiri (atau klik Coba contoh ini untuk memuat template awal).
Pilih gaya keluaran: Dijelaskan untuk HTML yang mudah dibaca, Diminifikasi untuk ukuran payload terkecil, atau Bersih untuk format default mesin.
Pilih tingkat validasi: Lembut mencatat masalah tanpa menghentikan proses, Ketat menghentikan saat terjadi kesalahan, Skip menonaktifkan validasi.
Periksa HTML yang dikompilasi di kanan dan gunakan tombol perangkat untuk melihat tampilan desktop dan mobile.
Klik Salin HTML untuk menyalin kode, atau Unduh .html untuk menyimpannya untuk ESP atau klien email Anda.

Fitur

Dukungan lengkap spesifikasi MJML – komponen mj-section, mj-column, mj-button, mj-image, mj-text, mj-divider, atribut mj-head, dan lainnya.
Output siap untuk Outlook – komentar kondisional MSO dan tata letak berbasis tabel untuk klien Outlook desktop generasi lama.
Pratinjau langsung – iframe terkunci dengan lebar perangkat Desktop (600px) dan Mobile (360px).
Pemantauan kesalahan dan peringatan – pesan langsung dengan nomor baris dan nama tag yang salah.
Output yang rapi, ringkas, atau bersih – sesuaikan format dengan editor atau jalur pengiriman Anda.
100% sisi klien – Sumber MJML Anda dan HTML yang dihasilkan tidak pernah menyentuh server.
Salin dan unduh – Fungsi satu klik untuk menyalin ke clipboard atau menyimpan sebagai file .html terpisah.

 Tanya Jawab Umum

Apa itu MJML dan mengapa digunakan untuk email?

MJML (Mailjet Markup Language) adalah bahasa markup terbuka yang dirancang untuk membuat pengembangan email responsif menjadi lebih mudah. Membuat email HTML secara manual sangat menyulitkan karena klien email (terutama versi lama Outlook) membutuhkan tabel bersarang, gaya inline, dan komentar kondisional MSO agar tampilan sesuai. MJML menyediakan kosakata komponen tingkat tinggi (mj-section, mj-column, mj-button, mj-image, mj-text) yang secara otomatis dikompilasi menjadi HTML berbasis tabel yang sudah ada, memberikan Anda satu sumber yang tampilan konsisten di semua klien, baik modern maupun lama.
Mengapa HTML email membutuhkan tabel dan gaya inline daripada CSS modern?

Klien email mengisolasi dan mengubah HTML yang diterima. Banyak klien menghapus gaya, mengabaikan stylesheet eksternal, dan hanya menghormati sebagian kecil properti CSS. Outlook untuk Windows menggunakan renderer HTML dari Microsoft Word, yang tidak mendukung flexbox, grid, atau bahkan float. Satu-satunya primitif tata letak yang dapat ditampilkan di semua perangkat adalah tabel HTML dengan atribut lebar eksplisit ditambah gaya inline pada setiap elemen. MJML menyembunyikan struktur yang rumit dan rentan kesalahan ini di balik komponen bersih.
Apa itu komentar kondisional MSO dan mengapa output MJML mencakupnya?

Komentar kondisional MSO adalah komentar HTML khusus berbentuk yang hanya diproses oleh Microsoft Outlook (Windows). Mereka memungkinkan Anda mengirimkan markup alternatif untuk Outlook — misalnya, bentuk VML (Vector Markup Language) untuk tombol yang tampil sebagai kotak nyata bahkan di renderer Outlook yang rusak. Output yang dikompilasi oleh MJML mencakup komentar ini agar satu template dapat beradaptasi secara lancar dari Apple Mail dan Gmail ke Outlook 2007 dan versi lebih baru.
Apa artinya email responsif mengingat keterbatasan CSS pada klien email?

Email responsif biasanya menggabungkan dua strategi: tata letak desktop berbasis tabel yang fleksibel (lebar maksimum sekitar 600px, terpusat) dan sejumlah kueri media CSS yang menumpuk kolom secara vertikal dan menyesuaikan ukuran font pada viewport sempit. Karena beberapa klien mengabaikan kueri media, MJML menghasilkan tata letak yang sudah menyesuaikan lebar umum melalui tabel berbasis persentase, lalu menambahkan override kueri media di atasnya untuk klien yang menghormatinya. Hasilnya adalah email yang terlihat sengaja di ponsel bahkan ketika dukungan CSS tidak lengkap.
Apa perbedaan praktis antara output HTML yang rapi dan yang dikompilasi?

Output yang rapi mempertahankan indentasi dan baris baru, yang sangat membantu saat memeriksa markup, membandingkan perubahan template, atau menempelkan ke review kode. Output yang dikompilasi menghilangkan spasi dan komentar untuk mengurangi ukuran — berguna karena beberapa ESP menghitung per kilobyte dan Gmail memotong pesan yang melebihi sekitar 102KB. Secara fungsional, kedua output menghasilkan email yang sama saat ditampilkan; pilih yang rapi saat Anda membuat, dan yang dikompilasi saat Anda mengirim.