9 Trik Mendesain Newsletter HTML Sempurna

Newsletter e-mail adalah cara sempurna untuk tetap terhubung dengan klien atau pengikut Anda. Sering kali perusahaan atau situs web Anda akan memiliki banyak pembaruan produk, atau kemungkinan acara mendatang yang ingin Anda bagikan. Selalu mungkin untuk mengirim informasi baru ke blog atau aliran media sosial Anda, tetapi audiens Anda hanya dapat menjangkau Anda sejauh ini. Dalam hal ini, email tentu bukan teknologi mati, hanya potensi yang belum dimanfaatkan.

Proses membuat dan mengirim buletin jauh lebih mudah daripada yang diperkirakan, tetapi untuk mendesain templat khusus dan membuat kode sendiri - ini bisa memakan waktu lebih lama.

Kami telah menyusun beberapa kiat fantastis untuk membuat Anda merancang buletin HTML berkualitas tinggi yang belum pernah ada sebelumnya. Bahkan jika Anda seorang pemula dalam subjek ini, Anda pasti akan menemukan beberapa informasi berharga untuk membantu Anda memulai proses pemasaran email.

Tujuan Newsletter

Sebelum masuk ke aspek desain, kami harus menjelaskan tujuan Anda untuk membuat buletin. Bergantung pada jenis situs web yang Anda jalankan, informasi yang terkandung dalam buletin Anda mungkin berbeda secara dramatis dari yang lain, tetapi tujuan inti buletin adalah untuk memberikan pembaruan yang nyaman langsung ke Kotak Masuk pembaca Anda.

Pengguna internet berat cenderung memeriksa email mereka lebih dari dua kali sehari. Bahkan mereka yang selalu sibuk akan meluangkan waktu untuk membaca pesan mereka setidaknya sekali sehari. Ini adalah waktu yang tepat untuk menangkap perhatian bahkan tanpa memerlukan kunjungan ke situs Anda. Bahkan jika tidak ada yang mengklik tautan Anda, informasinya masih diterima, yang bagus untuk membangun nama merek.

Pertimbangkan beberapa topik yang perlu Anda tawarkan dalam desain Anda. Apakah Anda termasuk tautan untuk mendaftar ke layanan Anda; mungkin tautan blog, atau artikel yang paling baru diterbitkan di situs Anda? Tata letak buletin Anda akan mencerminkan bagaimana Anda ingin agar pembaca Anda merespons, tetapi pada akhirnya Anda ingin membangkitkan minat dan membagikan beberapa informasi menarik kepada massa..

1. Memanfaatkan Tabel di Layout Anda

Ini mungkin tampak agak kontradiktif dengan standar web modern saat ini, tetapi email masih kuno di mesin rendering mereka, sehingga Anda harus membangun ke arah model yang lebih tua. Sayangnya tabelnya cara termudah untuk membuat semuanya berfungsi dengan baik di antara berbagai klien e-mail. Tergantung pada pengetahuan Anda tentang membangun tata letak berbasis tabel, ini mungkin benar-benar berita baik!

Anda mungkin juga bertanya-tanya mengapa div dan elemen blok lainnya bukan ide yang bagus. Sebagian besar klien email dibangun untuk menghilangkan CSS yang tidak ada konten. Ini berarti Anda tidak akan dapat menggunakan banyak hal kecuali untuk CSS sebaris (Dan bahkan dukungan penuh jelek). Klien seperti Microsoft Outlook 2007 dan Google Gmail memiliki dukungan yang sangat buruk untuk elemen mengambang dan pemosisian langsung.

Solusi terbaik adalah dengan sarang beberapa tabel di dalam satu sama lain. Padding dan margin tidak diatur ke skala tertentu di antara banyak klien email. Ini adalah alasan untuk tetap menggunakan width = "value" pada semua elemen sel tabel Anda. Ini akan selalu menampilkan lebar yang sama tidak peduli klien email mana yang digunakan pembaca Anda, jadi itu banyak lebih aman dan lebih konsisten untuk mengatur padding dan margin menggunakan sel tabel kosong.

2. Penentuan Posisi Lebar-Tetap

Anda memiliki beberapa opsi saat membuat konsep tata letak buletin Anda, namun opsi terbaik untuk diikuti adalah untuk mengatur lebar tetap untuk tabel yang berisi Anda. Ada banyak resolusi monitor yang berbeda-beda - Anda tidak akan dapat menyenangkan semua orang. Jika Anda tidak memiliki elemen tertentu dengan lebar statis, Anda selalu dapat menggunakannya width = "100%" di meja Anda yang berisi. Ini akan memungkinkan konten Anda mengisi seluruh lebar semua klien email.

Namun, bagi banyak metode ini agak terlalu longgar. Nawala yang konstruktif akan membutuhkan lebar tetap dalam kebanyakan kasus, terutama jika Anda akan menggunakan spanduk dan gambar yang diatur ke ukuran tertentu. Saya sarankan bekerja dengannya 500px - Lebar dokumen maksimum 600px. Ukuran layar horizontal iPhone dan beberapa model BlackBerry terbatas pada 320px, sehingga bahkan pada 500px template email Anda akan diperkecil agar pas dengan benar.

Mengingat banyak pengguna ponsel memilih untuk melihat email tanpa HTML, ini seharusnya tidak menjadi masalah besar. Pengguna klien desktop dan webmail kemungkinan akan mengalami pengaturan serupa terlepas dari Sistem Operasi yang mereka gunakan. Saat ragu buat beberapa desain template dan pilih yang paling Anda sukai!

3. Pixel Unit

Kecuali jika Anda akan menggunakan elemen fluida dalam buletin Anda, Anda perlu mengukur beberapa hal. Cobalah untuk menyimpannya piksel (px) daripada di jenis unit lain. Persentase dapat dengan mudah tercampur dengan banyak klien webmail dan jendela perangkat lunak. Dengan lebih sedikit elemen halaman, tata letak cairan dapat keluar tanpa cedera, meskipun dengan beberapa bug.

Tetapi piksel selalu merupakan hal yang pasti. Bekerja dalam batas lebar maksimum 600px, Anda sebenarnya dapat memuat banyak konten di dalamnya. Eksposur lebih mudah jika Anda membagi tata letak menjadi dua atau tiga kolom, dan selalu menulis ukuran Anda dalam piksel. Satu-satunya pengecualian mungkin untuk ukuran font dimana ems dapat mendukung pembaca Anda dengan lebih baik, tetapi em ukuran akan berbeda dengan cara yang sama dengan persentase - jadi Demi kesederhanaan, tetap berpegang pada keberpihakan berbasis pixel.

4. Kemungkinan dengan CSS

Mungkin tampak seperti desain email keluar untuk menghancurkan penggunaan gaya CSS. Meskipun ada banyak fitur yang tidak didukung, CSS masih dapat diterima dalam banyak kasus. Monitor Kampanye memiliki tabel indah properti CSS yang didukung yang terdaftar oleh klien email. Semua akan mendukung dasar-dasar suka font-keluarga dan gaya tulisan, sehingga Anda dapat melewati beri tag jika Anda mau.

Berhati-hatilah dengan gaya font Anda agar tidak mendorong batas terlalu jauh. Jika Anda merasa tidak nyaman dengan gaya sebaris, selalu mungkin untuk menggunakan tag font HTML meskipun sudah usang. Jika Anda seorang desainer CSS, Anda tidak perlu keluar dari sistem, tetapi pengkodean CSS steno apa pun dapat menghasilkan desain buggy. Sebagai contoh font: 12px / 14px Arial, sans-serif; steno dapat membantu menghemat banyak ruang, tetapi tidak sepenuhnya diterima untuk desain email, bahkan ketika itu digunakan dengan gaya inline.

Bahkan pilihan warna Anda harus ditulis tangan. Warna hex seperti #ccc atau # e3f harus ditulis penuh sebagai #cccccc atau # ee33ff, masing-masing. Jika Anda dapat membangun apa yang Anda butuhkan tanpa CSS, saya akan merekomendasikan path itu, tetapi jangan sepenuhnya menghindar dari CSS dalam desain email karena bertentangan dengan kepercayaan populer itu didukung dalam banyak kasus.

5. Anchor Links Praktik Terbaik

Anda pasti ingin memasukkan beberapa tautan ke buletin Anda. Ini bisa berupa tautan keluar ke halaman lain di web, atau mungkin tautan yang mengarah ke halaman paling populer di situs web Anda. Selain itu sebagian besar footer akan berisi tautan berhenti berlangganan untuk pembaca Anda untuk memilih keluar dari proses email, tetapi bagaimana Anda harus menangani semua tautan ini dalam desain Anda?

Yah harus dicatat dulu bahwa klien email sangat rewel dengan desain mereka. Banyak yang akan memilih untuk menimpa gaya tautan Anda, bahkan dengan CSS sebaris. Trik yang rapi adalah dengan termasuk warna sebaris dan tag rentang tambahan dalam elemen jangkar. Jika warna dan gaya tautan Anda penting untuk keseluruhan desain, Anda harus mengambil tindakan pencegahan ekstra. Saya telah menambahkan contoh kode kecil di bawah ini:

beberapa teks tautan

Efek hover adalah tidak didukung di Outlook 2007/2010, Gmail, iOS atau Android. Anda mungkin masih ingin memasukkan a: melayang-layang gaya untuk semua klien pendukung: Outlook 2000/2003, Hotmail, Apple Mail, dan Yahoo! mail, tetapi secara pribadi saya tidak melihat banyak manfaat dalam pengalaman pengguna parsial, karena pemilih jangkar tidak sangat didukung saya sarankan hanya menawarkan 2-3 warna tautan untuk digunakan di seluruh desain Anda.

Sebagai anggapan pengguna juga akan mengharapkan tautan Anda terbuka di tab atau jendela baru. Idealnya target = "_ blank" atribut harus cukup untuk semua browser untuk mengenali fungsi ini, dan penyertaan atribut ini pada anchor link Anda seharusnya tidak berdampak negatif pada perangkat lunak email seperti Lotus Notes, atau Outlook..

6. Tes di Semua Klien Utama

Sebuah studi terbaru tentang klien email paling populer (dilakukan oleh Campaign Monitor) menunjukkan sepuluh klien email paling populer dalam satu tahun terakhir. Ini mungkin terlihat agak membosankan tetapi desainer harus membiasakan diri memeriksa buletin mereka di semua klien email utama, paling tidak pada beberapa klien yang lebih umum seperti Gmail, Hotmail atau Yahoo! Surat.

Ini tidak termasuk webmail semata-mata, tetapi juga mengoperasikan perangkat lunak pada Mac OS X dan Windows. Juga menurut diagram mereka iOS Mail dan Android keduanya meroket ke daftar 10 besar selama beberapa tahun terakhir. Faktanya iPhone, iPod Touch, dan iPad Mail berada di peringkat # 2 paling populer tepat di bawah Outlook! Sayangnya tidak ada cara untuk menguji ini tanpa memiliki salah satu perangkat - jadi Anda harus puas dengan opsi lain.

Satu bug dengan dukungan seluler hadir di banyak model iPhone dan Android. Render e-mail seluler akan sering mengubah ukuran teks di dalam template Anda. Ini mungkin tidak terlalu memengaruhi desain Anda, tetapi dapat mengganggu sebagian pembaca. Menggunakan CSS -webkit-text-size-adjust: tidak ada;, akan memastikan ukuran teks standar bahkan di seluruh semua mesin parsing tanpa perlu mengujinya.

Jika Anda tahu ada teman atau kolega yang menggunakan perangkat lunak alternatif, Anda mungkin ingin minta bantuan mereka untuk menguji buletin. Anda juga bisa kirimkan salinan email kepada mereka untuk memeriksa perangkat mereka atau pinjam perangkat untuk secara aktif menghapus bug pengkodean. Untungnya Outlook memang menawarkan versi pemasangan Mac sehingga Anda tidak perlu melacak pengguna Windows untuk optimisasi tersebut, tetapi ketika menyangkut Lotus Notes atau Windows Mail, Anda mungkin kurang beruntung.

Alternatifnya adalah membayar solusinya seperti Preview my E-mail, sayangnya mereka tidak menyediakan akun demo gratis, tetapi layanan mereka terkenal karena menawarkan preview hebat dari desain Anda. E-mail on Acid adalah layanan serupa yang menawarkan akun gratis tetapi tidak membiarkan Anda menguji semua klien, yang jenisnya mengalahkan tujuannya. Layanan render online harus bermanfaat jika Anda perlu menguji banyak templat buletin dalam jangka panjang tanpa menggunakan komputer pengganti, namun itu tidak mendasar, jadi jangan stres jika Anda tidak dapat menguji semuanya!

7. Selalu Menawarkan Tampilan Berbasis Web

Pembaca tidak akan selalu dapat (atau mau) melihat email Anda secara asli. Menawarkan versi lain di suatu tempat di Web akan memberikan rasa kemudahan dan kompatibilitas. Proses ini tidak dapat sepenuhnya otomatis kecuali Anda ingin memasukkan a teks biasa versi.

Dengan cara ini, Anda akan melakukannya lepaskan semua tag HTML dari tata letak buletin. Anda tidak akan bisa memasukkan tautan atau gaya untuk apa pun. Semua konten akan dengan mudah ditata sebagai file teks biasa untuk pembaca tanpa kemampuan render. Ini tentu saja merupakan alternatif yang baik, tetapi ketika Anda menawarkan versi Web lengkap dari buletin yang sama itu menghapus kerusakan yang dilakukan oleh bug rendering apa pun. Sebagian besar pembaca akan menjalankan peramban web terbaru yang dapat Anda tata dan buat buletin Anda dengan sempurna.

Bagaimana Anda mengatur halaman sepenuhnya pilihan Anda. Beberapa situs web akan melakukannya mendedikasikan seluruh posting blog untuk menduplikasi konten email, mungkin dengan beberapa informasi tambahan. Yang lain akan buat halaman terpisah dari situs web utama tanpa tautan langsung dalam navigasi. Metode ini dapat bermanfaat karena pembaca tidak akan terganggu oleh templat situs web utama Anda atau konten bilah sisi.

8. Menambahkan Konten Gambar

Gambar adalah alasan lain untuk menawarkan pembaca Anda solusi berbasis web. Secara default, klien email diatur untuk menghapus gambar dari konten. Jika alamat Anda ditambahkan ke daftar aman, semua gambar akan ditampilkan secara default, tetapi pengguna harus menerima pengaturan ini jadi tentu saja itu bukan jaminan. Hanya pastikan gambar tidak diperlukan sebagai bagian dari konten utama, tetapi dimasukkan sebagai topping ekstra untuk estetika halaman.

Setelah Anda mengekspor gambar, ada beberapa tip untuk membuat gambar khusus untuk surel. Anda pasti ingin selalu atur atribut lebar dan tinggi pada img tag. Tanpa spesifikasi ini secara berurutan, beberapa klien akan merusak konten gambar. Sebuah alt Tag juga akan terbukti bermanfaat, sehingga pengunjung akan tahu apa isi konten gambar sebelum dimuat.

Seperti disebutkan sebelumnya, memposisikan gambar dalam email Anda bisa menjadi rumit. Hindari menggunakan pelampung bagaimanapun caranya! Foto align = "left" atribut akan bekerja lebih baik, atau sebagai alternatif memetakan sel tabel yang tepat agar sesuai dengan gambar Anda di bagian atas, kiri, atau kanan buletin Anda. Anda tidak akan bisa mendapatkan pasangan yang sempurna dengan begitu banyak klien di luar sana (terutama klien seluler), tetapi optimalkan gambar Anda dan pertahankan ukuran file kecil untuk hasil terbaik.

Sedangkan untuk penyimpanan gambar, Anda disarankan simpan semua file di server Web Anda sendiri. Ini adalah pilihan yang lebih baik daripada menggunakan host gambar lain, atau dengan mengunggah file ke layanan buletin online. Selain itu kamu harus pisahkan konten untuk buletin Anda dari sisa gambar Anda dalam struktur folder seperti itu / img / email atau / img / email / 2011.

9. Hindari Folder Spam!

Ini bisa sulit didengar, tetapi tidak semua klien email ramah terhadap buletin. Ada miliaran email yang dikirim setiap hari dan sebagian besar mengandung spam atau konten jahat, sehingga tindakan keamanan ini dimasukkan ke dalam Kotak Masuk jelas untuk tindakan pencegahan keamanan..

Namun ketika datang ke pemasaran Internet, Anda dapat dengan mudah berkecil hati untuk melihat buletin terbaru Anda berakhir dengan sampah. Untuk mengurangi kemungkinan ini terjadi, Anda harus bersihkan desain Anda untuk kesederhanaan. Jangan membuat gambar yang mengganggu atau meledakkan teks judul Anda dengan ratusan kata kunci.

Coba juga jaga konten Anda tetap singkat dan sesuai topik. Anda tidak perlu memasukkan konten lengkap untuk semua artikel atau halaman Anda. Coba tambahkan satu atau dua kalimat dengan tautan alternatif ke situs web Anda sebagai pengganti daftar panjang. Itu semakin singkat tampilan email Anda, semakin besar kemungkinan akan lulus inspeksi spam.

Galeri Desain Nawala

Akan menyenangkan apa artikel buletin e-mail tanpa beberapa contoh fantastis? Ada banyak desain dan templat buletin email untuk dicoba di Google. Galeri Email HTML adalah sumber inspirasi yang sangat populer.

Di bawah ini saya telah menyertakan tangkapan layar dari banyak nawala di galeri Monitor Kampanye. Semoga tata letak yang luar biasa ini dapat memberi Anda beberapa ide hebat untuk desain Anda sendiri.

Bersenang-senang merancang buletin ideal Anda!

Waspada untuk Bisnis