Cara Membuat Email HTML

Membuat email HTML tidak sesulit kedengarannya. Anda tidak perlu menjadi pengembang, dan Anda tidak perlu benar-benar tahu cara membuat kode.

Jika Anda pernah menggunakan editor email WYSIWYG (What You See Is What You Get), Anda telah membuat email HTML. Setiap modul yang Anda seret dan lepas terdiri dari HTML dan CSS sebaris, yang menentukan tampilan dan perilaku elemen email yang berbeda.

Jadi, jika sebagian besar editor email mengizinkan Anda mendesain dengan alat seret dan lepas, mengapa Anda perlu mengetahui HTML apa pun untuk membuat email?

Pertanyaan bagus.

Sementara sebagian besar editor email memberi Anda cukup banyak kontrol dalam modul, Anda tidak akan dapat mengubah setiap aspek seluk beluk email Anda. Anda mungkin memerlukan HTML untuk mengubah hal-hal seperti:

• Ukuran huruf
• teks alternatif
• perbatasan
• Margin
• Lapisan
• Ukuran gambar
• warna

Sudahkah Anda menggunakan editor email Twilio SendGrid ? Ini memungkinkan Anda membuat email dengan kombinasi modul drag-and-drop dan pengeditan HTML. Pembangkit tenaga listrik kombo seperti itu memberi Anda kendali penuh atas tampilan dan nuansa email Anda, memastikan pengalaman merek yang konsisten dan terbaik di setiap pesan.

Untungnya, mengkodekan email HTML tidak terlalu rumit. Di bawah ini, kami akan memberikan tips dan pengetahuan struktur email yang Anda perlukan untuk membuat email yang lebih baik.

5 tips untuk mengkodekan email HTML

Mengkodekan email HTML relatif mudah, tetapi klien email dan kotak masuk bisa jadi rumit. Ikuti praktik terbaik ini untuk memastikan pesan Anda terlihat bagus, terlepas dari klien, browser, atau perangkat penerima Anda.

1. Jadikan email Anda responsif

Penerima membuka pesan email di berbagai sistem operasi, perangkat, ukuran layar, browser, dan aplikasi email. Masing-masing faktor ini akan membuat email Anda berbeda, jadi tugas Anda adalah memastikan email Anda responsif dan berfungsi sebagaimana mestinya di sebagian besar kotak masuk.

Anda dapat menemukan banyak template email responsif, tetapi tugasnya sedikit lebih rumit saat Anda membuat kode email HTML dari awal. Berikut adalah beberapa hal yang akan membantu membuat email Anda lebih responsif:

• Sertakan kueri media: Kueri media memungkinkan Anda menyesuaikan template email ke perangkat yang berbeda.
• Gunakan satu kolom: Mungkin mudah untuk membaca email 2 kolom di desktop, tetapi bisa menjadi sedikit padat di perangkat seluler.
• Meningkatkan ukuran font: Jangan lebih kecil dari font 13 atau 14 poin.
• Beri jarak pada tautan Anda: Anda tidak ingin pembaca secara tidak sengaja mengeklik tautan yang salah karena tautan Anda terlalu berdekatan.
• Tambahkan tag alt: Tag alt menjelaskan gambar Anda jika gambar gagal dimuat.

2. Tambahkan gambar dengan hemat

Gambar adalah tambahan yang bagus untuk kampanye email Anda, tetapi berhati-hatilah agar tidak berlebihan. Terlalu banyak gambar dapat memperpanjang waktu pemuatan dan mempersulit email untuk dirender.

Gunakan gambar yang lebih kecil yang akan memuat lebih cepat dan tidak memenuhi seluruh layar. Juga, tambahkan elemen ukuran responsif seperti "lebar" dan "lebar maksimum" untuk memastikan gambar Anda dimuat dengan benar di setiap perangkat dan klien email.

3. Tetap sederhana

Ingat tujuan email Anda. Banyak desainer email tersesat dalam seni dan kreativitas, melupakan tujuan keseluruhan email—yaitu bukan untuk mendapatkan ooh dan aah.

Pertama, Anda ingin orang membuka email Anda. Selanjutnya, Anda ingin mereka mengklik dan mengambil tindakan. Itu mungkin untuk mengunjungi situs web Anda, membaca posting blog, melakukan pembelian, atau mendaftar untuk suatu acara.

Jaga hal-hal sederhana. Berikan nilai kepada penerima Anda, bujuk mereka dengan konten, dan kemudian arahkan mereka ke ajakan bertindak Anda. Itu dia. Sebagian besar waktu, segala sesuatu yang lain adalah bulu.

Saat menambahkan elemen HTML yang berbeda ke email Anda, tanyakan pada diri Anda pertanyaan: "Apakah ini membantu email memenuhi tujuannya?" Jika tidak, nix dari desain email Anda.

4. Gunakan template email bawaan

Anda dapat menemukan template email HTML prebuilt dengan semua yang Anda butuhkan untuk mengirim kampanye bintang. Template telah melakukan kerja keras untuk membuat desain email yang menarik dan responsif.

Jika Anda menyukai template email tetapi tidak 100% puas dengannya, Anda dapat sering mengunduh HTML dan mengeditnya sesuka Anda. Ini bisa menjadi metode pengeditan email yang sangat baik bagi mereka yang baru mengenal HTML.

5. Uji email Anda

Jangan pernah mengirim email tanpa mengujinya terlebih dahulu. Cara lama untuk melakukan ini adalah dengan mengirim email percobaan ke berbagai alamat email (di klien email) dan mencoba membukanya di perangkat yang berbeda. Jika itu terdengar seperti banyak membuang waktu dan sakit kepala, Anda benar.

Untungnya, ada cara yang lebih baik akhir-akhir ini.

Alat pengujian email Twilio SendGrid terintegrasi dengan editor desain Anda, membantu Anda memecahkan masalah dari satu aplikasi. Ini akan membantu Anda melihat bagaimana email Anda ditampilkan di seluruh klien, browser, dan perangkat. Misalnya, Anda dapat melihat bagaimana email Anda akan terlihat di perangkat seluler menggunakan Gmail dan desktop menggunakan Outlook.

Alat pengujian email juga dapat membantu Anda menemukan tautan dan tombol yang rusak, konten yang tampak seperti spam, dan masalah pemformatan.

Struktur email HTML

Email HTML memiliki struktur sederhana:

• DOCTYPE
• tajuk
• Tubuh

DOCTYPE

Gunakan <!DOCTYPE> untuk memberi tahu browser apa yang diharapkan—dalam hal ini, ini akan menjadi email HTML.

tajuk

Gunakan bagian header untuk menyertakan elemen seperti gaya, ukuran, dan teks meta.

Tubuh

Gunakan isi untuk elemen visual email Anda, seperti teks, gambar, tabel, tautan, dan sejenisnya.

Template email dengan kode HTML

Berikut contoh template email dengan kode HTML. Anda dapat melihat bagaimana templat email buletin perjalanan ini ditampilkan di desktop, tablet, dan perangkat seluler.

Seperti yang kau lihat? Klik “Unduh Template”, dan kami akan mengirimkan salinan kode HTML ke kotak masuk Anda. Anda kemudian dapat menyalin/menempelkan kode ke editor desain email Anda untuk mengimpor template dan menyesuaikannya dengan merek dan kampanye Anda.

Lihat template email lainnya dari Twilio SendGrid

Ingin lebih banyak template email? Beruntung bagi Anda, kami memiliki galeri yang penuh dengan mereka . Baik Anda memerlukan buletin, pengaturan ulang kata sandi, atau templat pengingat janji temu, galeri templat gratis kami memiliki segalanya.

Selain itu, desain ini responsif, memastikan email Anda terlihat bagus di semua klien, browser, dan perangkat. Oh, dan apakah kami menyebutkan bahwa templatnya gratis?

Mulai buat email HTML yang lebih baik hari ini dengan template bawaan.