Important:Membuat Header
Sekarang kita akan menambahkan baris pertama dari table – header. Tambahkan style baris berikut pada baris yang sudah kita buat:
Hello!
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:
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.
Sisakan setidaknya 25px ruang bernapas untuk menghentikan Outlook merubah susunan tabel 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%.
style=”width: 100%; max-width: 425px;”>
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.
CREATING
Responsive Email Magic
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. Welcome to our responsive email! 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.
CSS kami untuk bagian ini:
.innerpadding {padding: 30px 30px 30px 30px;}
.borderbottom {border-bottom: 1px solid #f2eeed;}
.h2 {padding: px 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. 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.
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.
Dalam CSS kami:
img {height: auto;}
Membuat Final Plain Text Row
Akhirnya kita akan menambah deretan teks tanpa perbatasan di bagian bawah:
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.
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. ® Someone, somewhere Unsubscribe from this newsletter instantly
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:
Unsubscribe
from this newsletter instantly
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!