Tutoral ini menjelaskan cara membuat email responsif sederhana yang dapat dibaca di semua peramban webmail dan perangkat seluler dengan menggunakan media queries dan lebar fluid. Email responsif dapat dibuat dengan menambahkan tag style dan mengatur lebar maksimum konten. Beberapa trik digunakan untuk mengatasi masalah kompatibilitas di berbagai klien email seperti Outlook.
2. Pengantar
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.
PresentedbyAgusAndriPutra,ST.
3. Media Queries
Pemanfaatan media queries hanya sebagai solusi
Seiring perkembangan zaman pada mobile device menuntut kita
untuk selalu update dalam hal teknologi.
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 yang akan datang?
PresentedbyAgusAndriPutra,ST.
4. Penggunaan Fluid
Kita bisa memanfaatkan fluid layout untuk merancang dan membangun
sebuah email responsive yang akan terlihat baik disetiap aplikasi webmail,
termasuk webmail yang tidak support media queries sekalipun.
Namun beberapa design layout ada yang tidak mendukung untuk
pemakaian metode ini, artinya design layout sebuah email responsive harus
di atur sedemikian rupa sehingga akan sangat indah pada saat kita
membangun email tersebut
PresentedbyAgusAndriPutra,ST.
7. Fungsi Header Doctype
Code sebelumya menyertakan header ‘DOCTYPE’ dan container table
dengan warna latar belakang yang diterpakan, biasanya meskipun kita sudah
memasukkan warna pada body class nya bagi sebagian tempat tidak
sepenuhnya di dukung , jadi kita tambahkan juga pada container table
tersebut.
Kemudian kita menambahkan tag <style> dengan isian semua style yang
akan kita gunakan pada saat mobile responsivenya , dan menambahkan
class pada bagian tabel utama yang kita namakan class “content”
Perhatian !
Semua stye css harus berada pada satu file html yang sama
PresentedbyAgusAndriPutra,ST.
8. Penting !
Agar tag <style> kita bisa terbawa ke dalamnya kita memerlukan tools
pendukung untuk melakukan itu, seperti halnya kita menggunakan
mailchimp atau Campaign monitor, atau juga menggunakan mailventure,
karena ada beberapa aplikasi webmail klien yang akan mengabaikan tag
yang telah kita buat seperti Gmail yang akan mengabaikan tag <style> yang
kita tambahkan dan hanya membaca inline style css saja.
Jika menggunakan Premailer atau tools serupa ingat untuk mengambil
media queries sebelum memproses (agar tata letaknya tetap utuh),
kemudian masukkan kembali di akhir.
Tapi, MailChimp, Campaign Monitor dan Mailventure secara otomatis akan
mengurus keperluan ini untuk kita.
PresentedbyAgusAndriPutra,ST.
9. Menyembunyikan Mobile Style dari Yahoo
Kita akan menambahkan atribut tambahan untuk menyembunyikan style
mobile responsive kita, dengan cara menambahkan atribut seperti beikut :
1 <body yahoo>
Anda kemudian dapat menargetkan class tertentu dengan menggunakan
pemilih atribut untuk tag body anda dalam CSS.
<style>
body[yahoo] .class {}
</style>
PresentedbyAgusAndriPutra,ST.
10. 2 Trik Menggunakan Metode Fluid
Pada tabel yang kita buat sebelumnya adalah lebar 100%, ini akan menjadi
masalah ketika dibuka di layar yang lebar seperti pc, maka content nya akan
memebuhi layar tersebut, untuk itu kita akan menggunakan max width
untuk email adalah 600 / 640 px untuk menghindari email yang mengambil
seluruh bagian layar
PresentedbyAgusAndriPutra,ST.
11. 1. Mengatasi Kurangnya dukungan max-width
Untuk penggunaan max-width tidak semua klien email mendukung, contohnya 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.
Contoh code ditiap table yang memiliki max-width
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0"
border="0">
<tr>
<td>
<![endif]-->
PresentedbyAgusAndriPutra,ST.
12. 2. Memperbaiki max-width untuk Apple
Apple Mail (biasanya klien email yang sangat progresif) tidak mendukung
properti max-width dengan baik. I
Ini juga tidak mendukung media queries, jadi kita bisa menambahkan
sesuatu untuk mengatur lebar pada 'content' class table, selama viewport
dapat menampilkan seluruh 600px
Tambahan code pada tag <style> nya adalah sebagai berikut :
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
.col425 {width: 425px!important;}
.col380 {width: 380px!important;}
}
PresentedbyAgusAndriPutra,ST.
13. 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?
Kita akan menggunakan max-width dan max-device-width dalam media query ini
dalam
upaya untuk menghindari bug di Outlook.com pada IE9.
Codenya adalah :
@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;}
}
PresentedbyAgusAndriPutra,ST.
14. Perangkat tambahan dengan media queries
Sekarang kita dapat mulai membuat perangkat tambahan untuk tata letak
dengan menerapkan nama class untuk unsur-unsur yang ingin kita gunakan
untuk mengontrol, dan kemudian menciptakan aturan-aturan baru dalam
media queries yang baru saja kita buat di atas.
PresentedbyAgusAndriPutra,ST.
15. Perangkat tambahan dengan media queries
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;}
PresentedbyAgusAndriPutra,ST.