9 Trik untuk Merancang Surat Berita HTML Perfect

Surat berita e-mel adalah cara sempurna untuk terus berhubung dengan pelanggan atau pengikut anda. Sering kali syarikat atau tapak web anda akan mempunyai banyak kemas kini produk, atau acara yang mungkin akan dikongsikan yang anda ingin kongsi. Ia sentiasa mungkin untuk menyiarkan maklumat baru ke blog atau aliran media sosial, tetapi penonton anda hanya boleh pergi sejauh ini untuk menghubungi anda. Dalam kes ini, e-mel pastinya bukan teknologi mati, hanya potensi yang belum diterokai.

Proses membuat dan menghantar surat berita jauh lebih mudah daripada yang mungkin dipikirkan, tetapi untuk merancang templat tersuai dan membina kod anda sendiri - ini boleh mengambil sedikit masa lagi.

Kami telah mengumpulkan beberapa tip hebat untuk membuat anda merancang buletin HTML berkualiti tinggi seperti tidak pernah sebelum ini. Walaupun anda seorang pemula untuk subjek, anda pasti akan dapati beberapa maklumat yang tidak ternilai untuk anda bermula dalam proses pemasaran e-mel.

Matlamat Surat Berita

Sebelum masuk ke aspek reka bentuk, kita harus memperjelaskan tujuan anda untuk membina surat berita. Bergantung pada jenis laman web yang anda jalankan, maklumat yang terkandung dalam surat berita anda mungkin berbeza secara dramatik daripada orang lain, tetapi tujuan utama surat berita adalah untuk menyampaikan kemas kini mudah ke Peti Masuk pembaca anda.

Pengguna internet berat mungkin akan menyemak e-mel mereka lebih daripada dua kali sehari. Malah mereka yang sentiasa sibuk akan meluangkan masa untuk melalui mesej mereka sekurang-kurangnya sekali sehari. Ini adalah masa yang tepat untuk menangkap perhatian walaupun tanpa memerlukan lawatan ke laman web anda. Walaupun tiada siapa yang mengklik pautan anda, maklumat itu masih diterima, yang bagus untuk membina jenama.

Pertimbangkan beberapa topik yang perlu anda tawarkan dalam reka bentuk anda. Adakah anda termasuk pautan untuk mendaftar untuk perkhidmatan anda; mungkin link blog, atau artikel terbaru yang diterbitkan di laman web anda? Susun atur surat berita anda akan mencerminkan bagaimana anda ingin pembaca anda bertindak balas, tetapi akhirnya anda mencari untuk menaikkan minat dan menyampaikan beberapa maklumat menarik kepada orang ramai.

1. Gunakan Tables dalam Layouts anda

Ini mungkin agak kontradiktif terhadap piawaian web moden hari ini, tetapi e-mel masih lama dalam enjin rendering mereka, oleh itu anda perlu membina ke arah model yang lebih tua. Malangnya jadual adalah cara yang paling mudah untuk mendapatkan semuanya berjalan dengan baik di kalangan pelbagai pelanggan e-mel. Bergantung kepada pengetahuan anda tentang membuat susun atur berasaskan jadual, ini mungkin sebenarnya sebagai berita baik!

Anda juga mungkin hairan mengapa div dan unsur-unsur blok lain tidak begitu baik. Kebanyakan pelanggan e-mel adalah dibina untuk melepaskan sebarang CSS luaran kandungan. Ini bermakna anda tidak dapat menggunakan banyak perkara kecuali untuk CSS dalam baris (dan walaupun sokongan penuh tidak baik). Pelanggan seperti Microsoft Outlook 2007 dan Google Gmail mempunyai sokongan yang sangat lemah untuk elemen terapung dan kedudukan langsung.

Penyelesaian terbaik ialah sarang pelbagai jadual di dalam satu sama lain. Padding dan margin tidak ditetapkan pada skala tertentu di antara banyak pelanggan e-mel. Ini adalah sebab untuk terus menggunakan width = "value" pada semua elemen sel meja anda. Ini akan sentiasa memaparkan lebar sama tidak kira pelanggan e-mel pembaca anda gunakan, jadi banyak lebih selamat dan lebih konsisten untuk menetapkan padding dan margin menggunakan sel jadual kosong.

2. Kedudukan Lebar Tetap

Anda mempunyai beberapa pilihan apabila membina draf susun atur berita anda, namun pilihan terbaik untuk diikuti adalah untuk menetapkan lebar tetap untuk jadual yang mengandungi anda. Terdapat banyak resolusi monitor berbeza - anda tidak akan dapat menyenangkan semua orang. Sekiranya anda tidak mempunyai elemen tertentu dengan lebar statik, anda sentiasa boleh menggunakannya lebar = "100%" pada jadual yang mengandungi anda. Ini akan membolehkan kandungan anda mengisi keseluruhan lebar semua pelanggan e-mel.

Walau bagaimanapun, bagi kebanyakan kaedah ini sedikit terlalu lemah. Surat berita yang membina akan memerlukan lebar tetap dalam kebanyakan kes, terutamanya jika anda akan menggunakan sepanduk dan imej yang ditetapkan pada saiz tertentu. Saya cadangkan bekerjasama 500px - lebar dokumen maksimum 600px. Saiz skrin mendatar iPhone dan sesetengah model BlackBerry adalah terhad kepada 320px, jadi walaupun di 500px templat e-mel anda akan diperkecil supaya sesuai dengan betul.

Memandangkan ramai pengguna mudah alih memilih untuk melihat e-mel tanpa sebarang HTML, ini tidak sepatutnya menjadi masalah besar. Pengguna klien desktop dan webmail mungkin mengalami persediaan serupa tanpa mengira Sistem Operasi yang mereka gunakan. Apabila ragu-ragu buat beberapa reka bentuk templat dan pilih yang paling anda suka!

3. Unit Piksel

Kecuali anda akan menggunakan unsur-unsur cecair dalam newsletter anda, kemungkinan anda perlu mengukur beberapa perkara. Cuba simpannya piksel (px) bukannya dalam jenis unit lain. Peratusan dengan mudah boleh dicampur dengan banyak klien webmail dan tetingkap perisian. Dengan elemen halaman yang lebih sedikit, susun atur cecair boleh keluar tanpa cedera, walaupun dengan beberapa bug.

Tetapi piksel sentiasa menjadi perkara yang pasti. Bekerja dalam had lebar maksimum 600px, anda sebenarnya boleh memuat banyak kandungan di dalamnya. Pendedahan adalah lebih mudah jika anda memecah susun atur anda menjadi dua atau tiga lajur, dan sentiasa menulis saiz anda dalam piksel. Satu-satunya pengecualian mungkin adalah saiz fon di mana ems boleh menyokong pembaca anda dengan lebih baik, tetapi em saiz akan berbeza dengan cara yang sama peratusan akan - jadi demi kesederhanaan, berpegang kepada penjajaran berasaskan pixel.

4. Kemungkinan dengan CSS

Ia mungkin kelihatan seperti reka bentuk e-mel keluar untuk memusnahkan penggunaan gaya CSS. Walaupun terdapat banyak ciri yang tidak disokong, CSS masih dapat diterima dengan sempurna dalam banyak kes. Monitor Kempen mempunyai jadual CSS yang indah yang disokong oleh pelanggan e-mel. Semua akan menyokong asas-asas seperti keluarga font dan gaya fon, jadi anda boleh melangkaui tanda jika anda mahu.

Berhati-hati dengan gaya fon anda untuk tidak menolak sempadan terlalu jauh. Sekiranya anda merasa tidak selesa dengan gaya inline, ia sentiasa mungkin menggunakan tag font HTML walaupun sudah tidak digunakan lagi. Sekiranya anda seorang pereka CSS, anda tidak perlu keluar dari sistem, tetapi sebarang pengekodan kod CSS mungkin menyebabkan reka bentuk kereta. Sebagai contoh, fon: 12px / 14px Arial, sans-serif; singkatan dapat membantu menjimatkan banyak ruang, tetapi ia tidak diterima sepenuhnya untuk reka bentuk e-mel, walaupun ia digunakan dengan gaya inline.

Malah pilihan warna anda perlu ditulis secara manual. Warna heks seperti #ccc atau # e3f mesti ditulis sepenuhnya #cccccc atau # ee33ff, masing-masing. Jika anda boleh membina apa yang anda perlukan tanpa CSS saya akan mengesyorkan laluan itu, tetapi tidak sepenuhnya menghilangkan diri dari CSS dalam reka bentuk e-mel kerana bertentangan dengan kepercayaan popular ia disokong dalam kebanyakan kes.

5. Latihan Anchor Best Practices

Anda pastinya ingin memasukkan beberapa pautan ke dalam newsletter anda. Ini boleh menjadi pautan keluar ke halaman lain di sekitar web, atau mungkin pautan yang membawa kepada halaman paling popular di laman web anda. Di samping itu, kebanyakan pelayar akan mengandungi pautan berhenti melanggan untuk pembaca anda untuk memilih keluar dari proses e-mel, tetapi bagaimana anda mengendalikan semua pautan dalam reka bentuk anda?

Baik ia harus diperhatikan terlebih dahulu bahawa pelanggan e-mel sangat cerdik dengan reka bentuk mereka. Ramai akan memilih untuk menimpa gaya pautan anda, walaupun dengan CSS sebaris. Trik yang baik adalah untuk termasuk kedua-dua warna sebaris dan tag span tambahan dalam elemen utama. Sekiranya warna dan gaya pautan anda penting kepada reka bentuk keseluruhan, anda perlu mengambil langkah berjaga-jaga tambahan. Saya telah menambah contoh kod kecil di bawah:

beberapa teks pautan

Hover effect adalah tidak disokong dalam Outlook 2007/2010, Gmail, iOS atau Android. Anda mungkin masih mahu menyertakannya a: berlegar gaya untuk semua pelanggan sokongan: Outlook 2000/2003, Hotmail, Apple Mail, dan Yahoo! mel tetapi secara peribadi saya tidak nampak banyak manfaat dalam pengalaman pengguna separa, kerana pemilih utama tidak banyak disokong saya cadangkan hanya menawarkan 2-3 warna pautan untuk digunakan sepanjang reka bentuk anda.

Sebagai pengguna anggapan juga akan mengharapkan pautan anda dibuka dalam tab atau tetingkap baru. Secara idealnya target = "_ blank" atribut harus cukup untuk semua penyemak imbas untuk mengenali fungsi ini, dan kemasukan atribut ini pada pautan jangkar anda tidak boleh memberi kesan negatif terhadap perisian e-mel seperti Lotus Notes, atau Outlook sama ada.

6. Uji di Semua Pelanggan Utama

Kajian baru-baru ini mengenai klien e-mel yang paling popular (dilakukan oleh Monitor Kempen) menunjukkan sepuluh pelanggan e-mel yang paling popular pada tahun lalu. Ia mungkin kelihatan agak membosankan tetapi pereka harus masuk ke dalam kebiasaan memeriksa surat berita mereka pada semua pelanggan e-mel utama, sekurang-kurangnya pada beberapa pelanggan yang lebih umum seperti Gmail, Hotmail atau Yahoo! Mel.

Ini tidak termasuk webmail semata-mata, tetapi juga perisian pengendalian pada kedua-dua Mac OS X dan Windows. Juga mengikut rajah mereka Mail iOS dan Android mempunyai kedua-dua roket ke dalam senarai 10 teratas sejak beberapa tahun yang lalu. Sebenarnya iPhone, iPod Touch, dan Mail Mail meletakkan kedudukan # 2 paling popular di bawah Outlook! Malangnya, tidak ada cara untuk menguji ini tanpa memiliki salah satu peranti - jadi anda perlu menyelesaikan pilihan lain.

Satu pepijat dengan sokongan mudah alih datang dalam banyak model iPhone dan Android. Rendering e-mel mudah alih akan sering ubah saiz teks di dalam templat anda. Ini mungkin tidak menjejaskan reka bentuk anda, tetapi ia boleh mengganggu sesetengah pembaca. Menggunakan CSS -webkit-text-size-adjust: none;, akan pastikan juga saiz teks lalai dalam semua enjin parsing tanpa perlu mengujinya.

Jika anda tahu mana-mana rakan atau rakan sekerja yang menggunakan perisian alternatif, anda mungkin ingin minta bantuan mereka untuk menguji surat berita itu. Anda boleh sama ada hantar mereka salinan e-mel untuk memeriksa peranti mereka atau meminjam peranti itu untuk secara aktif membersihkan bug pengekodan. Nasib baik Outlook menawarkan versi pemasangan Mac supaya anda tidak perlu menjejaki pengguna Windows untuk pengoptimuman itu, tetapi ketika datang ke Lotus Notes atau Windows Mail, anda mungkin tidak beruntung.

Alternatifnya ialah membayar penyelesaian seperti Pratonton E-mel saya, malangnya mereka tidak menyediakan sebarang akaun demo percuma, tetapi perkhidmatan mereka terkenal dengan menawarkan pratonton hebat reka bentuk anda. E-mel pada Acid adalah perkhidmatan yang sama yang menawarkan akaun percuma tetapi tidak membiarkan anda menguji semua pelanggan, yang mana mengalahkan tujuannya. Perkhidmatan rendering dalam talian perlu berguna jika anda perlu menguji banyak templat surat berita dalam jangka masa panjang tanpa menggunakan komputer ganti, namun ia tidak asas, jadi jangan tekankan jika anda tidak boleh menguji mereka semua!

7. Sentiasa menawarkan Views Berasaskan Web

Pembaca tidak akan sentiasa dapat (atau bersedia) untuk melihat e-mel anda secara asli. Menawarkan versi lain di suatu tempat di Web akan memberikan rasa selesa dan keserasian. Proses ini tidak dapat diautomatikasikan sepenuhnya melainkan jika anda ingin memasukkan teks kosong versi.

Dengan cara ini, anda akan strip semua tag HTML dari susun atur berita. Anda tidak akan dapat memasukkan pautan atau gaya untuk apa-apa. Semua kandungan semata-mata dibentangkan sebagai fail teks biasa untuk pembaca tanpa keupayaan rendering. Ini sememangnya alternatif yang baik, tetapi apabila anda menawarkan versi Web penuh surat berita yang sama itu menghapuskan kerosakan yang dilakukan oleh mana-mana bug rendering. Kebanyakan pembaca akan menjalankan penyemak imbas Web terkini yang boleh anda gaya dan membina surat berita anda dan untuk kesempurnaan.

Bagaimana anda membuat halaman itu sepenuhnya pilihan anda. Sesetengah laman web akan mendedikasikan keseluruhan catatan blog untuk menduplikasi kandungan e-mel, mungkin dengan beberapa maklumat tambahan. Lain-lain akan buat laman berasingan dari laman web utama tanpa sebarang pautan langsung dalam navigasi. Kaedah ini boleh memberi manfaat kerana pembaca tidak akan terganggu oleh templat tapak utama anda atau kandungan sidebar.

8. Menambah Kandungan Imej

Imej adalah sebab lain untuk menawarkan pembaca anda penyelesaian berasaskan web. Secara lalai, pelanggan e-mel ditetapkan untuk menyekat imej daripada kandungan. Jika alamat anda ditambah ke senarai selamat, semua imej akan dipaparkan secara lalai, tetapi pengguna mesti menerima persediaan ini jadi ia pasti bukan jaminan. Hanya pastikan imej tidak diperlukan sebagai sebahagian daripada kandungan utama, tetapi dimasukkan sebagai topping tambahan untuk estetika halaman.

Sebaik sahaja anda mengeksport grafik terdapat beberapa tip untuk membina imej khusus untuk e-mel. Anda akan sentiasa mahu tetapkan atribut lebar dan ketinggian pada anda img tag. Tanpa spesifikasi ini teratur, sesetengah pelanggan akan mengganggu kandungan imej. An alt tag juga akan terbukti berguna, jadi pelawat akan tahu kandungan kandungan gambar sebelum dimuatkan.

Seperti yang dinyatakan sebelum ini, kedudukan imej dalam e-mel anda boleh menjadi rumit. Elakkan menggunakan terapung di semua kos! Gambar itu align = "left" atribut akan berfungsi dengan lebih baik, atau secara alternatif memetakan sel jadual tepat untuk menyesuaikan imej anda di sepanjang bahagian atas, kiri, atau sebelah kanan newsletter anda. Anda tidak boleh mendapatkan perlawanan yang sempurna dengan begitu banyak pelanggan di luar sana (terutama pelanggan mudah alih), tetapi mengoptimumkan imej anda dan simpan saiz fail kecil untuk hasil terbaik.

Bagi penyimpanan imej, disyorkan bahawa anda menyimpan semua fail dalam pelayan Web anda sendiri. Ini adalah pilihan yang lebih baik daripada menggunakan hos gambar yang lain, atau dengan memuat naik fail ke perkhidmatan newsletter dalam talian. Tambahan pula anda harus memisahkan kandungan untuk surat berita anda dari semua imej anda dalam struktur folder seperti itu / img / e-mel atau / img / e-mel / 2011.

9. Elakkan Folder Spam!

Ini sukar untuk didengar, tetapi tidak semua pelanggan e-mel mesra terhadap surat berita. Terdapat berbilion-bilion e-mel dihantar setiap hari dan majoriti mengandungi spam atau kandungan berniat jahat, dengan itu langkah-langkah keselamatan yang dibina ke dalam Peti Masuk adalah jelas untuk langkah berjaga-jaga keselamatan.

Walau bagaimanapun, apabila pemasaran Internet, anda tidak boleh digalakkan untuk melihat berita terkini anda dengan sampah. Untuk mengurangkan kemungkinan berlaku ini, anda sepatutnya membersihkan reka bentuk anda untuk kesederhanaan. Jangan buat imej yang menjengkelkan atau meletupkan teks judul anda dengan beratus-ratus kata kunci.

Juga cuba simpan kandungan ringkas dan topik anda. Anda tidak perlu menyertakan kandungan penuh untuk semua artikel atau halaman anda. Cuba tambah ayat atau dua dengan pautan alternatif ke laman web anda sebagai pengganti senarai panjang. The lebih ringkas melihat e-mel anda, kemungkinan besar ia akan menyampaikan pemeriksaan spam.

Galeri Reka Bentuk Newsletter

Apa yang menyeronokkan akan artikel surat berita e-mel tanpa beberapa contoh hebat? Terdapat banyak reka bentuk surat berita e-mel dan templat untuk menyemak di Google. Galeri E-mel HTML adalah sumber inspirasi yang sangat popular.

Di bawah ini saya telah memasukkan screenshot dari banyak surat berita dalam galeri Kempen Kempen. Mudah-mudahan susunan hebat ini dapat memberikan anda beberapa idea hebat untuk desain anda sendiri.

Bersenang-senang merancang surat berita ideal anda!

Alert untuk Perniagaan