Membangun Sebuah Template Email HTML dari Awal | Photoshop Services

Share on facebook
Share on google
Share on twitter
Share on linkedin
Membangun Sebuah Template Email HTML dari Awal | Photoshop Services

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

Permulaan

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

You are watching: how to design email templates

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

Sekarang, seperti yang telah kita bahas pada tutorial sebelumnya, anda harus mengawali dokumen HTML e mail 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 material-Sort” content material=”textual content/html; charset=UTF-8″ /> <title>Demystifying E mail Design</title> <meta identify=”viewport” content material=”width=device-width, initial-scale=1.0″/> </head> </html>

Setelah selesai, kita dapat memulai membangun susunan selanjutnya.

Membuat Physique dan Desk Utama

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

Kita juga akan menambahkan sebuah desk dengan lebar 100%. Ini berperan sebagai physique sesungguhnya untuk e mail kita, karena pengaturan model pada tag physique belum sepenuhnya didukung. Jadi, jika anda ingin menambahkan warna latar untuk physique e mail anda, anda harus menerapkannya pada desk tersebut.

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

Catatan: Kita akan membiarkan border=”1″ pada semua desk kita, sehingga kita dapat melihat kerangka dari format kita ketika bekerja. Kita akan menghilangkannya pada akhir tutorial in dengan menggunakan fitur Discover & Exchange.

<physique model=”margin: 0; padding: 0;”> <desk border=”1″ cellpadding=”0″ cellspacing=”0″ width=”100%”> <tr> <td> Hiya! </td> </tr> </desk> </physique>

111

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

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

Set this width utilizing HTML as a substitute of CSS, through the use of the width attribute. The golden rule in HTML e mail improvement is: if an attribute exists in HTML, use that as a substitute of CSS.

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

Kita akan mengganti ucapan selamat ‘Hiya!’ dengan desk berikut:

<desk align=”middle” border=”1″ cellpadding=”0″ cellspacing=”0″ width=”600″ model=”border-collapse: collapse;”> <tr> <td> Hiya! </td> </tr> </desk>

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

222

Membuat Susunan dan Header

Pada desain kita, kita dapat melihat bahwa e mail 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 complete tiga baris. Saya telah merubah teks di dalamnya sehingga kita bisa dengan mudah mengidentifikasi masing-masing baris.

<desk align=”middle” 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> </desk>

333

Sekarang kita akan mewarnai baris-baris tersebut sesuai desain. Karena bgcolor adalah sebuah HTML atribut yang legitimate, 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.

<desk align=”middle” 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> </desk>

444

Read more: How often should I touch up my balayage and roots? How much does it cost?

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

Menggunakan Padding

Ketika menggunakan padding pada e mail, anda harus selalu mengatur nilai tiap satuan (prime, proper, backside 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 model=”line-height: 0; font-size: 0;” pada cell tersebut, taruhlah sebuah &nbsp; di dalam dan beri tinggi dan lebar. Berikut contohnya:

<tr><td model=”font-size: 0; line-height: 0;” top=”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 model=”show:block;” yang merupakan cara umum untuk mencegah beberapa aplikasi e mail menambahkan jarak di bawah gambar. Kita akan menengahkan gambar tersebut dengan menambahkan align=”middle” pada tag td kita. Kita juga akan menambahkan sebuah tag alt yang sangat penting ketika e mail 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 e mail, jadi jika ada aspek yang penting dari e mail anda, jangan pernah hanya menampilkannya dalam bentuk gambar. Pada contoh kali ini, agaknya cukup berlebihan.

<td align=”middle” bgcolor=”#70bbd9″ model=”padding: 40px 0 30px 0;”> <img src=”pictures/h1.gif” alt=”Creating E mail Magic” width=”300″ top=”230″ model=”show: block;” /> </td>

Creating Email Magic66

Membuat Space Konten

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

677

Sekarang kita akan menambahkan sebuah desk 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 desk menjadi 100% alih-alih menggunakan pixel karena hal ini akan membantu kita jika kita nantinya ingin membuat e mail kita responsif. Jika anda selalu menggunakan pixel, anda dapat berakhir dengan mendapati banyak nilai yang harus anda timpa dengan media queries. Jika desk anda berbasis prosentase, kemudian ketika anda menyesuaikan elemen induknya, semuanya turunannya akan dapat menyesuaikan dengan sendirinya.

<td bgcolor=”#ffffff” model=”padding: 40px 30px 40px 30px;”> <desk 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> </desk> </td>

788

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

899

<desk border=”1″ cellpadding=”0″ cellspacing=”0″ width=”100%”> <tr> <td> Lorem ipsum dolor sit amet! </td> </tr> <tr> <td model=”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> </desk>

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 desk 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 desk kita, 600px dikurangi 30px padding pada kedua sisi). Pastikan untuk mengubah font-size dan line-height menjadi nol dan menambahkan karaketer &nbsp; pada margin cell.

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

<desk border=”1″ cellpadding=”0″ cellspacing=”0″ width=”100%”> <tr> <td width=”260″ valign=”prime”> Column 1 </td> <td model=”font-size: 0; line-height: 0;” width=”20″> &nbsp; </td> <td width=”260″ valign=”prime”> Column 2 </td> </tr> </desk>

91010

Sekarang mari tambahkan gambar serta konten kita pada kolom tersebut. Karena kita membutuhan beberapa baris, kita akan menyarangkan desk 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.

<desk border=”1″ cellpadding=”0″ cellspacing=”0″ width=”100%”> <tr> <td width=”260″ valign=”prime”> <desk border=”1″ cellpadding=”0″ cellspacing=”0″ width=”100%”> <tr> <td> <img src=”pictures/left.gif” alt=”” width=”100%” top=”140″ model=”show: block;” /> </td> </tr> <tr> <td model=”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> </desk> </td> <td model=”font-size: 0; line-height: 0;” width=”20″> &nbsp; </td> <td width=”260″ valign=”prime”> <desk border=”1″ cellpadding=”0″ cellspacing=”0″ width=”100%”> <tr> <td> <img src=”pictures/proper.gif” alt=”” width=”100%” top=”140″ model=”show: block;” /> </td> </tr> <tr> <td model=”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> </desk> </td> </tr> </desk>

Di sini kita telah mengatur lebar gambar menjadi 100% dari lebar kolom menggunakan HTML. Hal ini, sekali lagi, adalah agar jika kita membuat e mail menajadi responsif, kita hanya perlu menggunakan media queries untuk mengubah lebar dari elemen induk. Nantinya kita harus menimpa tingginya dengan pixel karena model=”top: auto” tidak dapat bekerja (uhuk, uhuk, Outlook). Jadi kita menetapkannya menggunakan pixel. Ini berarti kita nantinya harus menetapkan top: auto!vital 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.

10

Footer

Sekarang kita akan menambahkan padding pada baris footer kita.

<td bgcolor=”#ee4c50″ model=”padding: 30px 30px 30px 30px;”> Row 3 </td>

131313

See more: 50 Tutorial Efek Foto Yang Menakjubkan | Photoshop Services

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

<desk border=”1″ cellpadding=”0″ cellspacing=”0″ width=”100%”> <tr> <td> Column 1 </td> <td> Column 2 </td> </tr> </desk>

141414

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

<td align=”proper”> <desk border=”0″ cellpadding=”0″ cellspacing=”0″> <tr> <td> <a href=”http://www.twitter.com/”> <img src=”pictures/tw.gif” alt=”Twitter” width=”38″ top=”38″ model=”show: block;” border=”0″ /> </a> </td> <td model=”font-size: 0; line-height: 0;” width=”20″>&nbsp;</td> <td> <a href=”http://www.twitter.com/”> <img src=”pictures/fb.gif” alt=”Fb” width=”38″ top=”38″ model=”show: block;” border=”0″ /> </a> </td> </tr> </desk> </td>

151515

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; Somebody, someplace 2013<br/> Unsubscribe to this text immediately </td>

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

TwitterFacebook17

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

1717email-build-valid
Have a look on-line

Pengaturan Fashion 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 model=”coloration: #153643; font-family: Arial, sans-serif; font-size: 24px;”> <b>Lorem ipsum dolor sit amet!</b> </td>

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

model=”coloration: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;”

Selanjutnya kita mengatur model 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 model=”coloration: #ffffff; font-family: Arial, sans-serif; font-size: 14px;”> &reg; Somebody, someplace 2013<br/> <a href=”#” model=”coloration: #ffffff;”><font coloration=”#ffffff”>Unsubscribe</font></a> to this text immediately </td>

email-build-validemail-build-validemail-build-litmus

Dan kita sudah memasukkan semuanya. Saatnya untuk menghilangkan garis-garis desk. Ubah setiap border=”1″ menjadi border=”0″.

email-build-litmusemail-build-litmus20

Pada titik ini, format e mail kita terlihat seperti mengawang, jadi mari kita tambahkan garis tipis pada desk pertama:

model=”border: 1px strong #cccccc;”

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

<td model=”padding: 20px 0 30px 0;”>

202021

Anda siap untuk melakukan uji terakhir.

212123
Have a look on-line

Penutup

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

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

Danh mục: How to?
Nguồn: https://photoshopservices.net

Leave a Reply

×

Powered by WhatsApp Chat

× How can I help you?
%d bloggers like this: