Bagaimana Cara Membuat Template Email dengan HTML & CSS?

Baik sebagai desainer maupun pengembang, suatu hari klien Anda akan meminta template email untuk buletin mereka. Saya harus mengatakan bahwa template email tidak begitu menarik hanya karena ada kesenjangan besar dalam dukungan untuk HTML dan CSS. Anda akan membayangkan 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 secara inline. Dalam kasus lain, 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 yang harus ditempuh. Mengingat bahwa email tidak terlalu besar secara keseluruhan, mendesain dan membuatnya tidaklah sulit – hanya membosankan dibandingkan dengan desain web atau seluler.

Desain

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

Struktur

Di dalam badan halaman HTML, rekatkan kode di bawah ini. Cukup dengan melihat kodenya, Anda dapat mengetahui bahwa tidak banyak struktur email ini. 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 konten dokumen. Tidak ada yang mewah sama sekali hanya reset dan definisi warna dan gaya tautan. Saya akan sangat berhati-hati dengan CSS apa 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 dicatat bahwa dalam tutorial Anda tidak harus benar-benar 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 asalkan ukurannya a: kecil dan b: memiliki tag alt yang menjelaskannya dengan baik. Saya yakin Anda tahu bahwa agar gambar muncul dalam email, penerima email ini harus mengizinkan gambar tersebut 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 adalah 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 Sebaris

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 tidak terlihat cantik sama sekali. Saya akan memecah bagian ini menjadi potongan-potongan kecil sehingga tidak terlalu berlebihan.

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

Tubuh

Pertama, mari kita 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 isi email dan memberikannya dengan warna latar belakang sendiri juga sehingga menonjol.

Baris Pertama – Tajuk

Ada banyak hal yang terjadi di dalam sel baris pertama. Harap dicatat bahwa gaya sebaris ada di <td> bukan <tr>. Apa yang kami lakukan di sini adalah warna latar belakang baru untuk mencocokkan 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 dapat melihatnya 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 mencakup dua kolom. Sel ini sedang dimanipulasi sedikit 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 mengatur keduanya, lebar dan padding. Mereka persis sama sehingga sel 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

Sejauh ini, ini adalah bagian yang paling bergaya dari template email HTML ini. Seperti yang Anda lihat pada 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 dan kontennya 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> <prsws_divider">