Memulai dengan Email HTML

() translation by (you can also view the original English article)

Email HTML adalah cara yang bagus untuk membuat klien diposting pada pembaruan terbaru terkait dengan bisnis atau produk Anda, tetapi mereka agak rumit. Dukungan CSS pada klien email tidak konsisten. Sebagai hasilnya, kita harus resor untuk teknik kuno, seperti menggunakan tabel, dan inline CSS. Hari ini, saya akan memandu Anda melalui proses menciptakan sederhana HTML email.

Penghantar: HTML email

Sebagai pengembang web lepas, pengkodean email HTML adalah salah satu tugas yang lebih menantang yang harus saya tangani. Untungnya, ketika salah satu klien pertama saya meminta saya untuk mendesain dan membuat kode buletin emailnya, dia cukup sabar untuk membiarkan saya melalui proses panjang dan frustasi dalam mencari tahu semuanya. Anda mungkin tidak seberuntung itu, jadi persiapkan diri Anda dengan tutorial ini.

Masalah: Email Klien

Anda pikir IE menyakitkan di pantat? Tunggu hingga Anda bertemu Outlook 2007. Karena perbedaan besar dalam rendering HTML / CSS antara klien email, menggunakan teknik pengkodean modern akan menghasilkan kekacauan yang agak dahsyat di banyak klien email populer. Klien surel sama sekali tidak membuat HTML dengan cara yang sama seperti peramban - bahkan tidak menutup dalam banyak kasus. Hal-hal seperti pelampung, gambar latar belakang, dan bahkan margin tidak lagi menjadi bagian dari kosakata Anda. Jadi apa yang harus dilakukan oleh pembuat kode pencinta standar?

Solusi: Kode seperti itu 1997

Itu benar. Tabel. Cellpadding, cellspacing, colspan, Semua hal-hal kotor yang Anda pikir Anda telah meninggalkan di belakang. Tabel adalah satu-satunya cara untuk mendapatkan email konsisten layout, jadi sekarang saatnya untuk (sementara) lupa jalanmu mengasihi CSS dan merangkul tabel un-semantik, berantakan.

Langkah 1: Desain

Tetap Sederhana

Saat merancang email HTML, ingatlah kesederhanaan. Desain yang kita gunakan hari ini memiliki beberapa tata letak kolom, sebagian besar untuk tujuan demonstrasi, tetapi pertimbangkan untuk tetap menggunakan dua kolom saat mengode buletin Anda sendiri untuk menghemat banyak sakit kepala.

Meminimalkan penggunaan gambar

Ingatlah untuk tidak terlalu menyukai desain Anda karena Outlook tidak mendukung gambar latar belakang. Bahkan, tergantung pada kebutuhan klien Anda, Anda mungkin ingin melewatkan proses Photoshop sepenuhnya untuk memaksa diri Anda agar desainnya praktis. Yang mengatakan, kita akan menggunakan Photoshop di sini sehingga Anda bisa mendapatkan ide yang lebih baik dari rencana kita.

Anda dapat menggunakan gambar latar belakang untuk alasan dekoratif, selama email dapat terbaca dan masuk akal tanpa mereka. Sebagai contoh, kita akan menambahkan sedikit gradien ke header kita, tetapi itu bukan masalah besar jika itu tidak muncul.

Tipis adalah lebih baik

Karena email klien Tinjauan windows sering hanya sebagian kecil dari layar lebar, Anda umumnya ingin menjaga desain Anda di bawah tentang 600px. Tak seorang pun suka horisontal scroll bar.

Konsisten

Ingat bahwa kita akan menggunakan sifat-sifat tidak fleksibel seperti cellpadding dan cellspacing untuk spasi keluar elemen kami. Bijaksana untuk mencoba dan menjaga jarak antara unsur-unsur yang konsisten.

Desain kami

Desain ini mirip dengan satu I digunakan untuk klien newsletter musim panas lalu, tetapi disederhanakan. Ianya tidak cantik, tapi itu bukan titik di sini. Ini sederhana dan konsisten, dan memiliki sejumlah pilihan tata letak sehingga Anda dapat melihat bagaimana mereka berbeda.

Langkah 2: Perencanaan kode kita

Dalam pengalaman saya, kode HTML email jadi sangat rumit, sangat cepat. Hal ini penting untuk memiliki rencana serangan. Jadi di sini adalah rencana (kami akan kembali ke hal ini, jangan khawatir jika Anda tidak mengikuti).

Pertama, kita mulai dengan satu besar 100% lebar tabel dengan latar belakang abu-abu, ini adalah meja "pembungkus" kami.

Selanjutnya, mencatat bahwa ada tiga lebih tabel di dalam bungkus tabel: satu di bagian atas untuk link "Lihat di browser", satu di tengah-tengah untuk konten utama, dan satu di bagian bawah untuk "unsubscribe" link.

Akhirnya, dalam tabel utama, setiap bagian horisontal konten akan dalam baris tabel dan sel tabel. Sel-sel tabel ini, pada gilirannya, akan berisi meja lain untuk host setiap bagian konten:

Cellpadding dan Celispacing

.Daripada menggunakan margin dan padding properti CSS, kita akan menggunakan atribut HTML cellpadding dan cellspacing Memikirkan cellpadding sebagai hampir sama dengan CSS padding - ruang di dalam elemen, di sekitar isi. Cellspacing merupakan ruang antara sel data di atas meja.

Meja #main kami akan memiliki 15px dari cellspacing, sehingga kita akan memiliki 15px spasi-putih di sekitar bagian konten seluruh utama, dan 15px antara setiap kumpulan horisontal. Cellpadding dan cellspacing hanya berlaku untuk tabel orangtua, bukan anak-anak. Jika kita tidak ingin cellpadding atau cellspacing, kita perlu menentukan bahwa untuk setiap meja.

Langkah 3: Mengkodekannya

Sekarang kita dapat mulai proses pengkodean newsletter kitai, bagian per bagian. Bertentangan dengan praktik terbaik, kita akan melakukan beberapa styling juga dengan struktur. Kita akan mulai dengan tata letak, termasuk semua spasi dan padding dan warna latar belakang, setelah itu, kita akan melakukan tipografi dan hal-hal CSS lain.

Mempersiapkan

Setup untuk email benar-benar sederhana: hanya tag html, kepala dan tubuh yang terlibat. Mari kita tambahkan tabel pembungkus dan tiga tabel utama yang kita bahas sebelumnya.

Sejauh doctypes bersangkutan, ada beberapa pendekatan yang berbeda, seperti yang dijelaskan dalam artikel ini. Dalam kasus kita, saya telah memutuskan untuk tidak menggunakan satu, karena kita tidak perlu ada salah satu hal yang kita akan dengan menyatakan doctype. Itu akan mendapatkan dilucuti keluar dalam kebanyakan kasus pula.

<html>

<p><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Nettuts Email Newsletter</title>
</head></p>

<p><body></p>

<p><table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4"><tr><td></p>

<p><table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
	</table><!-- top message -->

	<table id="main" cellpadding="0" cellspacing="15" bgcolor="ffffff" width="600" align="center">
	</table><!-- main -->

	<table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">
	</table><!-- bottom message --></p>

<p></tr></td></table><!-- wrapper --></p>

<p></body></p>

<p></html>
</p>

Pada umumnya, lebih baik untuk menetapkan lebar ke sel-sel tabel individu daripada ke meja itu sendiri.

Perhatikan bahwa tabel pesan dua memiliki nilai-nilai cellpadding 20px. Ini akan ruang keluar mereka paragraf dari konten utama. Tabel utama telah 15px dari cellspacing. Ini adalah untuk membentuk ritme vertikal yang konsisten. Karena setiap bagian dalam sel tabel sendiri, akan ada 15px antara mereka semua.

Juga perhatikan bahwa tabel siap untuk menyelaraskan = "pusat", dan kami telah secara eksplisit mendefinisikan lebar mereka. Dalam HTML email, umumnya terbaik tidak untuk menentukan lebar untuk membungkus tabel. Anda lebih baik mendefinisikan lebar untuk setiap sel, tetapi dalam kasus ini kita akan mematahkan aturan ini karena kita memiliki cellspacing/cellpadding perlu khawatir.

Pesan tabel

Ini super sederhana: hanya paragraf dalam sel-sel yang pusat-blok.

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
	<tr>
		<td align="center">
			<p>Trouble viewing this email? <a href="#">View in Browser</a></p>
		</td>
	</tr>
</table><!-- top message --><p>Ê</p>

Pesan bawah adalah persis sama.

Header

Header ini cukup sederhana, hanya satu kolom, dengan tiga baris. Karena kita memiliki latar belakang biru yang bagus, kita akan membutuhkan beberapa padding di sekitar setiap sel untuk mendapatkan teks dari tepi.

1	<tr>
2	<td>
3	<table id="header" cellpadding="10" cellspacing="0" align="center">
4	<tr>
5	<td width="570" bgcolor="7aa7e9"><h1>Communitech Venture Services</h1></td>
6	</tr>
7	<tr>
8	<td width="570" bgcolor="8fb3e9"><h2>News and Events</h2></td>
9	</tr>
10	<tr>
11	<td width="570" align="right" bgcolor="7aa7e9"><p>July 2010</p></td>
12	</tr>
13	</table><!-- header -->
14	</td>
15	</tr><!-- header -->

Ingat untuk mengatur lebar bidang setiap sel, yang dalam kasus ini adalah 570px (600px-15px dari cellspacing di setiap sisi). Kami juga telah menetapkan properti rata untuk tanggal ke kanan. Tepat sekarang, kitai tidak menambahkan dalam gambar latar belakang, kita akan melakukannya nanti. Dalam waktu yang berarti, hanya menggunakan biru ringan.

Perhatikan bahwa kita menggunakan bgcolor bukan gaya = "latar belakang:". Hal ini karena nilai-nilai html lebih baik didukung di klien email dari CSS properti.

Itulah apa yang kita punya sejauh ini, tampak cukup buruk, tapi tata letak adalah hanya apa yang kita inginkan.

Bagian Konten - 2-Kolom

Bagian konten pertama kita adalah kiri-blok gambar dengan dua berita utama di samping itu. Daripada menggunakan CSS mengapung seperti kita biasanya, kita akan membuat sebuah tabel dengan tiga sel:

satu untuk gambar,
satu untuk ruang antara gambar dan berita,
dan akhirnya satu untuk tajuk berita utama.

Untuk gambar dengan perbatasan, kita akan sarang meja lain dalam sel dan mengatur cellpadding ke 5px dan memberikan warna latar belakang abu-abu. Cellpadding menambah lebar elemen, jadi kita perlu mengurangi lebar sel didefinisikan oleh 10px.

<tr>
	<td></td>
</tr>
<tr>
	<td>
		<table id="content-1" cellpadding="0" cellspacing="0" align="center">
			<tr>
				<td width="170" valign="top">
					<table cellpadding="5" cellspacing="0">
						<tr>
							<td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
						</tr>
					</table>
				</td>
				<td width="15"></td>
				<td width="375" valign="top" colspan="3">
					<h3>All New Site Design</h3>
					<h4>It's 150% Better and 40% More Efficient!</h4>
				</td>
			</tr>
		</table><!-- content 1 -->
	</td>
</tr><!-- content 1 -->

Pemberitahuan:

Kita telah menambahkan baris tabel kosong dan sel di atas konten. Karena kita memiliki 15px dari cellspacing, kita dapat menggunakan sel kosong untuk menambahkan 15px jarak antara unsur-unsur. Dalam pengujian saya, ini bekerja baik kosong, tetapi Anda selalu bisa menambahkan sebuah ruang bebas-melanggar untuk memastikan.
Kami menetapkan v-align properti ke top. Hal ini penting, karena itu menyelaraskan setiap sel dengan bagian atas baris. Default menengah, yang mengarah ke beberapa hasil yang aneh.
Kita menggunakan dummy gambar dari dummyimage.com karena semua gambar dalam HTML email harus host (lebih pada yang kemudian) dan itu jauh lebih mudah untuk Gunakan dihasilkan gambar. Periksa situs, ini menjelaskan cara menentukan gambar yang Anda inginkan dengan URL.

Bagian konten - 1-Kolom

Ini adalah bagian benar-benar sederhana: hanya satu-kolom tabel dengan paragraf dalam. Jangan lupa untuk mengatur lebar bidang sel dan untuk mengatur meja untuk pusat menyelaraskan.

<p><tr>
	<td>
		<table id="content-2" cellpadding="0" cellspacing="0" align="center">
			<tr>
				<td width="570"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
			</tr>
		</table><!-- content-2 -->
	</td>
</tr><!-- content-2 -->
</p>

Pembagi

Untuk menambah ruang vertikal (lebih dari 15px dari cellspacing kami memiliki) kita harus menggunakan gambar spacer. Seperti 90 's! Kita bisa menggunakan spacer gif dan meng-upload, tetapi pada saat itu lebih cepat untuk hanya menggunakan gambar dummy lain. Saya akan meninggalkan itu abu-abu sehingga Anda dapat melihatnya, tapi kemudian kita bisa mengaturnya putih pada putih.

1	<tr>
2	<td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>
3	</tr>

Yang memberikan kita sesuatu seperti ini:

Bagian Konten - 3-Kolom

Untuk bagian 3-kolom, kita menggunakan sel-sel tabel lima, satu untuk setiap kolom, dan satu antara kolom untuk memisahkan mereka.

<tr>
	<td>
		<table id="content-3" cellpadding="0" cellspacing="0" align="center">
			<tr>
				<td width="180" valign="top">
					<table cellpadding="5" cellspacing="0">
						<tr>
							<td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
						</tr>
					</table>
				</td>
				<td width="15"></td>
				<td width="180" valign="top">
					<table cellpadding="5" cellspacing="0">
						<tr>
							<td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
						</tr>
					</table>
				</td>
				<td width="15"></td>
				<td width="180" valign="top">
					<table cellpadding="5" cellspacing="0">
						<tr>
							<td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
						</tr>
					</table>
				</td>
			</tr>
		</table><!-- content-3 -->
	</td>
</tr><!-- content-3 -->

Cukup mudah, menggunakan metode yang sama untuk perbatasan seperti yang kita lakukan di bagian 2-kolom. Jangan lupa v-align!

Tiga teks kolom adalah persis proses yang sama.

<tr>
	<td>
		<table id="content-4" cellpadding="0" cellspacing="0" align="center">
			<tr>
				<td width="180" valign="top">
					<h5>Exciting New Products!</h5>
					<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.									Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>
				</td>
				<td width="15"></td>
				<td width="180" valign="top">
					<h5>A Newsletter Every Month</h5>
					<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
						deserunt mollit anim id est laborum.</p>
				</td>
				<td width="15"></td>
				<td width="180" valign="top">
					<h5>New and Improved Forum</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
						sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				</td>
			</tr>
		</table><!-- content-4 -->
	</td>
</tr><!-- content-4 -->

Tambahkan di lain pembagi di bagian bawah, dan kami hampir di sana.

Sisanya...

Segala sesuatu yang lain adalah hanya mengulangi apa yang telah kita lakukan: Bagian 2-kolom dan bagian 1-kolom dengan pemisah antara mereka.

<tr>
	<td>
		<table id="content-5" cellpadding="0" cellspacing="0" align="center">
			<tr>
				<td width="267" valign="top">
					<table cellpadding="5" cellspacing="0" bgcolor="d0d0d0"><tr><td>
						<img src="http://dummyimage.com/267x200/e9e9e9/fff" />
					</td></tr></table>
				</td>
				<td width="15"></td>
				<td width="278" valign="top">
					<h4>This is a heading</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				</td>
			</tr>
		</table><!-- content-5 -->
	</td>
</tr><!-- content-5 -->
<tr>
	<td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>
</tr>
<tr>
	<td>
		<table id="content-6" cellpadding="0" cellspacing="0" align="center">
			<p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
			<p align="center"><a href="#">CALL TO ACTION</a></p>
		</table>
	</td>
</tr>

Dan tata letak yang utama sekarang lengkap:

Sebuah kata pada gambar

Tidak seperti halaman web biasa, Anda tidak bisa hanya meletakkan semua gambar Anda dalam folder dan kemudian menggunakan jalur relatif untuk link ke mereka. Semua link harus mutlak! Ketika saya sedang mengembangkan email, saya biasanya meng-host gambar pada subdomain atau Amazon S3. Ketika saya sudah siap untuk mengirim email untuk klien, saya memindahkan semua gambar ke subdomain dari situs web mereka.

Semua link gambar harus mutlak!

Langkah 4: Mendesain Email

Kita tidak dapat menggunakan stylesheet eksternal, dan kita tidak dapat menanamkan CSS di kepala email, karena beberapa klien akan menghapus seluruh tag kepala, atau mengabaikan tag gaya. Kita akan harus menggunakan gaya inline, yang sangat menyebalkan. Untungnya, ada berguna layanan yang tersedia yang akan mengambil tertanam CSS dan membuatnya inline. Saya menggunakan sebuah situs web disebut Premailer, mana Anda dapat menyisipkan kode langsung dan output hal yang sama dengan inline CSS.

Kami akan melakukan tertanam CSS untuk tutorial ini, maka kita akan membuatnya sejalan dengan premailer.

Premailer mengambil tertanam CSS dan membuatnya inline!

Reset Dasar

Kita tidak akan melakukan reset yang sulit dengan * pemilih seperti yang mungkin Anda lakukan untuk halaman web. Menggunakan default benar-benar akan menghasilkan hasil yang lebih konsisten. Unsur-unsur hanya padding/margin yang kita perlu menyetel ulang adalah orang yang akan memiliki ruang di sekitar mereka (dari cellpadding/cellspacing) seperti judul header kami, atau paragraf kami.

Anda juga akan melihat margin di sekitar tabel pembungkus, yang hanya merupakan penataan standar pada elemen tubuh.

1	<style type="text/css">
2	body, #header h1, #header h2, p {margin: 0; padding: 0;}
3	</style>

Tipografi

Tidak ada yang istimewa tentang tipografi untuk email karena cukup banyak yang sama akan menjadi halaman web. Jangan gunakan deklarasi pendek (seperti font:) karena Anda tidak akan mendapatkan hasil yang konsisten.

#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
#header h1 {color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; }
#header h2 {color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 24px; }
#header p {color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px;  }
h3 {font-size: 28px; color: #444444; font-family: Arial, Helvetica, sans-serif; }
h4 {font-size: 22px; color: #4A72AF; font-family: Arial, Helvetica, sans-serif; }
h5 {font-size: 18px; color: #444444; font-family: Arial, Helvetica, sans-serif; }
p {font-size: 12px; color: #444444; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;}
h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}

Dan lihat: sekarang jauh lebih baik!

Gambar latar belakang

Gambar latar belakang bekerja hampir sama dengan di halaman web, kecuali kadang-kadang tidak berfungsi! Pastikan Anda memiliki warna latar belakang fallback, yang ditetapkan ke sel sebagai bgcolor, untuk klien yang tidak mendukung latar belakang CSS.

1	<td style="background: url(http://tessat.s3.amazonaws.com/email-bg.jpg); " width="570" bgcolor="8fb3e9:><h2>News and Events</h2></td>

Miscellaneous gaya lainnya

Kita perlu memberi style pada setiap tautan atau mereka akan mewarisi warna default yang dimiliki klien email, dan memungkinkan juga menambahkan perbatasan itu di sekitar tabel utama. Kita juga akan menambahkan display : block ke semua gambar kami, ini memecahkan bug di Outlook dan Hotmail.

Pastikan untuk menambahkan "display: block" ke semua gambar untuk mencegah bug margin aneh di Hotmail.

1	#main {border: 1px solid #cfcece;}
2	img {display: block;}
3	a {color: #4A72AF;}

!Dan kita sudah selesai dengan bagian yang mudah. Sekarang ke pengujian!

Langkah 5: Pengujian

Proses pengujian adalah bagian terpenting dan paling menjengkelkan dalam membuat email HTML. Ketika saya mengerjakan email, saya sering menguji, di setiap tahap, sehingga saya bisa menentukan dengan tepat apa yang salah. Ada banyak klien untuk diuji, dan banyak cara untuk menguji mereka, mari kita selidiki semuanya.

Klien email

Ini adalah klien yang harus Anda uji, paling tidak:

Outlook 2003/2007
Hotmail
Yahoo! Mail
Gmail
Apple Mail
Thunderbird

Cara mengujinya

Kita harus menemukan cara untuk mengirim HTML email pertama. Klien Anda mungkin akan mengatur dengan layanan seperti Mailchimp atau Campaign Monitor, yang akan memungkinkan Anda untuk menguji dan mengirimkan email kampanye.

Anda mungkin berpikir saya mempersulit hal ini secara tidak perlu, karena beberapa klien email membiarkan Anda menempelkannya dalam kode HTML. Namun, ini dapat menyebabkan hasil yang berbeda daripada saat menggunakan aplikasi kampanye email. Uji dengan aplikasi agar aman.

Menguji dengan Mailchimp

Metode pilihan saya melibatkan penggunaan Mailchimp untuk menguji dan mengirim kampanye pengujian. Mailchimp gratis untuk hingga 500 penerima, jadi Anda tidak perlu membayar untuk pengujian. Ini memiliki antarmuka yang sederhana dan mudah digunakan. Berikut adalah panduan langkah demi langkah cepat:

Mendaftar untuk akun Mailchimp gratis, dan tambahkan daftar penerima akun email uji Anda: Hotmail, Yahoo !, dan Gmail, dan masuk ke akun baru Anda.
Pilih campaign dan pilih regular ol" campaign "dari halaman akun utama. Isi info dasar tentang campaign, Anda hanya perlu nama untuk tujuan pengujian.
Pada halaman design , pilih Import -> Paste in code dan pastikan Anda memilih Automatic CSS Inliner
Jika Anda tidak menggunakan Mailchimp, pastikan Anda menggunakan Premailer untuk mendapatkan inline CSS Anda
Lanjutkan sampai Anda tiba di halaman confirm dan pilih send test. Anda dapat mengirim beberapa tes dari sini tetapi setelah itu, Anda harus benar-benar mengirim email ke daftar Anda.

Menguji dengan Litmus

.Litmus adalah aplikasi web yang menguji email HTML di semua jenis versi dari semua jenis klien. Layanan lengkap membutuhkan biaya, tetapi jika Anda tidak dapat meyakinkan klien Anda untuk membayar, versi gratisnya masih memungkinkan Anda menguji di Gmail lama dan Outlook 2003, yang masih berguna.

Hasil - Yang baik

Beberapa tes kami ternyata cukup baik:

Apple Mail

Thunderbird

Hasil - The Bad-ish

Beberapa agak sedikit, tetapi kurang lebih sama:

Gmail (safari)

Outlook 2007

Outlook 2003

Yahoo! Mail

Hasil - Yang jelek

Kami juga mengalami beberapa kegagalan.

Hotmail (GREEN???)

Old Gmail (explorer)

Membersihkan kekacauan

Semua hal dipertimbangkan, ini adalah tes yang cukup sukses, karena saya menguji banyak elemen di Outlook dan Gmail saat saya pergi. Masalah yang kami miliki dengan Gmail dan Hotmail lama terkait dengan lembar gaya default yang digunakan klien. Merek gila dan istimewa Microsoft yang unik telah memberi kami lembar gaya default yang mengesampingkan semua judul dengan gaya green text dengan penandaan! Important. Terkadang saya cukup yakin mereka ingin membuat saya gila.

Untuk mengatasi ini, kita perlu menambahkan deklarasi ! important untuk semua gaya warna heading kita seperti ini:

h3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }

	h4 {font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; }

	h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }

Untuk Gmail lama, kami memiliki masalah yang sama di header: Gmail menambahkan margin ekstra ke bagian bawah tag heading. Kita hanya perlu mengesampingkan margin-bottom secara khusus.

#header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; }

	#header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important}

Dan kami memperbaiki Hotmail:

Jadi begitulah, email HTML fungsional, konsisten (jika sedikit polos). Memang menyebalkan, ya, tetapi begitu sistem Anda berjalan, itu berjalan jauh lebih cepat. Cobalah untuk menjaga kode Anda dikomentari dan diorganisir dengan baik sehingga Anda dapat menggunakan kembali bagian-bagiannya nanti.

Jika Anda dapat membujuk klien Anda untuk mendaftar untuk sesuatu seperti Litmus, hidup Anda akan jauh lebih mudah. Anda juga dapat menguji banyak klien melalui versi berbayar dari Mailchimp dan Campaign monitor.

Penyelesaian masalah

Anda pasti akan menemukan masalah yang belum saya bahas di sini, tetapi saya memiliki beberapa saran umum untuk menyelesaikannya:

Periksa matematika Anda: Saya tidak ingat berapa kali saya mengacaukan tata letak dengan tidak menambahkan lebar sel tabel secara akurat. Ingatlah untuk memperhitungkan cellpadding: menambah lebar sel Anda.
Periksa stylesheet default: gunakan sesuatu seperti Firebug atau Webkit Inspector untuk memeriksa apakah klien browser mengganti-ganti style Anda. Jika ini terjadi, tambahkan ! important deklarasi harus menyelesaikan masalah.
Lihat itu: selalu ada peluang bagus seseorang mengalami masalah Anda sebelumnya. Jika Google tidak membantu, cobalah meramban kiat dan trik di blog layanan campaign email populer, beberapa orang mencari email sebagai penghidupan, dan mereka tahu barang-barang mereka!
Hancurkan: Jika Anda tidak dapat menemukan kesalahan Anda, kembalilah ke awal dan periksa email Anda sedikit demi sedikit sampai Anda menemukan apa yang memecahnya.

Hasil

Ini kode terakhir untuk referensi Anda:

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Nettuts Email Newsletter</title>
   <style type="text/css">
   	a {color: #4A72AF;}
	body, #header h1, #header h2, p {margin: 0; padding: 0;}
	#main {border: 1px solid #cfcece;}
	img {display: block;}
	#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
	#header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; padding-bottom: 0; }
	#header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important; padding-bottom: 0; }
	#header p {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px;  }
	h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}
	h3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
	h4 {font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; }
	h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
	p {font-size: 12px; color: #444444 !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;}
   </style>
</head>

<body>

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4"><tr><td>

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
		<tr>
			<td align="center">
				<p>Trouble viewing this email? <a href="#">View in Browser</a></p>
			</td>
		</tr>
	</table><!-- top message -->

<table id="main" width="600" align="center" cellpadding="0" cellspacing="15" bgcolor="ffffff">
		<tr>
			<td>
				<table id="header" cellpadding="10" cellspacing="0" align="center" bgcolor="8fb3e9">
					<tr>
						<td width="570" bgcolor="7aa7e9"><h1>Communitech Venture Services</h1></td>
					</tr>
					<tr>
						<td width="570" bgcolor="8fb3e9" style="background: url(http://tessat.s3.amazonaws.com/email-bg.jpg);"><h2 style="color:#ffffff!important">News and Events</h2></td>
					</tr>
					<tr>
						<td width="570" align="right" bgcolor="7aa7e9"><p>July 2010</p></td>
					</tr>
				</table><!-- header -->
			</td>
		</tr><!-- header -->

		<tr>
			<td></td>
		</tr>
		<tr>
			<td>
				<table id="content-1" cellpadding="0" cellspacing="0" align="center">
					<tr>
						<td width="170" valign="top">
							<table cellpadding="5" cellspacing="0">
								<tr><td bgcolor="d0d0d0"><img src="http://tessat.s3.amazonaws.com/coins_small.jpg" width="170" /></td></tr></table>
						</td>
						<td width="15"></td>
						<td width="375" valign="top" colspan="3">
							<h3>All New Site Design</h3>
							<h4>It's 150% Better and 40% More Efficient!</h4>
						</td>
					</tr>
				</table><!-- content 1 -->
			</td>
		</tr><!-- content 1 -->
		<tr>
			<td>
				<table id="content-2" cellpadding="0" cellspacing="0" align="center">
					<tr>
						<td width="570"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
					</tr>
				</table><!-- content-2 -->
			</td>
		</tr><!-- content-2 -->
		<tr>
			<td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>
		</tr>
		<tr>
			<td>
				<table id="content-3" cellpadding="0" cellspacing="0" align="center">
					<tr>
						<td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">
							<img src="http://tessat.s3.amazonaws.com/crayons.jpg" width="170" />
						</td>
						<td width="15"></td>
						<td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">
							<img src="http://tessat.s3.amazonaws.com/handshake.jpg" />
						</td>
						<td width="15"></td>
						<td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">
							<img src="http://tessat.s3.amazonaws.com/moo02.jpg" />
						</td>
					</tr>
				</table><!-- content-3 -->
			</td>
		</tr><!-- content-3 -->
		<tr>
			<td>
				<table id="content-4" cellpadding="0" cellspacing="0" align="center">
					<tr>
						<td width="180" valign="top">
							<h5>Exciting New Products!</h5>
							<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.									Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>
						</td>
						<td width="15"></td>
						<td width="180" valign="top">
							<h5>A Newsletter Every Month</h5>
							<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
								deserunt mollit anim id est laborum.</p>
						</td>
						<td width="15"></td>
						<td width="180" valign="top">
							<h5>New and Improved Forum</h5>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
								sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						</td>
					</tr>
				</table><!-- content-4 -->
			</td>
		</tr><!-- content-4 -->
		<tr>
			<td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>
		</tr>
		<tr>
			<td>
				<table id="content-5" cellpadding="0" cellspacing="0" align="center">
					<tr>
						<td width="267" valign="top">
							<table cellpadding="5" cellspacing="0" bgcolor="d0d0d0"><tr><td>
								<img src="http://tessat.s3.amazonaws.com/card18.jpg" />
							</td></tr></table>
						</td>
						<td width="15"></td>
						<td width="278" valign="top">
							<h4>This is a heading</h4>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
						</td>
					</tr>
				</table><!-- content-5 -->
			</td>
		</tr><!-- content-5 -->
		<tr>
			<td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>
		</tr>
		<tr>
			<td>
				<table id="content-6" cellpadding="0" cellspacing="0" align="center">
					<p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
					<p align="center"><a href="#">CALL TO ACTION</a></p>
				</table>
			</td>
		</tr>

	</table><!-- main -->
	<table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">
		<tr>
			<td align="center">
				<p>You are receiving this email because you signed up for updates</p>
				<p><a href="#">Unsubscribe instantly</a> | <a href="#">Forward to a friend</a> | <a href="#">View in Browser</a></p>
			</td>
		</tr>
	</table><!-- top message -->
</td></tr></table><!-- wrapper -->

</body>
</html>

Inilah hasil akhir kami seperti jika kita menggunakan gambar nyata:

Tidak ada yang benar-benar istimewa, tetapi Anda harus mulai merancang email HTML Anda sendiri. Tentu saja ada cara lain untuk melakukan semua yang telah saya lakukan, tetapi dengan email HTML, yang paling penting adalah cara kerjanya. Tidak banyak konsep standar web atau praktik terbaik di sini.

Sumber Daya

Pembelian template Email di ThemeForest
Campaign Monitor Resources (Blog mereka juga memiliki beberapa kiat yang sangat berguna)
Sumberdaya MailChimp
6 Cara Mudah Meningkatkan Email HTML Anda
20 Desain Email terbaik dan sumber daya untuk pemula
30 HTML terbaik dan paktis bagi pemula

Saya harap Anda belajar sedikit hari ini! Saya tahu saya menemukan proyek email HTML pertama saya menjadi salah satu yang paling mendidik yang pernah saya kerjakan. Tampaknya adil untuk membagikan apa yang saya pelajari!