Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email Design

Cara Membuat Responsif HTML Email Sederhana

by
Length:LongLanguages:

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:

Final-Product-Both

Sudah Siap? Ayo Kita Mulai!

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':

Anda kemudian dapat menargetkan class tertentu dengan menggunakan pemilih atribut untuk tag body anda dalam CSS.

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:

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.

Membuat Header

Sekarang kita akan menambahkan baris pertama dari table - header. Tambahkan style baris berikut pada baris yang sudah kita buat:

Dan kemudian di CSS Anda, tambahkan padding untuk header:

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.

Responsive-AlignedTables

Sebaiknya anda memberikan jarak paling tidak 25px agar tampilan yang dihasilkan sesuai dengan harapan anda.

Allow at least 25px of breathing room to stop Outlook from stacking your tables
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%.

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.

Sekarang di dalam kita akan menambahkan style pada header.

Saya telah menambahkan beberapa class untuk setiap sel untuk styling, serta beberapa style akan menggunakan untuk jenis teks atau font lain:

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).

01-header

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.

CSS kami untuk bagian ini:

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.

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:

Serta lebar set kami untuk class baru 'col380', kami akan menambahkan beberapa ukuran lebar untuk menyesuaikan tampilan pada Apple Mail:

Email-TwoCol

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:

Membuat Final Plain Text Row

Akhirnya kita akan menambah deretan teks tanpa perbatasan di bagian bawah:

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.

Kami akan menambahkan style yang diperlukan untuk footer kami ke CSS:

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.

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:

dan menambahkan CSS berikut untuk media queries:

Email-Footer-MQs

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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.