Cara menggunakan header html template

Cara terbaik untuk memahami proses apapun adalah dengan melakukannya sendiri, dari awal. Hari ini, kita akan melakukan hal tersebut untuk mendesain email, dengan membangun sebuah template HTML dari awal.

Table of Contents Show

Membuat Body dan Table Utama
Membuat Susunan dan Header
Menggunakan Padding
Membuat Area Konten
Pengaturan Style Teks

Permulaan

Pertama, perlu saya sebutkan sumber di mana saya mengambil huruf serta ikon untuk artikel ini.

Ikon 2D oleh Pierre Borodin
Rupa huruf yang digunakan adalah Oil Can, Source Sans Pro dan Mission Script
Ikon social media dari Metrize Icons

Sekarang, seperti yang telah kita bahas pada tutorial sebelumnya, anda harus mengawali dokumen HTML email anda dengan XHTML doctype:

<!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>Demystifying Email Design</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>

Setelah selesai, kita dapat memulai membangun susunan selanjutnya.

Membuat Body dan Table Utama

Pertama, kita akan menambahkan susunan keseluruhan untuk email kita, dimulai dengan sebuah tag <body>. Kita akan mengatur margin serta padding pada tag body menjadi nol untuk menghindari spasi yang tidak diharapkan.

Kita juga akan menambahkan sebuah table dengan lebar 100%. Ini berperan sebagai body sesungguhnya untuk email kita, karena pengaturan style pada tag body belum sepenuhnya didukung. Jadi, jika anda ingin menambahkan warna latar untuk body email anda, anda harus menerapkannya pada table tersebut.

Atur cellpadding dan cellspacing anda menjadi nol untuk menghindari spasi yang tak diharapkan pada table.

Catatan: Kita akan membiarkan border="1" pada semua table kita, sehingga kita dapat melihat kerangka dari layout kita ketika bekerja. Kita akan menghilangkannya pada akhir tutorial in dengan menggunakan fitur Find & Replace.

<body style="margin: 0; padding: 0;">
 <table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr>
   <td>
    Hello!
   </td>
  </tr>
 </table>
</body>

Jika ada sebuah atribut HTML yang tersedia, gunakanlah itu alih-alih dengan CSS

Sekarang letakkan sebuah table dengan lebar 600 pixel yang telah diatur ke tengah ke dalam wadah table. 600 pixel adalah lebar aman maksimum untuk email anda agar tampil baik pada sebagian besar desktop, aplikasi webmail, dan resolusi layar.

Set this width using HTML instead of CSS, by using the width attribute. The golden rule in HTML email development is: if an attribute exists in HTML, use that instead of CSS.

Tetapkan lebar tersebut dengan menggunakan HTML alih-alih dengan CSS, dengan mengguanakn atribut width. Cara terbaik dalam pengambangan email adalah: Jika ada sebuah atribut HTML yang tersedia, gunakanlah itu alih-alih dengan CSS.

Kita akan mengganti ucapan selamat 'Hello!' dengan table berikut:

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
 <tr>
  <td>
   Hello!
  </td>
 </tr>
</table>

Kita juga menambahkan sebuah style properti inline yang mengatur properti border-collpase menjadi collapse. Jika kita tidak melakukan ini, versi Outlook terbaru akan menambahkan sebuah spasi kecil di antara table dan gari pembatas.

Membuat Susunan dan Header

Pada desain kita, kita dapat melihat bahwa email terbagi menjadi tiga bagian logis, jadi kita akan membuat sebauh baris (row) untuk masing-masing bagian.

Mari kita gandakan satu baris yang telah kita buat sehingga kita memiliki total tiga baris. Saya telah merubah teks di dalamnya sehingga kita bisa dengan mudah mengidentifikasi masing-masing baris.

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
 <tr>
  <td>
   Row 1
  </td>
 </tr>
 <tr>
  <td>
   Row 2
  </td>
 </tr>
 <tr>
  <td>
   Row 3
  </td>
 </tr>
</table>

Sekarang kita akan mewarnai baris-baris tersebut sesuai desain. Karena bgcolor adalah sebuah HTML atribut yang valid, maka kita akan menggunakannya untuk mengatur warna latar alih-alih dengan CSS. Ingatlah untuk selalu menggunakan enam karakter kode Hex, karena singkatan tiga karakter tidak selalu bekerja.

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
 <tr>
  <td bgcolor="#70bbd9">
   Row 1
  </td>
 </tr>
 <tr>
  <td bgcolor="#ffffff">
   Row 2
  </td>
 </tr>
 <tr>
  <td bgcolor="#ee4c50">
   Row 3
  </td>
 </tr>
</table>

Ok, selanjutnya kita akan memfokuskan pada Row 1. Kita ingin menyesuaikan padding pada cell dan kemudian menyisipkan gambar.

Menggunakan Padding

Ketika menggunakan padding pada email, anda harus selalu mengatur nilai tiap satuan (top, right, bottom dan left) jika tidak anda akan mendapatkan hasil yang tidak dapat anda perkirakan. Anda masih dapat menggunakan cara singkat, misalnya padding: 10px 10px 8px 5px;, namun jika anda mendapati masalah anda dapat menuliskannya dengan format panjang, misal padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.

Jika anda mendapati masalah yang lebih besar dengan padding (misalnya, jika platform tujuan anda menghapus CSS anda), jangan menggunakannya sama sekali. Cukup gunakan cell kosong untuk membuat spasi. Tidak perlu menggunakan GIF, cukup pastikan anda menambahkan style="line-height: 0; font-size: 0;" pada cell tersebut, taruhlah sebuah   di dalam dan beri tinggi dan lebar. Berikut contohnya:

<tr><td style="font-size: 0; line-height: 0;" height="10">&nbsp;</td></tr>

Catat juga bahwa aman untuk menggunakan padding pada tag TD namun tidak pada tag P atau DIV. Keduanya lebih banyak menghasilkan hal yang tidak dapat diprediksi.

Jadi, kita akan menggunakan beberapa CSS inline untuk menambahkan padding pada cell. Kemudian kita akan menyisipkan gambar kita, menambahkan teks alt dan menambahkan style="display:block;" yang merupakan cara umum untuk mencegah beberapa aplikasi email menambahkan jarak di bawah gambar. Kita akan menengahkan gambar tersebut dengan menambahkan align="center" pada tag td kita. Kita juga akan menambahkan sebuah tag alt yang sangat penting ketika email kita dimuat pertama kali yang, pada umumnya, dengan tanpa gambar.

Catatan: Jika konten header anda sangat penting untuk pesan anda, jangan hanya menggunakan gambar. Ingat, gambar secara baku akan diblokir oleh kebanyakan aplikasi email, jadi jika ada aspek yang penting dari email anda, jangan pernah hanya menampilkannya dalam bentuk gambar. Pada contoh kali ini, agaknya cukup berlebihan.

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
 <img src="images/h2.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
</td>

Membuat Area Konten

Pertama, kita akan menambahkan beberapa padding di tengah cell sehingga table di dalam memiliki beberapa spasi disekelilingnya, seperti pada desain kita.

Sekarang kita akan menambahkan sebuah table dengan tiga baris untuk konten utama kita - satu untuk headline, satu untuk teks pengenalan, dan satu baris untuk menaruh dua kolom. Kita akan mengatur lebar dari table menjadi 100% alih-alih menggunakan pixel karena hal ini akan membantu kita jika kita nantinya ingin membuat email kita responsif. Jika anda selalu menggunakan pixel, anda dapat berakhir dengan mendapati banyak nilai yang harus anda timpa dengan media queries. Jika table anda berbasis prosentase, kemudian ketika anda menyesuaikan elemen induknya, semuanya turunannya akan dapat menyesuaikan dengan sendirinya.

<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
 <table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr>
   <td>
    Row 1
   </td>
  </tr>
  <tr>
   <td>
    Row 2
   </td>
  </tr>
  <tr>
   <td>
    Row 3
   </td>
  </tr>
 </table>
</td>

Sekarang kita akan menambahkan konten kita, dan menambahkan beberapa padding di tengah cell.

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td>
   Lorem ipsum dolor sit amet!
  </td>
 </tr>
 <tr>
  <td style="padding: 20px 0 30px 0;">
   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.
  </td>
 </tr>
 <tr>
  <td>
   Row 3
  </td>
 </tr>
</table>

Sekarang kita akan menambahkan dua kolom konten pada Row 3. Karena kita ingin sebuah 'margin' diantara dua cell tersebut, namun margin tidak didukung, sehingga kita akan membuat table dengan tiga kolom dengan sebuah cell kosong di antara dua kolom terluar.

Walaupun saya lebih suka untuk tetap menggunakan prosentase, ketika anda memiliki konten dengan ukuran spesifik, akan sangat sulit ketika menkonversinya ke dalam prosentase (pada contoh kali ini, kolom-kolom tersebut akan menjadi 48.1% yang berpotensi menimbulkan kebingungan). Untuk alasan ini, karena kedua gambar kita memiliki lebar 260px, kita juga akan membuat kolom dengan lebar 260px, dengan margin cell 20px. (Keseluruhan lebar menjadi 540px, yaitu lebar dari table kita, 600px dikurangi 30px padding pada kedua sisi). Pastikan untuk mengubah font-size dan line-height menjadi nol dan menambahkan karaketer   pada margin cell.

Kita juga akan menetapkan valign menjadi "top" untuk kedua cell sehingga mereka akan vertikal sejajar ke atas, walaupun jika satu kolom memiliki lebih banyak teks dari kolom lain. Penjajaran bakunya adalah "middle".

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td width="260" valign="top">
   Column 1
  </td>
  <td style="font-size: 0; line-height: 0;" width="20">
   &nbsp;
  </td>
  <td width="260" valign="top">
   Column 2
  </td>
 </tr>
</table>

Sekarang mari tambahkan gambar serta konten kita pada kolom tersebut. Karena kita membutuhan beberapa baris, kita akan menyarangkan table lagi karena kita tidak dapat menggunakan tag colspan dan rowspan. Kita juga akan menambahkan beberapa di antara gambar dan salinan di dalam masing-masing kolom.

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td width="260" valign="top">
   <table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
     <td>
      <img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" />
     </td>
    </tr>
    <tr>
     <td style="padding: 25px 0 0 0;">
      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.
     </td>
    </tr>
   </table>
  </td>
  <td style="font-size: 0; line-height: 0;" width="20">
   &nbsp;
  </td>
  <td width="260" valign="top">
   <table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
     <td>
      <img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" />
     </td>
    </tr>
    <tr>
     <td style="padding: 25px 0 0 0;">
      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.
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>

Di sini kita telah mengatur lebar gambar menjadi 100% dari lebar kolom menggunakan HTML. Hal ini, sekali lagi, adalah agar jika kita membuat email menajadi responsif, kita hanya perlu menggunakan media queries untuk mengubah lebar dari elemen induk. Nantinya kita harus menimpa tingginya dengan pixel karena style="height: auto" tidak dapat bekerja (uhuk, uhuk, Outlook). Jadi kita menetapkannya menggunakan pixel. Ini berarti kita nantinya harus menetapkan height: auto!important pada gambar-gambar tersebut menggunakan media queries untuk menimpa nilai pixel, yang untungnya dapat dapa kita lakukan hanya dengan satu class. Karena kita menentukan lebarnya dengan sebuah prosentase, kita nantinya tidak perlu menimpanya. Lebih sedikit hal yang harus ditimpa, lebih baik.

Footer

Sekarang kita akan menambahkan padding pada baris footer kita.

<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;">
 Row 3
</td>

Di dalam cell tersebut, kita akan menyarangkan table lain untuk membuat dua kolom.

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td>
   Column 1
  </td>
  <td>
   Column 2
  </td>
 </tr>
</table>

Kita akan membuat table lain untuk menempatkan ikon-ikon sosial media. Kita akan mengatur cell induknya menjadi align="right". Pastikan anda juga mengatur border="0" pada tautan-tautan gambar tersebut (untuk menghindari garis tautan biru) dan jangan lupa display:block.

<td align="right">
 <table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td>
    <a href="http://www.twitter.com/">
     <img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />
    </a>
   </td>
   <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
   <td>
    <a href="http://www.twitter.com/">
     <img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
    </a>
   </td>
  </tr>
 </table>
</td>

Sekarang kita akan menambahkan teks serta lebar pada cell kita, untuk berjaga-jaga, walaupun ada banyak whitespace di antara mereka. Kita akan mengatur cell ini menjadi 75% dan satunya menjadi 25%.

<td width="75%">
 &reg; Someone, somewhere 2013<br/>
 Unsubscribe to this newsletter instantly
</td>

Layout kita sudah jadi.

Validasi

Mari kita uji melalu W3C Validator untuk memastikan tidak ada tatanan yang rusak. Jika anda mengikuti tutorial ini dengan seksama, hasil ujinya akan mengatakan berhasil.

Selanjutnya kita akan melakukan uji coba melalui Litmus untuk memastkan bahwa struktur email kita berkerja dengan baik. Berikut ringkasan dari uji coba saya:

Take a look online

Pengaturan Style Teks

Baris pertama kita adalah sebagai heading. Kita akan menggunakan tag <b> untuk membuatnya tebal karena, seperti yang kita tahu, jika hal tersebut ada di HTML, gunakan itu alih-alih dengan CSS.

<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;">
 <b>Lorem ipsum dolor sit amet!</b>
</td>

Kita juga akan menambahkan style inline ini untuk semua teks di setiap cell:

style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;"

Selanjutnya kita mengatur style untuk teks di bagian footer, dan kita juga akan merapihkan tautan unsubscribe dengan menggunakan CSS dan HTML tag <font>. Cara ini untuk memastikan bahwa tautan tidak akan muncul dengan warna biru.

<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;">
 &reg; Someone, somewhere 2013<br/>
 <a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly
</td>

Dan kita sudah memasukkan semuanya. Saatnya untuk menghilangkan garis-garis table. Ubah setiap border="1" menjadi border="0".

Pada titik ini, layout email kita terlihat seperti mengawang, jadi mari kita tambahkan garis tipis pada table pertama:

style="border: 1px solid #cccccc;"

Sekarang tidak terlihat mengawang lagi. Sebagai sentuhan akhir, saya akan menambahkan 30px padding pada bagian bawah dari cell pertama, untuk mencegah email kita berhenti tiba-tiba pada bagian bawah pada beberapa aplikasi email (seperti Apple Mail), dan 10px padding atas, sehingga header biru kita memiliki ruang lebih untuk "bernafas".

<td style="padding: 20px 0 30px 0;">

Anda siap untuk melakukan uji terakhir.

Take a look online

Penutup

Sebagai tambahan saran untuk tutorial hari ini, jika anda memiliki comment, hapuslah. Beberapa aplikasi email dapat terhambat karena comment tersebut jadi lebih baik untuk menghapus kode yang tidak terpakai pada file-file anda.

Sekarang saatnya kita melakukan uji terakhir, dan kemudian, email HTML anda siap untuk anda kirim.