Membuat responsif html email sederhana

Membuat Responsif HTML Email SederhanaLet’s Get Started…

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.

Pre

sen

ted

by A

gu

s An

dri P

utra

, ST.

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?

Pre

sen

ted

by A

gu

s An

dri P

utra

, ST.

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

Pre

sen

ted

by A

gu

s An

dri P

utra

, ST.

Contoh Design email

Email template yang dibuat secara fluid layout

Pre

sen

ted

by A

gu

s An

dri P

utra

, ST.

Lets Start Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://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>

Pre

sen

ted

by A

gu

s An

dri P

utra

, ST.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/1999/xhtml

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

Pre

sen

ted

by A

gu

s An

dri P

utra

, ST.

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.

Pre

sen

ted

by A

gu

s An

dri P

utra

, ST.

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>

Pre

sen

ted

by A

gu

s An

dri P

utra

, ST.

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

Pre

sen

ted

by A

gu

s An

dri P

utra

, ST.

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



Pre

sen

ted

by A

gu

s An

dri P

utra

, ST.

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;}

}

Pre

sen

ted

by A

gu

s An

dri P

utra

, ST.

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 15px13px!important; display: block!important;}

}

Pre

sen

ted

by A

gu

s An

dri P

utra

, ST.

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.

Pre

sen

ted

by A

gu

s An

dri P

utra

, ST.

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;}

Pre

sen

ted

by A

gu

s An

dri P

utra

, ST.

Demo sites :

MobileMail

Untuk mendownload fullsourcenya bisa di download di :

Presented by Agus Andri Putra, ST.

http://andriputra.com/sharing/mobilemail/

http://andriputra.com/sharing/mobilemail/

https://github.com/tutsplus/a-simple-responsive-html-email

https://github.com/tutsplus/a-simple-responsive-html-email

Membuat responsif html email sederhana

Technology

Transcript of Membuat responsif html email sederhana