SlideShare uma empresa Scribd logo
1 de 16
Baixar para ler offline
Membuat Responsif HTML
Email Sederhana
Let’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.
PresentedbyAgusAndriPutra,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?
PresentedbyAgusAndriPutra,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
PresentedbyAgusAndriPutra,ST.
Contoh
Design email
Email template yang dibuat secara fluid
layout
PresentedbyAgusAndriPutra,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>
PresentedbyAgusAndriPutra,ST.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Demo sites :
MobileMail
Untuk mendownload fullsourcenya bisa di download di :
Presented by Agus Andri Putra, ST.

Mais conteúdo relacionado

Semelhante a Membuat responsif html email sederhana

Tutorial web programing
Tutorial web programingTutorial web programing
Tutorial web programingeghha
 
Tutorial web programing x rpl 1
Tutorial web programing x rpl 1Tutorial web programing x rpl 1
Tutorial web programing x rpl 1eghha
 
Search engine-optimization-starter-guide-id 2
Search engine-optimization-starter-guide-id 2Search engine-optimization-starter-guide-id 2
Search engine-optimization-starter-guide-id 2Angkringan Jogjakarta
 
panduan seo google
panduan seo googlepanduan seo google
panduan seo googlesmart privat
 
Laporan pratikum II web
Laporan pratikum II webLaporan pratikum II web
Laporan pratikum II webrahmi wahyuni
 
Study Jam 1 - HTML CSS.pdf
Study Jam 1 - HTML CSS.pdfStudy Jam 1 - HTML CSS.pdf
Study Jam 1 - HTML CSS.pdfanjarmath
 
Design dan Pemrograman Web
Design dan Pemrograman WebDesign dan Pemrograman Web
Design dan Pemrograman Weboldias
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)T Ghazali
 
pemrograman internet
pemrograman internetpemrograman internet
pemrograman internetmafailmi
 
Caramembuat website sederhana
Caramembuat website sederhanaCaramembuat website sederhana
Caramembuat website sederhanaLyadi
 

Semelhante a Membuat responsif html email sederhana (20)

Modul html
Modul htmlModul html
Modul html
 
Tutorial web programing
Tutorial web programingTutorial web programing
Tutorial web programing
 
Tutorial web programing x rpl 1
Tutorial web programing x rpl 1Tutorial web programing x rpl 1
Tutorial web programing x rpl 1
 
Search engine-optimization-starter-guide-id 2
Search engine-optimization-starter-guide-id 2Search engine-optimization-starter-guide-id 2
Search engine-optimization-starter-guide-id 2
 
panduan seo google
panduan seo googlepanduan seo google
panduan seo google
 
bootstrap.pptx
bootstrap.pptxbootstrap.pptx
bootstrap.pptx
 
Proyek web
Proyek webProyek web
Proyek web
 
Laporan pratikum II web
Laporan pratikum II webLaporan pratikum II web
Laporan pratikum II web
 
Study Jam 1 - HTML CSS.pdf
Study Jam 1 - HTML CSS.pdfStudy Jam 1 - HTML CSS.pdf
Study Jam 1 - HTML CSS.pdf
 
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
 
Design dan Pemrograman Web
Design dan Pemrograman WebDesign dan Pemrograman Web
Design dan Pemrograman Web
 
HTML+CSS
HTML+CSSHTML+CSS
HTML+CSS
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
pemrograman internet
pemrograman internetpemrograman internet
pemrograman internet
 
Tugas 6
Tugas 6Tugas 6
Tugas 6
 
Bondan PWD
Bondan PWDBondan PWD
Bondan PWD
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Caramembuat website sederhana
Caramembuat website sederhanaCaramembuat website sederhana
Caramembuat website sederhana
 

Mais de Putra Andry

Pertemuan viii Sorting
Pertemuan viii SortingPertemuan viii Sorting
Pertemuan viii SortingPutra Andry
 
Pertemuan vi (Function Java)
Pertemuan vi (Function Java)Pertemuan vi (Function Java)
Pertemuan vi (Function Java)Putra Andry
 
Procedure dalam Pascal
Procedure dalam PascalProcedure dalam Pascal
Procedure dalam PascalPutra Andry
 
Pengolahan transaksi
Pengolahan transaksiPengolahan transaksi
Pengolahan transaksiPutra Andry
 
Stored procedure
Stored procedureStored procedure
Stored procedurePutra Andry
 
Akses multiple table part2
Akses multiple table part2Akses multiple table part2
Akses multiple table part2Putra Andry
 
Akses multiple table part1
Akses multiple table part1Akses multiple table part1
Akses multiple table part1Putra Andry
 
Dasar Pemrograman Part VII
Dasar Pemrograman Part VIIDasar Pemrograman Part VII
Dasar Pemrograman Part VIIPutra Andry
 
Dasar Pemrograman Part VI
Dasar Pemrograman Part VIDasar Pemrograman Part VI
Dasar Pemrograman Part VIPutra Andry
 
Dasar Pemrograman Part V
Dasar Pemrograman Part VDasar Pemrograman Part V
Dasar Pemrograman Part VPutra Andry
 
Dasar Pemrograman Part III
Dasar Pemrograman Part IIIDasar Pemrograman Part III
Dasar Pemrograman Part IIIPutra Andry
 

Mais de Putra Andry (20)

Insertion Sort
Insertion SortInsertion Sort
Insertion Sort
 
Pertemuan viii Sorting
Pertemuan viii SortingPertemuan viii Sorting
Pertemuan viii Sorting
 
Pertemuan vi (Function Java)
Pertemuan vi (Function Java)Pertemuan vi (Function Java)
Pertemuan vi (Function Java)
 
Pertemuan V
Pertemuan VPertemuan V
Pertemuan V
 
Pertemuan iv
Pertemuan ivPertemuan iv
Pertemuan iv
 
Function
FunctionFunction
Function
 
Procedure dalam Pascal
Procedure dalam PascalProcedure dalam Pascal
Procedure dalam Pascal
 
Pertemuan 9
Pertemuan 9Pertemuan 9
Pertemuan 9
 
Trigger
TriggerTrigger
Trigger
 
Pengolahan transaksi
Pengolahan transaksiPengolahan transaksi
Pengolahan transaksi
 
Stored procedure
Stored procedureStored procedure
Stored procedure
 
Pertemuan 8
Pertemuan 8Pertemuan 8
Pertemuan 8
 
Join
JoinJoin
Join
 
Akses multiple table part2
Akses multiple table part2Akses multiple table part2
Akses multiple table part2
 
Sql outer join
Sql  outer joinSql  outer join
Sql outer join
 
Akses multiple table part1
Akses multiple table part1Akses multiple table part1
Akses multiple table part1
 
Dasar Pemrograman Part VII
Dasar Pemrograman Part VIIDasar Pemrograman Part VII
Dasar Pemrograman Part VII
 
Dasar Pemrograman Part VI
Dasar Pemrograman Part VIDasar Pemrograman Part VI
Dasar Pemrograman Part VI
 
Dasar Pemrograman Part V
Dasar Pemrograman Part VDasar Pemrograman Part V
Dasar Pemrograman Part V
 
Dasar Pemrograman Part III
Dasar Pemrograman Part IIIDasar Pemrograman Part III
Dasar Pemrograman Part III
 

Membuat responsif html email sederhana

  • 1. Membuat Responsif HTML Email Sederhana Let’s Get Started…
  • 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.
  • 5. Contoh Design email Email template yang dibuat secara fluid layout PresentedbyAgusAndriPutra,ST.
  • 6. 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> 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.
  • 16. Demo sites : MobileMail Untuk mendownload fullsourcenya bisa di download di : Presented by Agus Andri Putra, ST.