Pemasaran E-mel & AutomasiVideo Pemasaran & Jualan

Memahami Cabaran (Dan Kekecewaan) Reka Bentuk E-mel HTML

Jika anda membuka sistem pengurusan kandungan untuk membina halaman web, ia adalah proses yang agak mudah. Sokongan pelayar web moden HTML, CSS, dan JavaScript mengikut piawaian web yang ketat. Dan mereka hanyalah segelintir pelayar yang perlu dibimbangkan oleh pereka. Terdapat pengecualian, sudah tentu… dan beberapa penyelesaian mudah atau fungsi khusus untuk penyemak imbas tersebut.

Oleh kerana standard keseluruhan, adalah mudah untuk membangunkan pembina halaman dalam sistem pengurusan kandungan. Penyemak imbas mematuhi HTML5, CSS dan JavaScript… dan pembangun boleh membina penyelesaian yang sangat mantap untuk mencipta halaman web yang responsif kepada peranti dan konsisten merentas penyemak imbas. Dua dekad yang lalu, hampir setiap pereka web menggunakan perisian desktop untuk membangunkan halaman web. Kini, agak jarang bagi pereka web membangunkan halaman web – lebih kerap daripada tidak, mereka membangunkan templat dan menggunakan editor dalam sistem kandungan untuk mengisi kandungan. Editor laman web adalah hebat.

Tetapi penyunting e-mel ketinggalan. Inilah sebabnya…

Merekabentuk E-mel HTML Jauh Lebih Kompleks Daripada Laman Web

Jika syarikat anda mahukan e-mel HTML yang cantik direka bentuk, prosesnya secara eksponen lebih kompleks daripada membina halaman web atas beberapa sebab:

  • Tiada Piawaian – TIADA pematuhan ketat kepada standard web oleh pelanggan e-mel yang memaparkan e-mel HTML. Hampir setiap klien e-mel dan setiap versi setiap klien e-mel bertindak secara berbeza. Sesetengah akan menghormati CSS, fon luaran dan HTML moden. Yang lain menghormati beberapa penggayaan sebaris, hanya memaparkan koleksi fon dan mengabaikan segala-galanya kecuali struktur dipacu jadual. Ia agak tidak masuk akal bahawa tiada siapa yang bekerja dalam isu ini. Akibatnya, mereka bentuk templat yang merentasi pelanggan dan peranti secara konsisten telah menjadi perniagaan yang besar dan boleh menjadi agak mahal.
  • Keselamatan Pelanggan E-mel – Baru-baru ini, Apple Mail mengemas kini untuk menyekat semua imej dalam e-mel HTML secara lalai yang tidak dibenamkan dalam e-mel. Anda sama ada memberi kebenaran untuk memuatkan mereka e-mel pada satu masa atau perlu mendayakan tetapan untuk melumpuhkan tetapan ini. Bersama-sama dengan tetapan keselamatan klien e-mel, terdapat juga tetapan korporat.
  • Keselamatan IT – Pasukan IT anda mungkin menggunakan set peraturan yang ketat tentang objek yang sebenarnya boleh dipaparkan dalam e-mel. Jika imej anda, contohnya, datang daripada domain tertentu yang tidak disenarai putih dalam tembok api korporat, imej tidak akan dipaparkan dalam e-mel anda. Ada kalanya, kami terpaksa membangunkan e-mel dan mengehoskan semua imej pada pelayan perbadanan supaya pekerja mereka sendiri dapat melihat imej tersebut.
  • Penyedia Perkhidmatan E-mel – Untuk memburukkan lagi keadaan, pembina e-mel yang menyediakan perkhidmatan e-mel (ESPs) sebenarnya memperkenalkan masalah dan bukannya mengekang mereka. Walaupun mereka mempromosikan editor mereka ialah What You See Is What You Get (WYSIWYG), perkara sebaliknya selalu berlaku dengan reka bentuk e-mel. Anda akan pratonton e-mel dalam platform mereka, dan penerima akan melihat semua masalah reka bentuk. Syarikat selalunya secara tidak sedar memilih editor yang kaya dengan ciri dan bukannya editor yang dikunci, memikirkan bahawa seseorang mempunyai lebih banyak ciri. Perkara sebaliknya adalah benar… jika anda mahukan e-mel yang dipaparkan secara konsisten merentas semua klien e-mel, lebih mudah, lebih baik, kerana kurang boleh menjadi salah.
  • Rendering Pelanggan E-mel – Beratus-ratus pelanggan e-mel memaparkan HTML secara berbeza merentas desktop, apl, peranti mudah alih dan klien mel web. Walaupun editor teks bagus anda pada pembekal perkhidmatan e-mel anda mungkin mempunyai tetapan untuk meletakkan tajuk dalam e-mel anda, padding, jidar, ketinggian baris dan saiz fon mungkin berbeza untuk setiap klien e-mel. Akibatnya, anda perlu merendahkan HTML dan mengodkan setiap elemen secara berbeza (lihat contoh di bawah) – dan selalunya menulis dalam pengecualian yang khusus untuk pelanggan e-mel – untuk mendapatkan e-mel untuk dipaparkan secara konsisten. Tiada jenis blok mudah, anda perlu melakukan susun atur dipacu jadual yang setara dengan membina untuk web tiga puluh tahun yang lalu. Itulah sebabnya mana-mana reka letak baharu memerlukan kedua-dua pembangunan dan pelanggan e-mel silang dan ujian peranti. Perkara yang anda lihat dalam peti masuk anda mungkin berbeza sama sekali dengan apa yang saya lihat dalam peti masuk saya. Itulah sebabnya alat rendering seperti E-mel Mengenai Asid or Litmus adalah satu kemestian untuk memastikan reka bentuk baharu anda berfungsi merentasi semua pelanggan e-mel. Berikut ialah senarai pendek pelanggan e-mel popular dan enjin pemaparan mereka:
    • Apple Mail, Outlook untuk Mac, Android Mail dan penggunaan Mel iOS WebKit.
    • Penggunaan Outlook 2000, 2002 dan 2003 Internet Explorer.
    • Penggunaan Outlook 2007, 2010 dan 2013 Microsoft word (ya, Firman!).
    • Pelanggan mel web menggunakan enjin penyemak imbas mereka masing-masing (contohnya, Safari menggunakan WebKit dan Chrome menggunakan Blink).

Contoh HTML untuk Web Vs. E-mel

Jika anda mahukan contoh yang menggambarkan kerumitan reka bentuk dalam e-mel berbanding web, berikut ialah contoh sempurna daripada artikel Mailbakery 19 Perbezaan Besar Antara E-mel dan HTML Web:

E-mel HTML

Kita mesti membina satu siri jadual yang menggabungkan semua penggayaan sebaris yang diperlukan untuk meletakkan butang dengan betul dan memastikan ia kelihatan baik di seluruh pelanggan e-mel. Teg gaya yang disertakan juga akan berada di bahagian atas e-mel ini untuk menggabungkan kelas.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left">
         <table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
            <tr>
               <td class="text-button"  style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
                  <a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

HTML web

Kita boleh menggunakan helaian gaya luaran dengan kelas untuk menentukan sarung, penjajaran, warna dan saiz teg sauh yang muncul sebagai butang.

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

Cara Mengelakkan Isu Reka Bentuk E-mel

Isu reka bentuk e-mel boleh dielakkan dengan mengikuti proses yang baik:

  1. Ujian Templat – Memahami klien e-mel yang pelanggan anda gunakan dan memastikan bahawa e-mel HTML anda diuji sepenuhnya merentas mudah alih dan desktop adalah penting sebelum menggunakan sebarang templat. Kami boleh mereka bentuk e-mel secara literal daripada reka letak Photoshop... tetapi menghiris dan memotongnya menjadi klien e-mel silang dipacu jadual adalah penting untuk menggunakan reka bentuk e-mel yang optimum dan konsisten.
  2. Ujian Dalaman – Setelah templat anda direka bentuk dan diuji, ia harus dihantar ke senarai benih dalaman dalam organisasi untuk disemak dan diluluskan. Anda mungkin mahu bermula dengan subset individu yang sangat terhad untuk memastikan tidak terdapat tembok api atau isu keselamatan yang berkaitan dengan penyampaian e-mel secara dalaman. Jika ini sedang membina contoh pada penyedia perkhidmatan e-mel baharu, anda mungkin menemui beberapa isu penapisan atau penyekatan yang dikaitkan dengan penghantaran e-mel anda ke peti masuk.
  3. Versi Templat – Jangan ubah reka letak atau reka bentuk anda tanpa mengusahakan versi baharu templat anda yang boleh direka bentuk, diuji dengan betul dan digunakan. Banyak perniagaan menyukai reka bentuk sekali sahaja untuk setiap kempen… tetapi itu memerlukan setiap e-mel direka bentuk, dibangunkan dan digunakan untuk setiap kempen. Ini menambah banyak masa kepada proses pemasaran e-mel dalaman. Dan, anda berisiko tidak memahami elemen dalam e-mel anda yang berprestasi baik berbanding elemen yang tidak. Ketekalan bukan sahaja cara untuk memudahkan proses, ia juga penting untuk tingkah laku pelanggan anda.
  4. Pengecualian Pembekal Perkhidmatan E-mel – Hampir setiap pembekal perkhidmatan e-mel mempunyai cara untuk menyelesaikan isu yang diperkenalkan oleh pembina e-mel mereka. Kami selalunya boleh menambah CSS mentah pada akaun – atau malah mempunyai blok kandungan yang perlu disertakan dalam setiap e-mel – agar syarikat itu menggunakan editor e-mel terbina dalam dan tidak mematahkan reka bentuk e-mel anda. Sudah tentu, ini mungkin memerlukan beberapa latihan dan kawalan proses untuk menggunakan langkah tersebut bagi memastikan langkah tersebut dipatuhi. Atau – anda mungkin hanya mahu membangunkan reka bentuk e-mel anda dalam penyelesaian yang terbukti berkesan merentas pelanggan dan peranti, kemudian tampalkannya semula ke dalam pembekal perkhidmatan e-mel anda.

Platform Reka Bentuk E-mel

Disebabkan platform perkhidmatan e-mel telah melakukan kerja yang lemah dalam membina dan mengekalkan pembina silang pelanggan dan peranti merentas secara konsisten, beberapa platform hebat telah hadir ke pasaran. Satu yang telah kami gunakan secara meluas ialah Stripo.

Stripo bukan sahaja pembina e-mel, mereka juga mempunyai perpustakaan lebih 900 templat yang boleh diimport dengan mudah. Sebaik sahaja anda mereka bentuk e-mel, anda boleh menghantar e-mel kepada 60+ ESP, dan pelanggan e-mel, termasuk Intuit Mailchimp, HubSpot, kempen Monitor, AWeber, eSputnik, Outlook, dan gmail. Terbaik daripada semua templat Stripo disertakan dengan ujian pemaparan e-mel supaya anda boleh memastikan ia telah diuji dan berfungsi secara konsisten merentas lebih 40 pelanggan e-mel.

Log Masuk Ke Demo Editor Stripo

Douglas Karr

Douglas Karr ialah CMO daripada OpenINSIGHTS dan pengasas Martech Zone. Douglas telah membantu berpuluh-puluh syarikat permulaan MarTech yang berjaya, telah membantu dalam usaha wajar lebih $5 bilion dalam pemerolehan dan pelaburan Martech, dan terus membantu syarikat dalam melaksanakan dan mengautomasikan strategi jualan dan pemasaran mereka. Douglas ialah transformasi digital yang diiktiraf di peringkat antarabangsa dan pakar serta penceramah MarTech. Douglas juga merupakan pengarang buku panduan Dummie dan buku kepimpinan perniagaan yang diterbitkan.

Artikel yang berkaitan

Kembali ke atas butang
Tutup

Adblock Dikesan

Martech Zone mampu memberikan anda kandungan ini tanpa sebarang kos kerana kami mengewangkan tapak kami melalui hasil iklan, pautan ahli gabungan dan tajaan. Kami amat menghargai jika anda akan mengalih keluar penyekat iklan anda semasa anda melihat tapak kami.