Indonesian (Bahasa Indonesia) translation by Mahesa Kama (you can also view the original English article)
Dalam tutorial ini saya akan menunjukkan cara untuk membuat responsif HTML Email sederhana yang akan bekerja di semua aplikasi webmail klien, termasuk semua webmail klien pada smartphone atau tablet. Dengan menggunakan minimal media queries dan fluid width untuk memastikan bisa diakses di semua aplikasi webmail klien.
Dalam tutorial ini saya akan menunjukkan cara untuk membuat responsif HTML Email sederhana yang akan bekerja di semua aplikasi webmail klien, termasuk semua webmail klien pada smartphone atau tablet. Dengan menggunakan minimal media queries dan fluid width untuk memastikan bisa diakses di semua aplikasi webmail klien.
Media Queries: Hanya Sebagian Solusi
Banyak muncul pertanyaan, Bagaimana cara membuat responsif HTML Email agar dapat bekerja dengan baik pada aplikasi webmail berbasis mobile seperti iOS dan Android?
Selain dari segi coding, dalam pembuatan Responsif HTML Email tentu saja harus didukung oleh aplikasi webmail yang mampu untuk menampilkan atau mendukung syntax yang digunakan, seperti HTML dan CSS. Sampai saat ini, aplikasi webmail ini khususnya pada iOS dan Android sudah mengalami perkembangan yang cukup baik. Yang terpenting adalah ingat untuk memakai aplikasi ter-update agar aplikasi anda memiliki kemampuan atau dukungan yang lebih baik.
Sekarang adalah zaman berkembangnya smartphone. Apa yang anda harus ketahui tentang hal ini? Tentu saja setiap orang tidak terlepas dari smartphone mereka dalam kegiatan sehari-hari atau rutinitas mereka. Segala sesuatu harus bisa di akses melalui smartphone, termasuk email. Nah, bagaimana jika email anda tidak bisa dibaca atau dibuka dengan baik melalui smartphone? Tentu saja ini adalah sebuah kerugian yang besar di masa depan.
Mengapa Fluid Sering Digunakan?
Dengan fluid anda dapat merancang dan membangun sebuah email responsive yang akan terlihat baik dalam setiap aplikasi webmail, termasuk aplikasi webmail yang tidak mendukung media queries. Anda dapat melakukan ini dengan menggunakan fluid layout.
Namun, beberapa desain layout dan kolom tidak dapat bekerja dengan baik menggunakan metode ini. Tapi anda tidak perlu khawatir, ada beberapa desain yang sangat fungsional yang dapat bekerja sangat baik seperti yang akan kita buat berikut ini:
Berikut adalah apa yang akan kita buat hari ini:
Sudah Siap? Ayo Kita Mulai!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A Simple Responsive HTML Email</title>
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
.content {width: 100%; max-width: 600px;}
</style>
</head>
<body yahoo bgcolor="#f6f8f1">
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Hello!
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Apa yang kita buat di sini adalah halaman dasar kita dengan penggunaan header, doctype dan container table dengan warna latar belakang diterapkan (baik body dan wrapper table yang besar, karena styling dari tag body tidak sepenuhnya didukung). Untuk informasi lebih lanjut tentang konfigurasi dasar ini, anda dapat membaca artikel Membangun Template HTML Email dengan Scratch.
Saya kemudian menambahkan content table utama ke tengah-tengah dengan menggunakan class'content'.
Perhatikan!
Catatan: Anda akan melihat bahwa dalam tutorial ini saya akan menempatkan CSS di bagian head. Saya biasanya menempatkan CSS di head ketika saya akan menggunakannya kembali, dan CSS yang saya gunakan adalah CSS inline, dimana style dari CSS akan saya tempatkan jadi satu pada file HTML tersebut.
Important: Setiap kali Anda menggunakan CSS rules di bagian head, Anda harus menggunakan tools untuk membawa semua inline pada akhir proses. Jika Anda menggunakan layanan seperti MailChimp atau Campaign Monitor, mereka secara otomatis akan menawarkan untuk merubah style yang anda gunakan menjadi inline ketika Anda mengimpor desain Anda. Anda harus melakukan ini karena beberapa aplikasi webmail klien, seperti Gmail, akan mengabaikan atau menghapus isi tag <style>, atau mengabaikannya. Anda juga dapat menggunakan alat seperti Premailer untuk penggunaan inline CSS. Jika Anda menggunakan Premailer atau alat serupa, ingat untuk mengambil media queries sebelum memproses (agar tata letaknya tetap utuh), kemudian masukkan kembali di akhir. Tapi, MailChimp dan Campaign Monitor secara otomatis akan mengurus keperluan ini untuk anda.
Menyembunyikan Mobile Styles Dari Yahoo!
Anda akan melihat bahwa tag body memiliki atribut tambahan. Lho, kok harus isi atribut tambahan? Yah, mungkin Yahoo memang suka ribet, hahaha. Saya menemukan cara termudah untuk melakukan hal ini (seperti yang disarankan oleh Email on Acid) adalah dengan hanya menambahkan atribut sewenang-wenang pada tag body. Saya menggunakan 'yahoo' tetapi anda bisa merubahnya dengan apa saja selain 'yahoo':
<body yahoo>
Anda kemudian dapat menargetkan class tertentu dengan menggunakan pemilih atribut untuk tag body anda dalam CSS.
body[yahoo] .class {}
Dua Trik untuk Menjadi Ahli Metode Fluid
Seperti yang Anda lihat, konten dan table yang di beri lebar 100% akan memenuhi seluruh layar (lebar layar), pada smartphone tentu tidak menjadi masalah, tapi hal ini akan menjadi masalah ketika email itu dibuka pada ukuran layar yang besar, seperti PC. Maka dari itu, kami juga akan mengatur lebar maksimum 600px untuk menghindari email yang mengambil seluruh layar pada perangkat yang lebih besar.
Sekarang ada dua hal yang sedikit rumit yang kita perlu pelajari untuk memastikan bahwa semuanya menampilkan seperti yang direncanakan di semua aplikasi webmail klien. Kedua perbaikan berikut adalah berkat masukkan dari tutorial yang sangat baik oleh Tina Ye yang tertulis pada artikel FogCreek Blog.
1. Cara Mengatasi Kurangnya Dukungan Max-width
Syangnya, max-width tidak didukung oleh semua klien email. Dalam rangka untuk mendapatkan email kita agar ditampilkan dengan benar di Outlook dan Lotus Notes 8 & 8.5, kita perlu untuk membungkus setiap tabel dalam beberapa kode kondisional yang menciptakan table dengan lebar set untuk menyimpan segala sesuatu masuk menargetkan IE (yang merupakan mesin rendering digunakan oleh Lotus Notes) dan Microsoft Outlook.
Kami akan membungkus table kami dalam beberapa kode kondisional:
<!--[if (gte mso 9)|(IE)]> <table width="600" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table class="content" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> Hello! </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->
2. Sebuah Perbaikan untuk Apple Mail
Apple Mail (biasanya klien email yang sangat progresif) tidak mendukung properti max-width dengan baik. Ini juga tidak mendukung media queries, jadi kita bisa menambahkan sesuatu untuk mengatur lebar pada 'content' class table, selama viewport dapat menampilkan seluruh 600px.
<style type="text/css">
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
}
</style>
Membuat Header
Sekarang kita akan menambahkan baris pertama dari table - header. Tambahkan style baris berikut pada baris yang sudah kita buat:
<td class="header" bgcolor="#c7d8a7"> Hello! </td>
Dan kemudian di CSS Anda, tambahkan padding untuk header:
.header {padding: 40px 30px 20px 30px;}
Menambahkan Row Responsive Pertama
Sekarang kita akan membuat baris responsif pertama. Cara kita melakukan ini adalah untuk membuat dua tabel kemudian menentukan 'float' dengan menggunakan properti 'align' pada HTML.
Kolom kiri
Lakukan perubahan pada table "Hello!" yang kita buat tadi , sehingga menjadi seperti berikut:
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="70" style="padding: 0 20px 20px 0;"> <img src="images/icon.gif" width="70" height="70" border="0" alt="" / > </td> </tr> </table>
Kami membuat tabel dengan tinggi 70px dan juga menambahkan beberapa padding yang akan berfungsi untuk memberi jarak antara dua kolom. Padding di bagian bawah akan menambah jarak pada posisi vertikal (pada tampilan mobile).
Kolom Kanan
Kami akan menciptakan kolom kanan dengan kembali menggunakan align=left pada table. Tabel ini mempunyai lebar 445px, yang akan menyisakan kita 25px untuk cadangan di sisi kanan. Ini sangat penting karena pada Outlook akan secara otomatis menyesuaikan tampilan email anda ke bentuk responsif (versi mobile) jika tidak ada setidaknya 25px untuk cadangan pada setiap baris yang diberikan. Alhasil tampilannya akan berantakan dan hancur. Lihat saja gambar di bawah.
Sebaiknya anda memberikan jarak paling tidak 25px agar tampilan yang dihasilkan sesuai dengan harapan anda.
Berikutnya untuk menyesuaikan pada layar saja. Memberikan lebar 100% ketika dibuka pada layar mobile. Jadi, jika dibuka pada mobile table kanan akan berada di bawah table kiri dengan lebar yang sama, yaitu 100%.
<!--[if (gte mso 9)|(IE)]> <table width="425" align="left" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table class="col425" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;">style="width: 100%; max-width: 425px;"> <tr> <td height="70"> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->
Di sini Anda dapat melihat bahwa saya telah membuat class yang disebut 'col425' untuk tabel ini, kolom yang lebarnya 425px. Saya sudah dibungkus meja dalam kode kondisional yang akan menyertakan dalam tabel lebar 425px. Kami kemudian menambahkan kelas kami ke Media Query yang kita buat untuk Apple Mail juga.
.col425 {width: 425px!important;}
Sekarang di dalam kita akan menambahkan style pada header.
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="subhead" style="padding: 0 0 0 3px;"> CREATING </td> </tr> <tr> <td class="h1" style="padding: 5px 0 0 0;"> Responsive Email Magic </td> </tr> </table>
Saya telah menambahkan beberapa class untuk setiap sel untuk styling, serta beberapa style akan menggunakan untuk jenis teks atau font lain:
.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}
Hore, header kami sekarang sudah selesai, dan anda dapat lihat pada gambar di bawah ini, bagaimana dua kolom akan menumpuk di ponsel. (Untuk melihat hasilnya, untuk sementara anda akan perlu menyesuaikan pada min-device-width media queries).
Membuat Single Column Text Row
Untuk membuat single column text row, kita cukup menambahkan baris baru ke tabel '. content'. Kami akan menambahkan class 'innerpadding' untuk baris ini dengan beberapa nilai dapat digunakan kembali. Kami juga akan menambahkan class 'borderbottom' untuk memberikan batas untuk setiap baris.
<tr> <td class="innerpadding borderbottom"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="h2"> Welcome to our responsive email! </td> </tr> <tr> <td class="bodycopy"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. </td> </tr> </table> </td> </tr>
CSS kami untuk bagian ini:
.innerpadding {padding: 30px 30px 30px 30px;}
.borderbottom {border-bottom: 1px solid #f2eeed;}
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;}
.bodycopy {font-size: 16px; line-height: 22px;}
Membuat Double Column Article
Sekarang kita akan membuat baris responsif persis seperti header kita, tetapi dengan dimensi yang sedikit berbeda sehingga kita dapat memiliki gambar yang lebih besar.
<tr>
<td class="innerpadding borderbottom">
<table width="115" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="115" style="padding: 0 20px 20px 0;">
<img src="images/article1.png" width="115" height="115" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 380px;">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bodycopy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0;">
<table class="buttonwrapper" bgcolor="#e05443" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="button" height="45">
<a href="#">Claim yours!</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
Kami telah menambahkan sebuah tombol di sini dengan class 'buttonwrapper'. Ini berisi set warna latar belakang, dan kemudian style untuk link teks di dalamnya. Saya lebih suka menggunakan metode ini karena memungkinkan anda untuk memiliki tombol fluid width yang sangat berguna saat membuat template yang dapat digunakan kembali, dimana lebar dari setiap tombol akan berbeda setiap kali digunakan. Jika anda memiliki lebar tetap untuk tombol anda, anda dapat memilih untuk menggunakan Bulletproof Button Generator oleh Campaign Monitor.
Style untuk tombol:
.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}
Serta lebar set kami untuk class baru 'col380', kami akan menambahkan beberapa ukuran lebar untuk menyesuaikan tampilan pada Apple Mail:
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
.col425 {width: 425px!important;}
.col380 {width: 380px!important;}
}
Membuat Single Column Image
Ini adalah baris yang sangat sederhana, kami hanya akan mengatur lebar foto menjadi 100% dari lebar email dan pastikan ketinggiannya diatur menjadi otomatis menggunakan CSS.
<tr> <td class="innerpadding borderbottom"> <img src="images/wide.png" width="100%" border="0" alt="" /> </td> </tr>
Dalam CSS kami:
img {height: auto;}
Membuat Final Plain Text Row
Akhirnya kita akan menambah deretan teks tanpa perbatasan di bagian bawah:
<tr> <td class="innerpadding borderbottom"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. </td> </tr>
Membuat Footer
Untuk membuat footer, kita akan menambahkan baris baru dengan table di dalamnya. Salah satu baris akan berisi table lain untuk bagian ikon media sosial.
<tr> <td class="footer" bgcolor="#44525f"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" class="footercopy"> &reg; Someone, somewhere 2013<br/> <a href="#"><font color="#ffffff">Unsubscribe</font></a> from this newsletter instantly </td> </tr> <tr> <td align="center" style="padding: 20px 0 0 0;"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="37" style="text-align: center; padding: 0 10px 0 10px;"> <a href="http://www.facebook.com/"> <img src="images/facebook.png" width="37" height="37" alt="Facebook" border="0" /> </a> </td> <td width="37" style="text-align: center; padding: 0 10px 0 10px;"> <a href="http://www.twitter.com/"> <img src="images/twitter.png" width="37" height="37" alt="Twitter" border="0" /> </a> </td> </tr> </table> </td> </tr> </table> </td> </tr>
Kami akan menambahkan style yang diperlukan untuk footer kami ke CSS:
.footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;}
.footercopy a {color: #ffffff; text-decoration: underline;}
Mengoptimalkan Tombol untuk Ponsel
Pada ponsel, sangat ideal jika seluruh tombol link, bukan hanya teks, karena itu jauh lebih sulit untuk menargetkan link teks kecil dengan jari anda.
Bagaimana teknik membuat tombol pada tampilan ponsel?
Saya akan menggunakan max-width dan max-device-width dalam media query ini dalam upaya untuk menghindari bug di Outlook.com pada IE9.
@media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body[yahoo] .buttonwrapper {background-color: transparent!important;}
body[yahoo] .button a {background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;}
}
Perangkat Lanjut Dengan Media Queries
Sekarang anda dapat mulai membuat perangkat tambahan untuk tata letak dengan menerapkan nama class untuk unsur-unsur yang ingin anda gunakan untuk mengontrol, dan kemudian menciptakan aturan-aturan baru dalam media queries yang baru saja kita buat di atas.
Sebagai contoh, kita akan mengubah link unsubscribe kami ke bentuk tombol, dengan menambahkan class untuk link:
<a href="#" class="unsubscribe"> <font color="#ffffff">Unsubscribe</font> </a> <span class="hide">from this newsletter instantly</span>
dan menambahkan CSS berikut untuk media queries:
body[yahoo] .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;}
body[yahoo] .hide {display: none!important;}
Anda juga dapat mengatur beberapa class yang anda ingin rubah untuk mendapatkan hasil yang maksimal.
Saatnya Uji Coba!
Akhirnya, seperti biasa, pastikan Anda memvalidasi (menggunakan W3C validator - Anda seharusnya mendapatkan satu kesalahan untuk atribut 'yahoo' pada tag body) atau anda dapat mengujinya melalui perangkat yang sesungguhnya (misalnya PC, tablet, dan smartphone). Bahkan melalui bantuan web preview service seperti Litmus atau Email on Acid.
Selamat menikmati belajar membuat email responsif yang terlihat bagus di setiap aplikasi webmail klien!
