Advertisement
  1. Code
  2. HTML & CSS

Memulai dengan Email HTML

by
Read Time:23 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Ridho Aulia (you can also view the original English article)

Email HTML adalah cara yang bagus untuk membuat klien diposting pada pembaruan terbaru terkait dengan bisnis atau produk Anda, tetapi mereka agak rumit. Dukungan CSS pada klien email tidak konsisten. Sebagai hasilnya, kita harus resor untuk teknik kuno, seperti menggunakan tabel, dan inline CSS. Hari ini, saya akan memandu Anda melalui proses menciptakan sederhana HTML email.


Penghantar: HTML email

Sebagai pengembang web lepas, pengkodean email HTML adalah salah satu tugas yang lebih menantang yang harus saya tangani. Untungnya, ketika salah satu klien pertama saya meminta saya untuk mendesain dan membuat kode buletin emailnya, dia cukup sabar untuk membiarkan saya melalui proses panjang dan frustasi dalam mencari tahu semuanya. Anda mungkin tidak seberuntung itu, jadi persiapkan diri Anda dengan tutorial ini.

Masalah: Email Klien

Anda pikir IE menyakitkan di pantat? Tunggu hingga Anda bertemu Outlook 2007. Karena perbedaan besar dalam rendering HTML / CSS antara klien email, menggunakan teknik pengkodean modern akan menghasilkan kekacauan yang agak dahsyat di banyak klien email populer. Klien surel sama sekali tidak membuat HTML dengan cara yang sama seperti peramban - bahkan tidak menutup dalam banyak kasus. Hal-hal seperti pelampung, gambar latar belakang, dan bahkan margin tidak lagi menjadi bagian dari kosakata Anda. Jadi apa yang harus dilakukan oleh pembuat kode pencinta standar?

Solusi: Kode seperti itu 1997

Itu benar. Tabel. Cellpadding, cellspacing, colspan, Semua hal-hal kotor yang Anda pikir Anda telah meninggalkan di belakang. Tabel adalah satu-satunya cara untuk mendapatkan email konsisten layout, jadi sekarang saatnya untuk (sementara) lupa jalanmu mengasihi CSS dan merangkul tabel un-semantik, berantakan.


Langkah 1: Desain

Tetap Sederhana

Saat merancang email HTML, ingatlah kesederhanaan. Desain yang kita gunakan hari ini memiliki beberapa tata letak kolom, sebagian besar untuk tujuan demonstrasi, tetapi pertimbangkan untuk tetap menggunakan dua kolom saat mengode buletin Anda sendiri untuk menghemat banyak sakit kepala.

Meminimalkan penggunaan gambar

Ingatlah untuk tidak terlalu menyukai desain Anda karena Outlook tidak mendukung gambar latar belakang. Bahkan, tergantung pada kebutuhan klien Anda, Anda mungkin ingin melewatkan proses Photoshop sepenuhnya untuk memaksa diri Anda agar desainnya praktis. Yang mengatakan, kita akan menggunakan Photoshop di sini sehingga Anda bisa mendapatkan ide yang lebih baik dari rencana kita.

Anda dapat menggunakan gambar latar belakang untuk alasan dekoratif, selama email dapat terbaca dan masuk akal tanpa mereka. Sebagai contoh, kita akan menambahkan sedikit gradien ke header kita, tetapi itu bukan masalah besar jika itu tidak muncul.

Tipis adalah lebih baik

Karena email klien Tinjauan windows sering hanya sebagian kecil dari layar lebar, Anda umumnya ingin menjaga desain Anda di bawah tentang 600px. Tak seorang pun suka horisontal scroll bar.

Konsisten

Ingat bahwa kita akan menggunakan sifat-sifat tidak fleksibel seperti cellpadding dan cellspacing untuk spasi keluar elemen kami. Bijaksana untuk mencoba dan menjaga jarak antara unsur-unsur yang konsisten.

Desain kami

Desain ini mirip dengan satu I digunakan untuk klien newsletter musim panas lalu, tetapi disederhanakan. Ianya tidak cantik, tapi itu bukan titik di sini. Ini sederhana dan konsisten, dan memiliki sejumlah pilihan tata letak sehingga Anda dapat melihat bagaimana mereka berbeda.

111

Langkah 2: Perencanaan kode kita

Dalam pengalaman saya, kode HTML email jadi sangat rumit, sangat cepat. Hal ini penting untuk memiliki rencana serangan. Jadi di sini adalah rencana (kami akan kembali ke hal ini, jangan khawatir jika Anda tidak mengikuti).

Pertama, kita mulai dengan satu besar 100% lebar tabel dengan latar belakang abu-abu, ini adalah meja "pembungkus" kami.

Selanjutnya, mencatat bahwa ada tiga lebih tabel di dalam bungkus tabel: satu di bagian atas untuk link "Lihat di browser", satu di tengah-tengah untuk konten utama, dan satu di bagian bawah untuk "unsubscribe" link.

2a2a2a

Akhirnya, dalam tabel utama, setiap bagian horisontal konten akan dalam baris tabel dan sel tabel. Sel-sel tabel ini, pada gilirannya, akan berisi meja lain untuk host setiap bagian konten:

2b2b2b

Cellpadding dan Celispacing

.Daripada menggunakan margin dan padding properti CSS, kita akan menggunakan atribut HTML cellpadding dan cellspacing Memikirkan cellpadding sebagai hampir sama dengan CSS padding - ruang di dalam elemen, di sekitar isi. Cellspacing merupakan ruang antara sel data di atas meja.

Meja #main kami akan memiliki 15px dari cellspacing, sehingga kita akan memiliki 15px spasi-putih di sekitar bagian konten seluruh utama, dan 15px antara setiap kumpulan horisontal. Cellpadding dan cellspacing hanya berlaku untuk tabel orangtua, bukan anak-anak. Jika kita tidak ingin cellpadding atau cellspacing, kita perlu menentukan bahwa untuk setiap meja.


Langkah 3: Mengkodekannya

Sekarang kita dapat mulai proses pengkodean newsletter kitai, bagian per bagian. Bertentangan dengan praktik terbaik, kita akan melakukan beberapa styling juga dengan struktur. Kita akan mulai dengan tata letak, termasuk semua spasi dan padding dan warna latar belakang, setelah itu, kita akan melakukan tipografi dan hal-hal CSS lain.

Mempersiapkan

Setup untuk email benar-benar sederhana: hanya tag html, kepala dan tubuh yang terlibat. Mari kita tambahkan tabel pembungkus dan tiga tabel utama yang kita bahas sebelumnya.

Sejauh doctypes bersangkutan, ada beberapa pendekatan yang berbeda, seperti yang dijelaskan dalam artikel ini. Dalam kasus kita, saya telah memutuskan untuk tidak menggunakan satu, karena kita tidak perlu ada salah satu hal yang kita akan dengan menyatakan doctype. Itu akan mendapatkan dilucuti keluar dalam kebanyakan kasus pula.

Pada umumnya, lebih baik untuk menetapkan lebar ke sel-sel tabel individu daripada ke meja itu sendiri.

Perhatikan bahwa tabel pesan dua memiliki nilai-nilai cellpadding 20px. Ini akan ruang keluar mereka paragraf dari konten utama. Tabel utama telah 15px dari cellspacing. Ini adalah untuk membentuk ritme vertikal yang konsisten. Karena setiap bagian dalam sel tabel sendiri, akan ada 15px antara mereka semua.

Juga perhatikan bahwa tabel siap untuk menyelaraskan = "pusat", dan kami telah secara eksplisit mendefinisikan lebar mereka. Dalam HTML email, umumnya terbaik tidak untuk menentukan lebar untuk membungkus tabel. Anda lebih baik mendefinisikan lebar untuk setiap sel, tetapi dalam kasus ini kita akan mematahkan aturan ini karena kita memiliki cellspacing/cellpadding perlu khawatir.

Pesan tabel

Ini super sederhana: hanya paragraf dalam sel-sel yang pusat-blok.

Pesan bawah adalah persis sama.

Header

Header ini cukup sederhana, hanya satu kolom, dengan tiga baris. Karena kita memiliki latar belakang biru yang bagus, kita akan membutuhkan beberapa padding di sekitar setiap sel untuk mendapatkan teks dari tepi.

Ingat untuk mengatur lebar bidang setiap sel, yang dalam kasus ini adalah 570px (600px-15px dari cellspacing di setiap sisi). Kami juga telah menetapkan properti rata untuk tanggal ke kanan.  Tepat sekarang, kitai tidak menambahkan dalam gambar latar belakang, kita akan melakukannya nanti. Dalam waktu yang berarti, hanya menggunakan biru ringan.

Perhatikan bahwa kita menggunakan bgcolor bukan gaya = "latar belakang:". Hal ini karena nilai-nilai html lebih baik didukung di klien email dari CSS properti.

3a3a3a

Itulah apa yang kita punya sejauh ini, tampak cukup buruk, tapi tata letak adalah hanya apa yang kita inginkan.

Bagian Konten - 2-Kolom

Bagian konten pertama kita adalah kiri-blok gambar dengan dua berita utama di samping itu. Daripada menggunakan CSS mengapung seperti kita biasanya, kita akan membuat sebuah tabel dengan tiga sel:

  • satu untuk gambar,
  • satu untuk ruang antara gambar dan berita,
  • dan akhirnya satu untuk tajuk berita utama.
3b3b3b

Untuk gambar dengan perbatasan, kita akan sarang meja lain dalam sel dan mengatur cellpadding ke 5px dan memberikan warna latar belakang abu-abu. Cellpadding menambah lebar elemen, jadi kita perlu mengurangi lebar sel didefinisikan oleh 10px.

Pemberitahuan: 

  • Kita telah menambahkan baris tabel kosong dan sel di atas konten. Karena kita memiliki 15px dari cellspacing, kita dapat menggunakan sel kosong untuk menambahkan 15px jarak antara unsur-unsur. Dalam pengujian saya, ini bekerja baik kosong, tetapi Anda selalu bisa menambahkan sebuah ruang bebas-melanggar untuk memastikan.
  • Kami menetapkan v-align properti ke top. Hal ini penting, karena itu menyelaraskan setiap sel dengan bagian atas baris. Default menengah, yang mengarah ke beberapa hasil yang aneh.
  • Kita menggunakan dummy gambar dari dummyimage.com karena semua gambar dalam HTML email harus host (lebih pada yang kemudian) dan itu jauh lebih mudah untuk Gunakan dihasilkan gambar. Periksa situs, ini menjelaskan cara menentukan gambar yang Anda inginkan dengan URL.

Bagian konten - 1-Kolom

Ini adalah bagian benar-benar sederhana: hanya satu-kolom tabel dengan paragraf dalam. Jangan lupa untuk mengatur lebar bidang sel dan untuk mengatur meja untuk pusat menyelaraskan.

Pembagi

Untuk menambah ruang vertikal (lebih dari 15px dari cellspacing kami memiliki) kita harus menggunakan gambar spacer. Seperti 90 's! Kita bisa menggunakan spacer gif dan meng-upload, tetapi pada saat itu lebih cepat untuk hanya menggunakan gambar dummy lain. Saya akan meninggalkan itu abu-abu sehingga Anda dapat melihatnya, tapi kemudian kita bisa mengaturnya putih pada putih.

Yang memberikan kita sesuatu seperti ini:

3c3c3c

Bagian Konten - 3-Kolom

Untuk bagian 3-kolom, kita menggunakan sel-sel tabel lima, satu untuk setiap kolom, dan satu antara kolom untuk memisahkan mereka.

3d3d3d

Cukup mudah, menggunakan metode yang sama untuk perbatasan seperti yang kita lakukan di bagian 2-kolom. Jangan lupa v-align!

Tiga teks kolom adalah persis proses yang sama.

Tambahkan di lain pembagi di bagian bawah, dan kami hampir di sana. 

3e3e3e

Sisanya...

Segala sesuatu yang lain adalah hanya mengulangi apa yang telah kita lakukan: Bagian 2-kolom dan bagian 1-kolom dengan pemisah antara mereka.

Dan tata letak yang utama sekarang lengkap:

3f3f3f

Sebuah kata pada gambar

Tidak seperti halaman web biasa, Anda tidak bisa hanya meletakkan semua gambar Anda dalam folder dan kemudian menggunakan jalur relatif untuk link ke mereka. Semua link harus mutlak! Ketika saya sedang mengembangkan email, saya biasanya meng-host gambar pada subdomain atau Amazon S3. Ketika saya sudah siap untuk mengirim email untuk klien, saya memindahkan semua gambar ke subdomain dari situs web mereka.

Semua link gambar harus mutlak!


Langkah 4: Mendesain Email

Kita tidak dapat menggunakan stylesheet eksternal, dan kita tidak dapat menanamkan CSS di kepala email, karena beberapa klien akan menghapus seluruh tag kepala, atau mengabaikan tag gaya. Kita akan harus menggunakan gaya inline, yang sangat menyebalkan. Untungnya, ada berguna layanan yang tersedia yang akan mengambil tertanam CSS dan membuatnya inline. Saya menggunakan sebuah situs web disebut Premailer, mana Anda dapat menyisipkan kode langsung dan output hal yang sama dengan inline CSS.

Kami akan melakukan tertanam CSS untuk tutorial ini, maka kita akan membuatnya sejalan dengan premailer.

Premailer mengambil tertanam CSS dan membuatnya inline!

Reset Dasar

Kita tidak akan melakukan reset yang sulit dengan * pemilih seperti yang mungkin Anda lakukan untuk halaman web. Menggunakan default benar-benar akan menghasilkan hasil yang lebih konsisten. Unsur-unsur hanya padding/margin yang kita perlu menyetel ulang adalah orang yang akan memiliki ruang di sekitar mereka (dari cellpadding/cellspacing) seperti judul header kami, atau paragraf kami.

Anda juga akan melihat margin di sekitar tabel pembungkus, yang hanya merupakan penataan standar pada elemen tubuh.

Tipografi

Tidak ada yang istimewa tentang tipografi untuk email karena cukup banyak yang sama akan menjadi halaman web. Jangan gunakan deklarasi pendek (seperti font:) karena Anda tidak akan mendapatkan hasil yang konsisten.

Dan lihat: sekarang jauh lebih baik!

3g3g3g

Gambar latar belakang

Gambar latar belakang bekerja hampir sama dengan di halaman web, kecuali kadang-kadang tidak berfungsi! Pastikan Anda memiliki warna latar belakang fallback, yang ditetapkan ke sel sebagai bgcolor, untuk klien yang tidak mendukung latar belakang CSS.

Miscellaneous gaya lainnya

Kita perlu memberi style pada setiap tautan atau mereka akan mewarisi warna default yang dimiliki klien email, dan memungkinkan juga menambahkan perbatasan itu di sekitar tabel utama. Kita juga akan menambahkan display : block ke semua gambar kami, ini memecahkan bug di Outlook dan Hotmail.

Pastikan untuk menambahkan "display: block" ke semua gambar untuk mencegah bug margin aneh di Hotmail.

3h3h3h

!Dan kita sudah selesai dengan bagian yang mudah. Sekarang ke pengujian!


Langkah 5: Pengujian

Proses pengujian adalah bagian terpenting dan paling menjengkelkan dalam membuat email HTML. Ketika saya mengerjakan email, saya sering menguji, di setiap tahap, sehingga saya bisa menentukan dengan tepat apa yang salah. Ada banyak klien untuk diuji, dan banyak cara untuk menguji mereka, mari kita selidiki semuanya.

Klien email

Ini adalah klien yang harus Anda uji, paling tidak:


Cara mengujinya

Kita harus menemukan cara untuk mengirim HTML email pertama. Klien Anda mungkin akan mengatur dengan layanan seperti Mailchimp atau Campaign Monitor, yang akan memungkinkan Anda untuk menguji dan mengirimkan email kampanye.

Anda mungkin berpikir saya mempersulit hal ini secara tidak perlu, karena beberapa klien email membiarkan Anda menempelkannya dalam kode HTML. Namun, ini dapat menyebabkan hasil yang berbeda daripada saat menggunakan aplikasi kampanye email. Uji dengan aplikasi agar aman.


Menguji dengan Mailchimp

Metode pilihan saya melibatkan penggunaan Mailchimp untuk menguji dan mengirim kampanye pengujian. Mailchimp gratis untuk hingga 500 penerima, jadi Anda tidak perlu membayar untuk pengujian. Ini memiliki antarmuka yang sederhana dan mudah digunakan. Berikut adalah panduan langkah demi langkah cepat:

  • Mendaftar untuk akun Mailchimp gratis, dan tambahkan daftar penerima akun email uji Anda: Hotmail, Yahoo !, dan Gmail, dan masuk ke akun baru Anda.
  • Pilih campaign dan pilih regular ol" campaign "dari halaman akun utama. Isi info dasar tentang campaign, Anda hanya perlu nama untuk tujuan pengujian.
  • Pada halaman design , pilih Import -> Paste in code dan pastikan Anda memilih Automatic CSS Inliner
  • Jika Anda tidak menggunakan Mailchimp, pastikan Anda menggunakan Premailer untuk mendapatkan inline CSS Anda
  • Lanjutkan sampai Anda tiba di halaman confirm dan pilih  send test. Anda dapat mengirim beberapa tes dari sini tetapi setelah itu, Anda harus benar-benar mengirim email ke daftar Anda.

Menguji dengan Litmus

.Litmus adalah aplikasi web yang menguji email HTML di semua jenis versi dari semua jenis klien. Layanan lengkap membutuhkan biaya, tetapi jika Anda tidak dapat meyakinkan klien Anda untuk membayar, versi gratisnya masih memungkinkan Anda menguji di Gmail lama dan Outlook 2003, yang masih berguna.


Hasil - Yang baik

Beberapa tes kami ternyata cukup baik:

4a4a4a

Apple Mail

4b4b4b

Thunderbird


Hasil - The Bad-ish

Beberapa agak sedikit, tetapi kurang lebih sama:

4c4c4c

Gmail (safari)

4d4d4d

Outlook 2007

4e4e4e

Outlook 2003

4f4f4f

Yahoo! Mail


Hasil - Yang jelek

Kami juga mengalami beberapa kegagalan.

4g4g4g

Hotmail (GREEN???)

4h4h4h

Old Gmail (explorer)

Membersihkan kekacauan

Semua hal dipertimbangkan, ini adalah tes yang cukup sukses, karena saya menguji banyak elemen di Outlook dan Gmail saat saya pergi. Masalah yang kami miliki dengan Gmail dan Hotmail lama terkait dengan lembar gaya default yang digunakan klien. Merek gila dan istimewa Microsoft yang unik telah memberi kami lembar gaya default yang mengesampingkan semua judul dengan gaya green text dengan penandaan! Important. Terkadang saya cukup yakin mereka ingin membuat saya gila.

4i4i4i

Untuk mengatasi ini, kita perlu menambahkan deklarasi ! important untuk semua gaya warna heading kita seperti ini:

Untuk Gmail lama, kami memiliki masalah yang sama di header: Gmail menambahkan margin ekstra ke bagian bawah tag heading. Kita hanya perlu mengesampingkan margin-bottom secara khusus.

Dan kami memperbaiki Hotmail:

4j4j4j

Jadi begitulah, email HTML fungsional, konsisten (jika sedikit polos). Memang menyebalkan, ya, tetapi begitu sistem Anda berjalan, itu berjalan jauh lebih cepat. Cobalah untuk menjaga kode Anda dikomentari dan diorganisir dengan baik sehingga Anda dapat menggunakan kembali bagian-bagiannya nanti.

Jika Anda dapat membujuk klien Anda untuk mendaftar untuk sesuatu seperti Litmus, hidup Anda akan jauh lebih mudah. Anda juga dapat menguji banyak klien melalui versi berbayar dari Mailchimp dan Campaign monitor.


Penyelesaian masalah

Anda pasti akan menemukan masalah yang belum saya bahas di sini, tetapi saya memiliki beberapa saran umum untuk menyelesaikannya:

  • Periksa matematika Anda: Saya tidak ingat berapa kali saya mengacaukan tata letak dengan tidak menambahkan lebar sel tabel secara akurat. Ingatlah untuk memperhitungkan cellpadding: menambah lebar sel Anda.
  • Periksa stylesheet default: gunakan sesuatu seperti Firebug atau Webkit Inspector untuk memeriksa apakah klien browser mengganti-ganti style Anda. Jika ini terjadi, tambahkan ! important deklarasi harus menyelesaikan masalah.
  • Lihat itu: selalu ada peluang bagus seseorang mengalami masalah Anda sebelumnya. Jika Google tidak membantu, cobalah meramban kiat dan trik di blog layanan campaign email populer, beberapa orang mencari email sebagai penghidupan, dan mereka tahu barang-barang mereka!
  • Hancurkan: Jika Anda tidak dapat menemukan kesalahan Anda, kembalilah ke awal dan periksa email Anda sedikit demi sedikit sampai Anda menemukan apa yang memecahnya.

Hasil

Ini kode terakhir untuk referensi Anda:

Inilah hasil akhir kami seperti jika kita menggunakan gambar nyata:

4k4k4k

Tidak ada yang benar-benar istimewa, tetapi Anda harus mulai merancang email HTML Anda sendiri. Tentu saja ada cara lain untuk melakukan semua yang telah saya lakukan, tetapi dengan email HTML, yang paling penting adalah cara kerjanya. Tidak banyak konsep standar web atau praktik terbaik di sini.


Sumber Daya

Saya harap Anda belajar sedikit hari ini! Saya tahu saya menemukan proyek email HTML pertama saya menjadi salah satu yang paling mendidik yang pernah saya kerjakan. Tampaknya adil untuk membagikan apa yang saya pelajari!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.