- Beranda
- Komunitas
- Tech
- Website, Webmaster, Webdeveloper
Tutorial Cara Membuat HTML Email
TS
Marcelc
Tutorial Cara Membuat HTML Email
Kemarin saya sudah share mengenai apa itu HTML Email. Sekarang saya mau share bagaimana cara membuat sebuah HTML Email! Click disini juga untuk lebih banyak article seperti ini ya 
Silakan baca articlenya! Atau click disini untuk baca di web version dimana code2 yang dicontohkan lebih mudah di baca dengan syntaxt highlighting.
Menulis HTML Email Pertama Anda
Salah satu cara yang paling efisien untuk membangun relasi dengan konsumen adalah dengan menggunakan email. Tetapi kita tidak ingin mengirim mereka sembarang email. Kita ingin mengirim email yang terlihat professional, penuh makna dan juga persuasif. Hal ini dapat kita capai dengan HTML email.
Mungkin anda sudah ketahui, HTML email memiliki banyak limitasi tetapi juga memiliki keistimewaan dan keunggulan yang luar biasa. Anda sangat tertarik dengan keistimewaan dan keunggulan yang dapat dicapai oleh HTML email. Yang perlu anda lakukan sekarang hanyalah membuat HTML email tersebut, tetapi anda sama sekali belum pernah membuat HTML email. Kalau begitu, mari kita menulis HTML email pertama anda!
Seperti bagaimana ada banyak sekali topic dan component bagi website dan application yang dapat didalami designer dan developer, hal yang sama juga dapat ditemukan di HTML email. Ada banyak sekali topic seperti best practices, design techniques, responsive email, email marketing philosophy dan lain lain yang dapat anda pelajari untuk membuat HTML email yang lebih sempurna. Dan sama seperti subjek-subjek lain, dibutuhkan waktu, latihan dan dedikasi untuk benar-benar menguasai HTML email.
Tetapi dalam ranka memahami konsep pengcodingan HTML email, kita akan fokus terhadap membuat sebuah HTML email yang dasar dengan pengetahuan HTML dan CSS yang sudah anda kuasai. Kita juga akan membuat agar paling tidaknya email dapat tampil dengan konsisten di tiga webmail utama yaitu: Gmail, Yahoo dan Hotmail. Saya harap pada akhir article ini, anda sudah memiliki HTML email yang siap anda kirim!
Sedikit Mengenai Design Yang Kita Gunakan
Untuk mempermudah mempelajari cara membuat HTML Email, saya akan memberikan anda sebuah konteks. Saya ingin mengajak teman-teman saya untuk pergi ke Korea dan saya ingin mengirimkan email ke teman-teman saya mengenai mengenai makanan enak di Korea agar mereka ingin pergi. Tetapi agar mereka lebih tertarik, saya ingin membuat sebuah HTML email agar email yang saya kirim terlihat lebih menarik dan mengundang.
Dalam design ini, saya menggunakan warna biru mudah sebagai backgroundnya. Saya juga akan menulis sebuah header yang bertulis, “Ke Korea Yuk! Makanannya Enak-Enak!”. Selain itu, saja juga akan memasukan content mengenai makanan Korea Tteokbokki dan Jajangmyeon dimana kedua content ini akan ditemani oleh sebuah gambar dan juga kutipan text yang akan saya ambil dari Wikipedia. Terlebih lagi, saya juga akan memasukan link di bagian text agar teman saya dapat meng-click tersebut untuk mengetahui lebih lanjut mengenai makanan yang saya sebut-sebut ini.
Design dari email ini sangatlah simple. Saya yakin anda dapat membuat sebuah design yang jauh lebih indah dari design yang kita gunakan di tutorial ini! Tidak ada batas dari kreatifitas yang bisa anda tunjukan.
Memulai Membuat HTML Email
Untuk memulai, buka sebuah file baru dengan IDE pilihan anda. Simpan dimanapun dengan format .html. Email berbeda dengan website dimana email tidak memiliki struktur folder maupun file terpisah dan semua yang ingin anda tampilkan di dalam email harus dicode hanya di dalam dokumen HTML yang sedang kita buat.
Lalu buka file HTML tersebut di browser pilihan anda agar kita dapat melihat semua perubahan yang kita buat di email kita. Dengan begini, persiapan kita sudah selesai.
Let’s Get Our Hands Dirty
Mari kita tulis baris code pertama kita. Perlu diketahui kalau hampir semua mail client akan membuat block tags <head>. Terlebih lagi, email tidak dapat memiliki file external. Oleh karena itu, external CSS maupun internal CSS di dalam tags <style> yang berada di dalam tags <head> tidak akan berfungsi. Satu-satunya cara adalah dengan menggunakan inline CSS. Tetapi inline CSS bukanlah sesuatu yang efisien untuk dilakukan. Tidak hanya anda akan sulit melihat code yang anda tulis dan mencari error di code anda, anda harus melakukan banyak sekali repetisi untuk style yang diulang-ulang.
Solusi dari masalah ini adalah untuk code dengan internal CSS terlebih dahulu dimana semua code CSS akan kita tulis di dalam tags <style>. Nantinya, code yang kita miliki akan di convert menggunakan CSS inliner tools yang nanti akan dibahas secara lebih lanjut. Oleh karena itu, struktur code kita akan menjadi seperti ini:
<head>
<style>
<style>
</head>
<body>
</body>
Anda mungkin juga sudah mengetahui kalau berbeda dengan website yang sudah dapat menikmati teknologi HTML 5 dan CSS3. Developer HTML email harus menulis code dengan pola pikir internet pada tahun 90-an. Metode layout menggunakan div, padding dan margin tidak disarankan karena tidak akan memberikan tampilan yang konsisten. Untuk mendapatkan tampilan yang konsisten, anda harus menggunakan table. Tetapi, memanipulasi table agar berfungsi seperti div, padding dan margin bukanlah sesuatu yang mudah dan memahami metode layout menggunakan table membutuhkan contoh dan tutorial tersendiri. Oleh karena itu, sebagai langkah pertama anda memahami konsep coding HTML email dengan metode layout yang kita sudah familiar menggunakan div.
Bagi anda yang khawatir, div, padding dan margin disupport oleh semua mail client utama tetapi tidak konsisten dimana bila kita mengandalkan teknologi ini, tampilan email kita dapat berubah-ubah dari satu mail client ke mail client lain dalam hal spacing. Contohnya, Hotmail tidak mendukung margin karena Hotmail menerapkan margin milik mereka sendiri.
Oleh karena itu, struktur dasar tampilan, yang akan ditulis di dalam tags <body> kita akan menjadi seperti ini:
<table class="container" cellspacing="0" cellpadding="0">
<tr>
<td>
<p class="preheader">Pergi rame-rame pas libur kayaknya seru deh..</p>
<div class="wrapper">
</div>
</td>
</tr>
</table>
Sedikit mengenai code di atas, kita menggunakan element <table> sebagai canvas dari email kita. Di element inilah kita dapat menerapkan warna background. Biasanya background kita terapkan di element <body> tetapi mail client sering membuat tags <body> dari email yang diterima. Kita dapat menggunakan <div> sebagai latar belakang tetapi entah kenapa, support bagi <div> sebagai latar belakang tidak konsisten dan beberapa mail client tidak menampilkan element <div> pertama yang ada di dalam email. Oleh karena itu, agar kita dapat menampilkan sebuah background, kita akan melapisi semua code kita dengan element <table> dan menggunakan metode layout <div> di dalam lapisan ini.
Element <table> juga memiliki attribute cellspacing="" dan cellpadding="" yang kedua-keduanya kita berikan value 0. Kedua attribute ini digunakan untuk menentukan jarak antara border dan content di dalam table tetapi karena kita ingin melakukan hal tersebut menggunakan CSS, kita matikan kedua attribute ini dengan memberikan value 0.
Preheader
Di code snippet di atas, anda mungkin heran dengan element <p> yang saya beri class .preheader berserta dengan teks di dalamnya. Bila anda perhatikan inbox email anda, di halaman home inbox ada terdaftar semua email yang anda terima diurut dari email terbaru. Struktur dari list ini adalah nama pengirim diikuti subjek email dan juga teks disebelah subjek yang diambil dari kalimat pertama di dalam email. Kita ingin menggunakan ruang ini agar menampilkan pesan secara maksimum dan itulah gunanya preheader, tempat untuk menampilkan kalimat pertama agar tampil di sebelah subjek email. Biasanya preheader diisi dengan summary email atau pesan yang relefan dengan subjek email dan menarik penerima untuk membaca isi email.
Contoh sebuah preheader di tampilan inbox. Preheader merupakan text dengan warna pudar di sebelah subjek setiap email
Contoh sebuah preheader di tampilan inbox. Preheader merupakan text dengan warna pudar di sebelah subjek setiap email.
Header
Secara singkat, code ini ditulis di dalam element <div> yang memiliki class .wrapper.
<h1 class="header">Ke Korea Yuk! Makanannya Enak-Enak!</h1>
Walaupun tidak harus, banyak HTML email memiliki sebuah header. Seperti header di media lain, header di dalam email bersifat dan digunakan untuk alasan. Header dapat digunakan untuk menunjukan brand, judul, subjek email dan banyak lagi. Contohnya saya menggunakan header untuk menampilkan sebuah subjek.
Kita juga akan mengikuti best practice yang sering digunakan di pengcodingan website yaitu untuk menggunakan element <h1> untuk heading utama. Beberapa dari anda mungkin akan tergoda untuk menggunakan element <p> dan di style agar terlihat seperti sebuah header. Hal ini tidak efisien karena mungkin email anda dibuka di mail client yang akan menimpa element-element HTML dengan stylenya sendiri dan element <p> yang dijadikan header akan terlihat aneh.
Image
Untuk gambar, caranya adalah sama seperti pengcodingan website yaitu menggunakan element <img> dengan attribute src="". Perbedaannya adalah, karena email tidak memiliki struktur file dan folder, anda harus menulis link absolute dari gambar anda.
Untuk mendapatkan link absolute, upload gambar anda di image hosting service seperti:
Imgur
Photobucket
Imageshack
Anda bisa menemukan banyak lagi dengan Google Image Sharing Service
Dengan begitu, saya menambahkan code ini di dalam element div dengan class wrapper di bawah element h1.
<img class="image" src="http://i.imgur.com/DmW2rWw.jpg">
Terlihat bagaimana source dari gambar merupakan link absolute yang mengarah ke gambar yang sudah saya upload ke Imgur. Saya juga memberikan element ini class .image agar bisa saya style dengan mudah nantinya.
Text
Untuk text, saya ambil kutipan dari halaman Wikipedia mengenai topik yang bersangkutan. Code saya menjadi seperti ini.
<p class="text"><a href="http://en.wikipedia.org/wiki/Tteokbokki">Tteokbokki</a> is a popular Korean snack food made from soft rice cake, fish cake and sweet red chili sauce. It is commonly purchased from street vendors or pojangmacha. Originally it was called tteok jjim and was a savory braised dish of sliced rice cake, meat, eggs, and seasoning. </p>
Code ini saya taruh di bawah code gambar yang sudah saya tambahkan tadi. Saya juga berikan element link yang melapisi tulisan Ttoekbokki agar teman saya dapat click link tersebut untuk tahu lebih lanjut mengenai Tteokbokki. Selain itu saya juga berikan class .text agar text ini dapat saya style lebih lanjut.
Content Kedua
Seperti yang anda lihat di design yang akan kita buat, saya akan menambahkan content kedua berisi content mengenai Jajangmyeon. Dengan mudah saya tinggal menambahkan balok code ini di bawah element <p> yang baru saya tambahkan tadi.
<img class="image" src="http://i.imgur.com/5eM4yN1.jpg">
<p class="text"><a href="http://en.wikipedia.org/wiki/Jajangmyeon">Jajangmyeon</a>, is a noodle dish topped with a thick sauce made of chunjang (a salty black soybean paste), diced pork and vegetables, and sometimes also seafood. Jajang, the name of the sauce, literally means "fried sauce." Myeon means "noodle". </p>
Seperti yang anda lihat, untuk content kedua kita, kita menggunakan code image dan text yang sama dari content sebelumnya dan hanya berbeda di link gambar dan text yang digunakan.
Code Akhir HTML
Code HTML akhir kita dengan semua element menjadi seperti ini. Semua code ini ditulis dalam tags <body>.
<table class="container" cellspacing="0" cellpadding="0">
<tr>
<td>
<p class="preheader">Pergi rame-rame pas libur kayaknya seru deh...</p>
<div class="wrapper">
<h1 class="header">Ke Korea Yuk! Makanannya Enak-Enak!</h1>
<img class="image" src="http://i.imgur.com/DmW2rWw.jpg">
<p class="text margin"><a href="http://en.wikipedia.org/wiki/Tteokbokki">Tteokbokki</a> is a popular Korean snack food made from soft rice cake, fish cake and sweet red chili sauce. It is commonly purchased from street vendors or pojangmacha. Originally it was called tteok jjim and was a savory braised dish of sliced rice cake, meat, eggs, and seasoning.
</p>
<img class="image" src="http://i.imgur.com/5eM4yN1.jpg">
<p class="text"><a href="http://en.wikipedia.org/wiki/Jajangmyeon">Jajangmyeon</a>, is a noodle dish topped with a thick sauce made of chunjang (a salty black soybean paste), diced pork and vegetables, and sometimes also seafood. Jajang, the name of the sauce, literally means "fried sauce." Myeon means "noodle".
</p>
</div>
</td>
</tr>
</table>
Semua element yang kita butuhkan sudah ada, kita tinggal memberikan style kepada element ini.
Saatnya Memberikan Style
Kita akan menggunakan CSS untuk mengatur agar HTML email kita tampil sesuai seperti apa yang kita inginkan. Semua code yang bersangkutan akan ditulis di dalam tags <style>. Seperti biasa kita mulai dengan code ini:
*{margin:0;padding:0;}
Alasannya sama seperti coding untuk website, agar menghilangkan margin dan padding default yang tidak diinginkan.
Kita mulai dengan style element table yang memiliki class .container terlebih dahulu.
.container{
width: 100%;
border: none;
background: #00E2C5;
font-family: Helvetica;
padding: 20px;
}
Mari saya jelaskan code di atas. Ingat kalau kita tidak bisa memberikan style kepada element <body>. Oleh karena itu, kita menggantikannya dengan element <table>. Karena <table> dan <body> memiliki karakteristik yang berbeda, kita harus memberikan style kepada <table> agar <table> berkerja serupa dengan <body>.
Pertama adalah dengan property width dengan value 100%. Ini akan membuat <table> memenuhi ukuran layar seperti <body>. Kita juga ingin memberikan value none kepada property border karena element <table> memiliki border bawaan yang tidak kita inginkan. Dengan kedua property ini element <table> sudah berkerja serupa dengan element <body> dan dengan begitu kita bisa memberikan property background warna yang kita inginkan. Anda juga bisa menggunakan gambar bila anda mau dan ingat, gambar tersebut harus dalam bentuk absolute link. Sama seperti <body>, kita juga akan menentukan font yang kita gunakan di element <table>. Saya memilih font Helvetica dimana saya memberikan property font-family value Helvetica. Terakhir, saya berikan padding dengan value 20px agar wrapper yang saya buat tadi tidak akan menyentuh pinggiran layar.
Wrapper
Wrapper adalah element div dengan class wrapper dimana kita akan menaruh semua content dari email. Web developer yang membuat website sudah mulai transisi dari website yang menggunakan wrapper menuju website yang menggunakan seluruh ruang yang ada di layar. Tetapi untuk HTML email, kita tetap harus menggunakan wrapper karena keterbatasan ruang yang diberikan mail client. Wrapper akan sangat membantu agar space dan layout dari element-element tidak pindah, hancur dan akan selalu berada di tempat.
.wrapper{
max-width: 600px;
background: #ffffff;
margin: 0 auto;
padding: 20px;
}
Code di atas tidak menggunakan property width melainkan property max-width. Alasannya adalah agar wrapper kita fluid dan dapat mengecil. Dengan begitu, bila email kita di tampil di layar yang lebarnya kurang dari 600px, email kita akan tetap tampil jelas dan proposional. Kita juga memberikan property background warna putih tetapi anda bisa berkreasi dengan hal ini. Satu property yang penting bagi wrapper adalah property margin dengan value 0 auto. Ini digunakan agar wrapper kita selalu berada di tengah-tengah layar. Terakhir adalah property padding dengan value 20px yang digunakan agar content di dalam wrapper tidak menyentuh pinggiran wrapper.
Header
Sekarang kita akan meberikan style untuk header. Kita akan menggunakan code ini:
.header{
text-align: center;
margin-top: 10px;
margin-bottom: 20px;
color: #0a87db;
}
Property text-align dengan value center digunakan agar header kita berada di tengah-tengah halaman email. Property margin-top dan margin-bottom digunakan untuk spacing di atas dan bawah header. Value dari kedua property ini dipilih bukan karena alasan khusus tapi karena saya sesuaikan dan spacing yang saya lihat secara visual. Berarti, untuk email anda kemungkinan besar anda akan memiliki value yang berbeda. Terakhir saya warna header dengan warna biru dimana property color saya berikan value berupa hex untuk warna biru pilihan saya.
Image
Code untuk image juga tidaklah rumit.
.image{
width: 100%;
margin-bottom: 10px;
}
Inti dari code di atas adalah agar gambar dapat memenuhi space yang disediakan wrapper. Terutama karena ukuran gambar berbeda-beda, kita ingin gambar dapat tampil proporsional. Oleh karena itu kita memberikan property width dengan value 100% yang mengartikan kalau lebar gambar akan mengikuti lebar wrapper. Tinggi gambar akan dengan otomatis mengikuti lebar gambar secara proporsional. Dengan begitu, walaupun lebar gambar tidak sebesar lebar wrapper yaitu 600px, gambar akan dengan otomatis memenuhi lebar wrapper.
Property margin-bottom dengan value 10px digunakan agar gambar tidak menyentuh text yang berada di bawahnya.
Text
Sama seperti element lain, style untuk text juga sangat simple.
.text{
font-size: 18px;
}
.text a{
color: #0a87db;
font-weight: bold;
}
Property font-size dengan value 18px digunakan agar text menjadi lebih besar. Anda tidak perlu mengikuti ini karena ini hanyalah preferensi design saya. Saya juga menggunakan selector .text a untuk menarget link yang berada di dalam element paragraph. Disini saya berikan link warna biru dengan value hex yang diterapkan ke property color. Saya juga memberikan property font-weight dengan value bold agar link dapat lebih gampang dibedakan dari text yang lain. Perlu diingat, pseudo selector tidak berkerja di email dan oleh karena itu, kita harus membedakan link secara terang-terangan.
Preheader
Terakhir adalah preheader. Kita sudah membuat sebuah preheader dan preheader kita dapat terbaca di tampilan email seperti ini:
Akan tetapi, kita tidak ingin preheader kita terlihat karena kita ingin header menjadi text pertama di email. Tetapi kalau kita menghapus preheader, kita tidak dapat memanipulasi text yang berada di sebelah subjek karena text yang akan muncul adalah text dari header.
Cara menghilangkan preheader sangatlah gampang.
.preheader{
color: #00E2C5;
}
Kita berikan warna yang sama dengan warna background untuk text preheader. Hasilnya, preheader masih akan tetap ada di tempat tetapi tidak akan terlihat secara visual. Ini membuat email terlihat lebih indah. Bila anda mau, anda juga bisa menggunakan property font-size dan berikan value font yang sangat kecil agar preheader tidak mengganggu space di layout email anda.
Silakan baca articlenya! Atau click disini untuk baca di web version dimana code2 yang dicontohkan lebih mudah di baca dengan syntaxt highlighting.
Menulis HTML Email Pertama Anda
Salah satu cara yang paling efisien untuk membangun relasi dengan konsumen adalah dengan menggunakan email. Tetapi kita tidak ingin mengirim mereka sembarang email. Kita ingin mengirim email yang terlihat professional, penuh makna dan juga persuasif. Hal ini dapat kita capai dengan HTML email.
Mungkin anda sudah ketahui, HTML email memiliki banyak limitasi tetapi juga memiliki keistimewaan dan keunggulan yang luar biasa. Anda sangat tertarik dengan keistimewaan dan keunggulan yang dapat dicapai oleh HTML email. Yang perlu anda lakukan sekarang hanyalah membuat HTML email tersebut, tetapi anda sama sekali belum pernah membuat HTML email. Kalau begitu, mari kita menulis HTML email pertama anda!
Seperti bagaimana ada banyak sekali topic dan component bagi website dan application yang dapat didalami designer dan developer, hal yang sama juga dapat ditemukan di HTML email. Ada banyak sekali topic seperti best practices, design techniques, responsive email, email marketing philosophy dan lain lain yang dapat anda pelajari untuk membuat HTML email yang lebih sempurna. Dan sama seperti subjek-subjek lain, dibutuhkan waktu, latihan dan dedikasi untuk benar-benar menguasai HTML email.
Tetapi dalam ranka memahami konsep pengcodingan HTML email, kita akan fokus terhadap membuat sebuah HTML email yang dasar dengan pengetahuan HTML dan CSS yang sudah anda kuasai. Kita juga akan membuat agar paling tidaknya email dapat tampil dengan konsisten di tiga webmail utama yaitu: Gmail, Yahoo dan Hotmail. Saya harap pada akhir article ini, anda sudah memiliki HTML email yang siap anda kirim!
Sedikit Mengenai Design Yang Kita Gunakan
Untuk mempermudah mempelajari cara membuat HTML Email, saya akan memberikan anda sebuah konteks. Saya ingin mengajak teman-teman saya untuk pergi ke Korea dan saya ingin mengirimkan email ke teman-teman saya mengenai mengenai makanan enak di Korea agar mereka ingin pergi. Tetapi agar mereka lebih tertarik, saya ingin membuat sebuah HTML email agar email yang saya kirim terlihat lebih menarik dan mengundang.
Dalam design ini, saya menggunakan warna biru mudah sebagai backgroundnya. Saya juga akan menulis sebuah header yang bertulis, “Ke Korea Yuk! Makanannya Enak-Enak!”. Selain itu, saja juga akan memasukan content mengenai makanan Korea Tteokbokki dan Jajangmyeon dimana kedua content ini akan ditemani oleh sebuah gambar dan juga kutipan text yang akan saya ambil dari Wikipedia. Terlebih lagi, saya juga akan memasukan link di bagian text agar teman saya dapat meng-click tersebut untuk mengetahui lebih lanjut mengenai makanan yang saya sebut-sebut ini.
Design dari email ini sangatlah simple. Saya yakin anda dapat membuat sebuah design yang jauh lebih indah dari design yang kita gunakan di tutorial ini! Tidak ada batas dari kreatifitas yang bisa anda tunjukan.
Memulai Membuat HTML Email
Untuk memulai, buka sebuah file baru dengan IDE pilihan anda. Simpan dimanapun dengan format .html. Email berbeda dengan website dimana email tidak memiliki struktur folder maupun file terpisah dan semua yang ingin anda tampilkan di dalam email harus dicode hanya di dalam dokumen HTML yang sedang kita buat.
Lalu buka file HTML tersebut di browser pilihan anda agar kita dapat melihat semua perubahan yang kita buat di email kita. Dengan begini, persiapan kita sudah selesai.
Let’s Get Our Hands Dirty
Mari kita tulis baris code pertama kita. Perlu diketahui kalau hampir semua mail client akan membuat block tags <head>. Terlebih lagi, email tidak dapat memiliki file external. Oleh karena itu, external CSS maupun internal CSS di dalam tags <style> yang berada di dalam tags <head> tidak akan berfungsi. Satu-satunya cara adalah dengan menggunakan inline CSS. Tetapi inline CSS bukanlah sesuatu yang efisien untuk dilakukan. Tidak hanya anda akan sulit melihat code yang anda tulis dan mencari error di code anda, anda harus melakukan banyak sekali repetisi untuk style yang diulang-ulang.
Solusi dari masalah ini adalah untuk code dengan internal CSS terlebih dahulu dimana semua code CSS akan kita tulis di dalam tags <style>. Nantinya, code yang kita miliki akan di convert menggunakan CSS inliner tools yang nanti akan dibahas secara lebih lanjut. Oleh karena itu, struktur code kita akan menjadi seperti ini:
<head>
<style>
<style>
</head>
<body>
</body>
Anda mungkin juga sudah mengetahui kalau berbeda dengan website yang sudah dapat menikmati teknologi HTML 5 dan CSS3. Developer HTML email harus menulis code dengan pola pikir internet pada tahun 90-an. Metode layout menggunakan div, padding dan margin tidak disarankan karena tidak akan memberikan tampilan yang konsisten. Untuk mendapatkan tampilan yang konsisten, anda harus menggunakan table. Tetapi, memanipulasi table agar berfungsi seperti div, padding dan margin bukanlah sesuatu yang mudah dan memahami metode layout menggunakan table membutuhkan contoh dan tutorial tersendiri. Oleh karena itu, sebagai langkah pertama anda memahami konsep coding HTML email dengan metode layout yang kita sudah familiar menggunakan div.
Bagi anda yang khawatir, div, padding dan margin disupport oleh semua mail client utama tetapi tidak konsisten dimana bila kita mengandalkan teknologi ini, tampilan email kita dapat berubah-ubah dari satu mail client ke mail client lain dalam hal spacing. Contohnya, Hotmail tidak mendukung margin karena Hotmail menerapkan margin milik mereka sendiri.
Oleh karena itu, struktur dasar tampilan, yang akan ditulis di dalam tags <body> kita akan menjadi seperti ini:
<table class="container" cellspacing="0" cellpadding="0">
<tr>
<td>
<p class="preheader">Pergi rame-rame pas libur kayaknya seru deh..</p>
<div class="wrapper">
</div>
</td>
</tr>
</table>
Sedikit mengenai code di atas, kita menggunakan element <table> sebagai canvas dari email kita. Di element inilah kita dapat menerapkan warna background. Biasanya background kita terapkan di element <body> tetapi mail client sering membuat tags <body> dari email yang diterima. Kita dapat menggunakan <div> sebagai latar belakang tetapi entah kenapa, support bagi <div> sebagai latar belakang tidak konsisten dan beberapa mail client tidak menampilkan element <div> pertama yang ada di dalam email. Oleh karena itu, agar kita dapat menampilkan sebuah background, kita akan melapisi semua code kita dengan element <table> dan menggunakan metode layout <div> di dalam lapisan ini.
Element <table> juga memiliki attribute cellspacing="" dan cellpadding="" yang kedua-keduanya kita berikan value 0. Kedua attribute ini digunakan untuk menentukan jarak antara border dan content di dalam table tetapi karena kita ingin melakukan hal tersebut menggunakan CSS, kita matikan kedua attribute ini dengan memberikan value 0.
Preheader
Di code snippet di atas, anda mungkin heran dengan element <p> yang saya beri class .preheader berserta dengan teks di dalamnya. Bila anda perhatikan inbox email anda, di halaman home inbox ada terdaftar semua email yang anda terima diurut dari email terbaru. Struktur dari list ini adalah nama pengirim diikuti subjek email dan juga teks disebelah subjek yang diambil dari kalimat pertama di dalam email. Kita ingin menggunakan ruang ini agar menampilkan pesan secara maksimum dan itulah gunanya preheader, tempat untuk menampilkan kalimat pertama agar tampil di sebelah subjek email. Biasanya preheader diisi dengan summary email atau pesan yang relefan dengan subjek email dan menarik penerima untuk membaca isi email.
Contoh sebuah preheader di tampilan inbox. Preheader merupakan text dengan warna pudar di sebelah subjek setiap email
Contoh sebuah preheader di tampilan inbox. Preheader merupakan text dengan warna pudar di sebelah subjek setiap email.
Header
Secara singkat, code ini ditulis di dalam element <div> yang memiliki class .wrapper.
<h1 class="header">Ke Korea Yuk! Makanannya Enak-Enak!</h1>
Walaupun tidak harus, banyak HTML email memiliki sebuah header. Seperti header di media lain, header di dalam email bersifat dan digunakan untuk alasan. Header dapat digunakan untuk menunjukan brand, judul, subjek email dan banyak lagi. Contohnya saya menggunakan header untuk menampilkan sebuah subjek.
Kita juga akan mengikuti best practice yang sering digunakan di pengcodingan website yaitu untuk menggunakan element <h1> untuk heading utama. Beberapa dari anda mungkin akan tergoda untuk menggunakan element <p> dan di style agar terlihat seperti sebuah header. Hal ini tidak efisien karena mungkin email anda dibuka di mail client yang akan menimpa element-element HTML dengan stylenya sendiri dan element <p> yang dijadikan header akan terlihat aneh.
Image
Untuk gambar, caranya adalah sama seperti pengcodingan website yaitu menggunakan element <img> dengan attribute src="". Perbedaannya adalah, karena email tidak memiliki struktur file dan folder, anda harus menulis link absolute dari gambar anda.
Untuk mendapatkan link absolute, upload gambar anda di image hosting service seperti:
Imgur
Photobucket
Imageshack
Anda bisa menemukan banyak lagi dengan Google Image Sharing Service
Dengan begitu, saya menambahkan code ini di dalam element div dengan class wrapper di bawah element h1.
<img class="image" src="http://i.imgur.com/DmW2rWw.jpg">
Terlihat bagaimana source dari gambar merupakan link absolute yang mengarah ke gambar yang sudah saya upload ke Imgur. Saya juga memberikan element ini class .image agar bisa saya style dengan mudah nantinya.
Text
Untuk text, saya ambil kutipan dari halaman Wikipedia mengenai topik yang bersangkutan. Code saya menjadi seperti ini.
<p class="text"><a href="http://en.wikipedia.org/wiki/Tteokbokki">Tteokbokki</a> is a popular Korean snack food made from soft rice cake, fish cake and sweet red chili sauce. It is commonly purchased from street vendors or pojangmacha. Originally it was called tteok jjim and was a savory braised dish of sliced rice cake, meat, eggs, and seasoning. </p>
Code ini saya taruh di bawah code gambar yang sudah saya tambahkan tadi. Saya juga berikan element link yang melapisi tulisan Ttoekbokki agar teman saya dapat click link tersebut untuk tahu lebih lanjut mengenai Tteokbokki. Selain itu saya juga berikan class .text agar text ini dapat saya style lebih lanjut.
Content Kedua
Seperti yang anda lihat di design yang akan kita buat, saya akan menambahkan content kedua berisi content mengenai Jajangmyeon. Dengan mudah saya tinggal menambahkan balok code ini di bawah element <p> yang baru saya tambahkan tadi.
<img class="image" src="http://i.imgur.com/5eM4yN1.jpg">
<p class="text"><a href="http://en.wikipedia.org/wiki/Jajangmyeon">Jajangmyeon</a>, is a noodle dish topped with a thick sauce made of chunjang (a salty black soybean paste), diced pork and vegetables, and sometimes also seafood. Jajang, the name of the sauce, literally means "fried sauce." Myeon means "noodle". </p>
Seperti yang anda lihat, untuk content kedua kita, kita menggunakan code image dan text yang sama dari content sebelumnya dan hanya berbeda di link gambar dan text yang digunakan.
Code Akhir HTML
Code HTML akhir kita dengan semua element menjadi seperti ini. Semua code ini ditulis dalam tags <body>.
<table class="container" cellspacing="0" cellpadding="0">
<tr>
<td>
<p class="preheader">Pergi rame-rame pas libur kayaknya seru deh...</p>
<div class="wrapper">
<h1 class="header">Ke Korea Yuk! Makanannya Enak-Enak!</h1>
<img class="image" src="http://i.imgur.com/DmW2rWw.jpg">
<p class="text margin"><a href="http://en.wikipedia.org/wiki/Tteokbokki">Tteokbokki</a> is a popular Korean snack food made from soft rice cake, fish cake and sweet red chili sauce. It is commonly purchased from street vendors or pojangmacha. Originally it was called tteok jjim and was a savory braised dish of sliced rice cake, meat, eggs, and seasoning.
</p>
<img class="image" src="http://i.imgur.com/5eM4yN1.jpg">
<p class="text"><a href="http://en.wikipedia.org/wiki/Jajangmyeon">Jajangmyeon</a>, is a noodle dish topped with a thick sauce made of chunjang (a salty black soybean paste), diced pork and vegetables, and sometimes also seafood. Jajang, the name of the sauce, literally means "fried sauce." Myeon means "noodle".
</p>
</div>
</td>
</tr>
</table>
Semua element yang kita butuhkan sudah ada, kita tinggal memberikan style kepada element ini.
Saatnya Memberikan Style
Kita akan menggunakan CSS untuk mengatur agar HTML email kita tampil sesuai seperti apa yang kita inginkan. Semua code yang bersangkutan akan ditulis di dalam tags <style>. Seperti biasa kita mulai dengan code ini:
*{margin:0;padding:0;}
Alasannya sama seperti coding untuk website, agar menghilangkan margin dan padding default yang tidak diinginkan.
Kita mulai dengan style element table yang memiliki class .container terlebih dahulu.
.container{
width: 100%;
border: none;
background: #00E2C5;
font-family: Helvetica;
padding: 20px;
}
Mari saya jelaskan code di atas. Ingat kalau kita tidak bisa memberikan style kepada element <body>. Oleh karena itu, kita menggantikannya dengan element <table>. Karena <table> dan <body> memiliki karakteristik yang berbeda, kita harus memberikan style kepada <table> agar <table> berkerja serupa dengan <body>.
Pertama adalah dengan property width dengan value 100%. Ini akan membuat <table> memenuhi ukuran layar seperti <body>. Kita juga ingin memberikan value none kepada property border karena element <table> memiliki border bawaan yang tidak kita inginkan. Dengan kedua property ini element <table> sudah berkerja serupa dengan element <body> dan dengan begitu kita bisa memberikan property background warna yang kita inginkan. Anda juga bisa menggunakan gambar bila anda mau dan ingat, gambar tersebut harus dalam bentuk absolute link. Sama seperti <body>, kita juga akan menentukan font yang kita gunakan di element <table>. Saya memilih font Helvetica dimana saya memberikan property font-family value Helvetica. Terakhir, saya berikan padding dengan value 20px agar wrapper yang saya buat tadi tidak akan menyentuh pinggiran layar.
Wrapper
Wrapper adalah element div dengan class wrapper dimana kita akan menaruh semua content dari email. Web developer yang membuat website sudah mulai transisi dari website yang menggunakan wrapper menuju website yang menggunakan seluruh ruang yang ada di layar. Tetapi untuk HTML email, kita tetap harus menggunakan wrapper karena keterbatasan ruang yang diberikan mail client. Wrapper akan sangat membantu agar space dan layout dari element-element tidak pindah, hancur dan akan selalu berada di tempat.
.wrapper{
max-width: 600px;
background: #ffffff;
margin: 0 auto;
padding: 20px;
}
Code di atas tidak menggunakan property width melainkan property max-width. Alasannya adalah agar wrapper kita fluid dan dapat mengecil. Dengan begitu, bila email kita di tampil di layar yang lebarnya kurang dari 600px, email kita akan tetap tampil jelas dan proposional. Kita juga memberikan property background warna putih tetapi anda bisa berkreasi dengan hal ini. Satu property yang penting bagi wrapper adalah property margin dengan value 0 auto. Ini digunakan agar wrapper kita selalu berada di tengah-tengah layar. Terakhir adalah property padding dengan value 20px yang digunakan agar content di dalam wrapper tidak menyentuh pinggiran wrapper.
Header
Sekarang kita akan meberikan style untuk header. Kita akan menggunakan code ini:
.header{
text-align: center;
margin-top: 10px;
margin-bottom: 20px;
color: #0a87db;
}
Property text-align dengan value center digunakan agar header kita berada di tengah-tengah halaman email. Property margin-top dan margin-bottom digunakan untuk spacing di atas dan bawah header. Value dari kedua property ini dipilih bukan karena alasan khusus tapi karena saya sesuaikan dan spacing yang saya lihat secara visual. Berarti, untuk email anda kemungkinan besar anda akan memiliki value yang berbeda. Terakhir saya warna header dengan warna biru dimana property color saya berikan value berupa hex untuk warna biru pilihan saya.
Image
Code untuk image juga tidaklah rumit.
.image{
width: 100%;
margin-bottom: 10px;
}
Inti dari code di atas adalah agar gambar dapat memenuhi space yang disediakan wrapper. Terutama karena ukuran gambar berbeda-beda, kita ingin gambar dapat tampil proporsional. Oleh karena itu kita memberikan property width dengan value 100% yang mengartikan kalau lebar gambar akan mengikuti lebar wrapper. Tinggi gambar akan dengan otomatis mengikuti lebar gambar secara proporsional. Dengan begitu, walaupun lebar gambar tidak sebesar lebar wrapper yaitu 600px, gambar akan dengan otomatis memenuhi lebar wrapper.
Property margin-bottom dengan value 10px digunakan agar gambar tidak menyentuh text yang berada di bawahnya.
Text
Sama seperti element lain, style untuk text juga sangat simple.
.text{
font-size: 18px;
}
.text a{
color: #0a87db;
font-weight: bold;
}
Property font-size dengan value 18px digunakan agar text menjadi lebih besar. Anda tidak perlu mengikuti ini karena ini hanyalah preferensi design saya. Saya juga menggunakan selector .text a untuk menarget link yang berada di dalam element paragraph. Disini saya berikan link warna biru dengan value hex yang diterapkan ke property color. Saya juga memberikan property font-weight dengan value bold agar link dapat lebih gampang dibedakan dari text yang lain. Perlu diingat, pseudo selector tidak berkerja di email dan oleh karena itu, kita harus membedakan link secara terang-terangan.
Preheader
Terakhir adalah preheader. Kita sudah membuat sebuah preheader dan preheader kita dapat terbaca di tampilan email seperti ini:
Akan tetapi, kita tidak ingin preheader kita terlihat karena kita ingin header menjadi text pertama di email. Tetapi kalau kita menghapus preheader, kita tidak dapat memanipulasi text yang berada di sebelah subjek karena text yang akan muncul adalah text dari header.
Cara menghilangkan preheader sangatlah gampang.
.preheader{
color: #00E2C5;
}
Kita berikan warna yang sama dengan warna background untuk text preheader. Hasilnya, preheader masih akan tetap ada di tempat tetapi tidak akan terlihat secara visual. Ini membuat email terlihat lebih indah. Bila anda mau, anda juga bisa menggunakan property font-size dan berikan value font yang sangat kecil agar preheader tidak mengganggu space di layout email anda.
Diubah oleh Marcelc 18-10-2014 15:55
0
15.1K
12
Komentar yang asik ya
Urutan
Terbaru
Terlama
Komentar yang asik ya
Komunitas Pilihan