Modul 5: Email Kacad di Gmail (HTML Formatting & Cross-Platform)

Skenario Masalah

Newsletter rapi di Outlook, berantakan di Gmail

Tim marketing Anda mengirim newsletter ke 500 pelanggan menggunakan mail merge ke Outlook. Di komputer kantor (Outlook) tampilannya sempurna: font rapi, gambar pas, spasi teratur. Tapi beberapa pelanggan mengeluh bahwa di Gmail mereka, teksnya kacau, gambar tidak muncul, dan tata letak berantakan.

Pertanyaan: Mengapa format email berbeda di tiap layanan surel? Bagaimana cara membuat email yang kompatibel di semua platform?

Forum Brainstorming

Diskusikan pengalaman dengan email lintas platform dan solusinya.

MP

Maya P.

6 jam lalu

Saya dulu kirim undangan via mail merge, di Gmail teman saya malah jadi plain text semua. Ternyata harus kirim sebagai HTML.

DK

Dimas K.

4 jam lalu

Katanya, lebih aman pakai inline CSS dan hindari CSS eksternal. Juga jangan pakai terlalu banyak tabel.

Simulasi forum, di LMS sebenarnya akan terintegrasi.

Materi Pendukung

Plain Text vs HTML

Mail merge bisa mengirim email dalam format plain text atau HTML. HTML memungkinkan formatting, tapi tidak semua klien email mendukung CSS modern.

Inline CSS adalah Kunci

Gunakan CSS inline (style="...") daripada CSS internal/eksternal. Banyak klien email (seperti Gmail) mengabaikan tag <style>.

Hindari Layout Kompleks

Gunakan tabel untuk layout sederhana. Hindari flexbox, grid, atau positioning yang tidak didukung merata.

Video Tutorial

Cara mengirim email HTML dengan mail merge dan tips kompatibilitas.

🎥 Preview Video

Perbandingan Tampilan

Kode HTML sederhana (inline):

                        <div style="font-family: Arial, sans-serif; color: #333;">

                          <h2 style="color: #fbbf24;">Promo Spesial!</h2>

                          <p>Halo {Nama}, dapatkan diskon 20%...</p>

                        </div>

Hasil di Outlook: rapi, font Arial, heading kuning.

Hasil di Gmail: tetap rapi karena inline CSS didukung.

Latihan Terbimbing

Di bawah ini adalah dua cuplikan kode HTML. Mana yang lebih kompatibel untuk dikirim via email ke berbagai klien (termasuk Gmail)?

Kode A:

<style> .promo { color: red; font-weight: bold; } </style>

<div class="promo">Diskon 50%!</div>

Kode A (menggunakan class <style>)

Kode B (inline style)

Kode B:

<div style="color: red; font-weight: bold;">Diskon 50%!</div>

Kode B (inline style)

Kode A (menggunakan class <style>)

Challenge: Perbaiki HTML Email

Berikut adalah HTML email yang sudah dibuat menggunakan CSS internal. Namun setelah dikirim, di Gmail tampilannya polos tanpa warna dan font. Ubahlah kode ini agar kompatibel dengan Gmail (gunakan inline CSS).

<html>
<head>
    <style>
        .header { background-color: #fbbf24; padding: 10px; }
        .content { font-family: 'Helvetica', Arial; color: #333; }
    </style>
</head>
<body>
    <div class="header"><h1>Newsletter</h1></div>
    <div class="content">Halo {Nama}, terima kasih telah mendaftar.</div>
</body>
</html>
                

Tugas: Tulis ulang kode di atas dengan gaya inline, sehingga tetap rapi di Gmail. (Tulis hanya bagian body yang penting, atau seluruh HTML sederhana).

Refleksi

Apa tantangan terbesar dalam membuat email yang kompatibel lintas platform? Bagaimana Anda akan menguji email sebelum dikirim ke banyak orang? Adakah layanan atau alat yang bisa membantu preview email?

Kuis Formatif

Pilih jawaban yang benar:

1. Mengapa email dengan CSS internal bisa berantakan di Gmail?

Gmail mengabaikan tag <style> untuk keamanan

Gmail tidak mendukung HTML

Karena ukuran file terlalu besar

2. Cara terbaik memformat email agar kompatibel di banyak klien adalah...

Menggunakan CSS inline

Menggunakan CSS eksternal

Menggunakan framework CSS seperti Bootstrap

3. Elemen layout apa yang paling aman digunakan dalam email?

Tabel sederhana

Flexbox

CSS Grid

4. Saat menggunakan mail merge untuk email, format apa yang harus dipilih agar HTML terbaca?

HTML

Plain Text

Rich Text