HTML & CSS: Konsep pengkodean email

Terjun ke dunia coding bisa terasa menakutkan jika Anda belum pernah melakukannya sebelumnya. Pengkodean email, khususnya, memiliki seperangkat aturannya sendiri. Jika Anda baru mengenal coding, berikut adalah beberapa hal yang perlu dipertimbangkan sebelum terjun langsung ke HTML dan CSS untuk email.

Apakah saya perlu mengkodekan email saya?

Jika Anda tidak memiliki pengalaman coding, coding email dari awal mungkin bukan solusi praktis untuk Anda, dan tentu saja tidak diperlukan. VerticalResponse menyediakan berbagai pilihan template mobile-friendly dan menawarkan editor yang mudah digunakan sehingga Anda dapat menyesuaikan template siap pakai kami dengan konten Anda sendiri.

Jika Anda memiliki pengalaman dan tingkat kenyamanan tertentu dalam menggunakan atau mempelajari HTML, maka mengkodekan template email khusus bisa menjadi pilihan yang bagus. Seperti halnya pengkodean untuk halaman web, Anda masih perlu mempertimbangkan perilaku browser dan perangkat. Selain itu, pertimbangkan gaya default unik dari lusinan klien email seperti Gmail, Yahoo, Outlook, dan lainnya. Jika Anda terbiasa mengkode halaman web dalam HTML dan menerapkan lembar gaya CSS eksternal, Anda harus terbiasa bekerja dengan CSS secara internal dan sebaris sehingga gaya Anda tidak ditimpa oleh default klien email ini.

Kosa kata yang perlu diketahui

Jika Anda sama sekali baru dalam coding, inilah yang perlu Anda ketahui tentang HTML dan CSS:

HTML adalah bahasa yang akan Anda gunakan untuk menyusun dan mendeskripsikan konten Anda. HTML adalah singkatan dari Hypertext Markup Language. Saat Anda membuat kode dalam HTML, Anda menandai konten Anda dengan tag yang memberi tahu browser web cara menampilkan informasi seperti gambar dan kata-kata di halaman web.

CSS adalah bahasa yang memengaruhi presentasi konten Anda. Menggunakan CSS, Anda dapat menetapkan gaya ke elemen HTML. CSS adalah singkatan dari Cascading Style Sheet. Kata kaskade penting karena deklarasi gaya, atau aturan, akan dihormati berdasarkan urutan penampilan. Jika Anda membuat dua deklarasi untuk elemen yang sama, yang terakhir akan dihormati karena menimpa apa yang datang sebelumnya.

Berikut adalah cara untuk mengikat CSS Anda ke HTML Anda:

CSS Eksternal: menggunakan stylesheet eksternal (file yang biasa disebut style.css) yang direferensikan dalam file HTML Anda. Ini bagus untuk situs web karena jika Anda memiliki 100 elemen umum yang menjangkau lebih dari 100 halaman, Anda dapat mengubah semuanya sekaligus dengan satu deklarasi CSS.

CSS internal, alias CSS Tertanam: menyertakan kode CSS Anda di dalam tag <style> di bagian atas file HTML Anda. Saat mengkodekan email, ini bagus untuk menetapkan gaya umum yang berlaku untuk elemen umum. Namun, metode ini tidak selalu didukung oleh email.

CSS sebaris: melampirkan kode CSS ke satu elemen HTML tepat di dalam kode HTML. Dalam pengkodean email, metode ini memastikan bahwa gaya tertentu tidak ditimpa oleh browser dan klien email default.

Jika Anda terbiasa mengatur CSS Anda secara eksternal atau internal, Anda dapat membangunnya seperti itu dan kemudian menggunakan alat inliner seperti ini dari PutsMail untuk mengubah gaya Anda menjadi CSS sebaris.

Hubungan antara HTML & CSS

Untuk mendapatkan ide yang lebih baik tentang bagaimana HTML dan CSS terkait dan bagaimana memisahkan CSS dari HTML dapat membebaskan presentasi HTML Anda, kunjungi situs web CSS Zen Garden yang fantastis dan terkenal, di mana Anda dapat melihat markup HTML yang sama dengan CSS yang sangat berbeda , dikodekan oleh desainer terkenal.

Mendekati pengkodean email

Saat membuat kode email dari awal, buatlah sesederhana mungkin. Gunakan editor teks biasa, seperti TextWrangler, Notepad atau Sublime, dan jauhi editor visual seperti Dreamweaver karena mereka dapat menambahkan item yang tidak perlu ke kode Anda.

Untuk tata letak, coba ambil pendekatan mobile-first. Ini berarti mendesain untuk layar kecil dan meningkatkannya. Dengan tampilan seluler yang terus meningkat, memastikan email Anda terlihat bagus di ponsel dan tablet menjadi lebih penting dari sebelumnya; tidak ada alasan untuk membuat desain rumit yang hanya terlihat bagus di desktop. Menjaga pesan dan desain Anda cukup sederhana untuk perangkat terkecil juga akan lebih mudah untuk dikodekan, itu akan dapat diakses oleh pengguna semua perangkat dan itu akan membuat perhatian pembaca Anda terfokus pada ajakan bertindak utama.

Setelah tata letak dan pengkodean Anda selesai, pastikan menggunakan alat seperti Litmus atau Pratinjau Kotak Masuk VerticalResponse untuk editor HTML untuk melihat pratinjau tampilan email Anda di berbagai browser dan klien email sehingga Anda dapat memecahkan masalah apa pun sebelum menekan kirim.

Dari mana harus mulai belajar?

Ada banyak tutorial online di mana Anda bisa belajar langsung, secara detail cara membuat kode email. Salah satu cara yang baik untuk mendalami pengkodean email adalah dengan menemukan template sederhana yang Anda suka dan meluangkan waktu untuk memeriksa kodenya. Kenali tag utama seperti <body>, <head> dan <div> terlebih dahulu, lalu perhatikan bagaimana tag terkadang didefinisikan lebih lanjut ke dalam ID atau kelas, seperti <div class="half-column">. Perhatikan bahwa penamaan dalam template HTML berkualitas akan jelas dan logis sehingga lebih mudah untuk mengetahui apa yang terjadi ketika muncul di CSS.

Jika Anda siap untuk pelajaran langkah demi langkah, cari tutorial terbaru (dalam setahun terakhir). Pendekatan pengkodean terus-menerus dipertimbangkan kembali. Metode ramah seluler yang telah mendapatkan popularitas dalam beberapa tahun terakhir, misalnya, adalah pendekatan cairan/hibrida. Tutorial fluid/hybrid dari Envato Tuts+ ini sangat bagus untuk mereka yang sudah memiliki pemahaman tentang HTML. Untuk pemula, Lynda.com menawarkan banyak kursus pengkodean khusus email. Kursus yang baik akan memandu Anda melalui latihan pengkodean dan memberikan contoh file proyek yang dapat diunduh yang dapat Anda gunakan sebagai referensi.

Habiskan lebih sedikit waktu untuk menjangkau lebih banyak pelanggan

COBA RESPON VERTIKAL HARI INI

(Gratis!)

Catatan editor: Posting blog ini awalnya diterbitkan pada Maret 2016 dan telah diubah dan diperbarui untuk akurasi dan relevansi.