Bagaimana Cara Membuat Template Email dengan HTML & CSS?

Sebagai desainer dan pengembang, suatu hari klien Anda akan meminta template email untuk buletin mereka. Saya harus mengatakan bahwa template email tidak begitu menarik hanya karena ada celah besar dalam dukungan untuk HTML dan CSS. Anda akan berpikir bahwa di zaman sekarang ini tidak akan terjadi karena kami mendorong maju dengan HTML5 dan CSS3. Namun, saya sedih untuk mengatakan bahwa dalam hal merender email, sejauh ini tidak demikian.

Hal pertama yang perlu diingat saat membuat template email HTML adalah kenyataan bahwa semua gaya CSS harus dilakukan sebaris. Jika tidak, ini adalah larangan yang sangat besar. Tapi, karena sangat sedikit dukungan untuk CSS eksternal dan bahkan CSS di kepala, inline adalah cara untuk melakukannya. Selain itu – dan saya yakin Anda pernah mendengar tentang ini sebelumnya – template harus dibuat dengan TABEL, bukan DIV. Sekali lagi, ini sangat disayangkan tetapi ini adalah cara untuk pergi. Mengingat bahwa email secara keseluruhan tidak sebesar itu, mendesain dan membuatnya tidaklah sulit – hanya membosankan dibandingkan dengan desain web atau seluler.

Desain

 Direkomendasikan untuk Anda: Bagaimana Mempercepat Proses Desain Anda Menggunakan Framework CSS Modern?

Struktur

Di dalam badan halaman HTML, tempelkan kode di bawah ini. Cukup dengan melihat kodenya, Anda dapat mengetahui bahwa struktur email ini tidak banyak. Itu sebenarnya hal yang sangat bagus karena email tidak boleh rumit. Sejauh ini, hanya ada sedikit gaya yang menentukan lebar tabel total dan tidak ada apa pun di antara sel tabel.

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"></td> </tr> <tr><!-- Second row --> <td colspan="2"></td> </tr> <tr><!-- Third row --> <td></td> <td></td> </tr> <tr><!-- Fourth row --> <td></td> <td></td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2" ></td> </tr> </table>

Gaya

Oke, sekarang kita akan menambahkan beberapa CSS di dalam isi dokumen. Tidak ada yang mewah sama sekali hanya reset dan definisi warna dan gaya tautan. Saya akan sangat berhati-hati dengan CSS yang Anda masukkan di sini karena seringkali diabaikan oleh klien email.

 <style> * { margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #464646; text-decoration:none; } </style>

Konten

Waktunya telah tiba untuk mengisi tabel dengan konten. Anda dapat menemukan gambar di dalam file yang disediakan untuk Anda di atas – di awal tutorial ini. Sekarang Anda harus mengisi semua teks dan gambar yang ada di dalam email ini. Harap perhatikan bahwa dalam tutorial ini Anda tidak perlu menautkan hyperlink ke apa pun dan Anda juga bebas menggunakan gambar Anda sendiri. Sejauh ini di dalam kode, saya telah menentukan lebar untuk ketiga gambar hanya untuk memastikan ukurannya diatur.

Ada sesuatu yang saya ingin Anda sangat waspadai: gambar bagus untuk email selama ukurannya a: kecil dan b: memiliki tag alt yang mendeskripsikannya dengan baik. Saya yakin Anda tahu bahwa agar gambar muncul dalam email, penerima email ini harus mengizinkan gambar muncul. Jika mereka tidak melakukannya, tidak ada yang memberi tahu mereka apa yang seharusnya mereka harapkan. Ini juga merupakan masalah aksesibilitas jika Anda tidak memberikan deskripsi untuk pengguna tunanetra. Namun, itu cerita lain. Jadi, pelajarannya adalah: selalu gunakan gambar kecil dengan tag alt!

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>

Gaya Inline

Hal terakhir yang akan kita lakukan adalah menyediakan gaya CSS sebaris untuk template email HTML ini. Inilah yang membuat tampilan email seperti yang Anda lihat sejauh ini email ini sama sekali tidak terlihat cantik. Saya akan memecah bagian ini menjadi potongan-potongan kecil agar tidak terlalu berlebihan.

 Anda mungkin juga menyukai: 7 Tip Berguna untuk Membuat Baris Subjek Email Anda Lebih Dapat Diklik.

Tubuh

Pertama, mari atur warna latar belakang seluruh halaman email serta ukuran font dan warna font default.

 <body bgcolor="#f7d973" ></body>

Meja

Hal berikutnya yang harus dilakukan adalah memusatkan konten email dan memberikannya warna latar belakang sendiri juga agar menonjol.

Baris Pertama – Tajuk

Ada banyak hal yang terjadi di dalam sel baris pertama. Harap perhatikan bahwa gaya inline ada di <td> bukan <tr>. Apa yang kami lakukan di sini adalah warna latar belakang baru yang cocok dengan logo. Selain itu, ada beberapa padding dan alignment juga. Sekarang, saya mengubah warna teks menjadi putih karena teks alt akan menjadi hitam secara default. Anda tidak akan dapat melihatnya di latar belakang ini jadi saya memastikan Anda bisa dengan mengubah warna teks. Ini mungkin tampak tidak berguna bagi Anda, tetapi seperti yang saya katakan ini sangat penting bagi orang yang tidak memiliki gambar yang diizinkan secara default.

 <tr><!-- First row - header --> <td colspan="2"> <img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a> </td> </tr>

Baris kedua

Di dalam baris, sekali lagi, hanya ada satu sel yang merentang dua kolom. Sel ini sedikit dimanipulasi dengan menambahkan beberapa padding ke dalamnya dan garis pemutus di bagian bawah untuk memisahkan kontennya dari baris di bawahnya. Kami juga memiliki judul besar yang mendapatkan ruang melalui margin. Dan, itu saja untuk baris ini.

 <tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>

Baris Ketiga

Untuk kedua sel di sini kita menyetel keduanya, lebar dan padding. Mereka persis sama sehingga sel-selnya terbelah dua secara merata. Selain itu, tidak ada yang lain karena sel diisi dengan gambar dan beberapa teks tentangnya.

 <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>

Baris Keempat

Ini adalah bagian yang paling bergaya dari template email HTML ini. Seperti yang Anda lihat dengan kode di bawah ini, ada banyak hal yang terjadi. Pertama, seluruh baris mendapatkan warna latar belakang dan warna teks baru untuk memastikan teks terlihat – seperti di header. Keduanya, sel pertama dan kedua serta isinya mendapatkan perubahan gaya yang sama persis. Pertama, sel itu sendiri mendapatkan latar belakang dan warna teks baru. Kemudian, tautan di dalam judulnya diubah menjadi kuning. Terakhir, paragraf terakhir digarisbawahi dan untuk menambahkan beberapa pemisahan, margin juga ditambahkan. Seperti yang saya katakan, sel kedua dan isinya mendapatkan gaya yang sama persis.

 <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer
 Dan terakhir, footer. Sangat sedikit yang terjadi di sini; hanya beberapa spasi melalui padding dan hanya itu!
		








<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>
Kata Akhir

Tutorial ini agak panjang tapi saya harap Anda sekarang mengerti apa yang diperlukan untuk membuat template email HTML dari awal. Ini bukan konsep yang rumit tetapi bisa membosankan. Sekarang, giliran Anda untuk keluar dan mulai membuat email kelas atas yang tampak luar biasa! Anda dapat menggabungkan beberapa teknik pembuatan template email agar lebih unik.
Artikel ini ditulis oleh Hannah Butler. Dia bekerja sebagai pengembang web dan desainer. Selain itu, ia suka berbagi pengalamannya dalam bentuk artikel. Dalam hal ini, dia memiliki bagiannya sendiri di situs web WriteMyPaper4Me.co. Di masa depan, dia akan mulai menulis blog untuk menjelaskan metode kerjanya kepada orang lain.