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. Pelayar web moden menyokong HTML, CSS dan JavaScript untuk a ketat set piawaian web. Dan, mereka sebenarnya hanya 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, sangat 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 membina 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 mana-mana web standard oleh pelanggan e-mel yang memaparkan e-mel HTML. Malah, secara maya setiap klien e-mel dan setiap versi setiap klien e-mel bertindak secara berbeza. Sesetengah akan menghormati CSS, fon luaran dan HTML moden. Orang lain menghormati beberapa penggayaan sebaris, hanya akan memaparkan koleksi fon dan mengabaikan segala-galanya kecuali struktur dipacu jadual. Ia sebenarnya agak tidak masuk akal pada ketika ini bahawa tiada siapa yang mengusahakan 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 – Hanya minggu 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. Semasa mereka mempromosikan editor mereka adalah Apa yang Anda Lihat Adalah Yang Anda Dapatkan (WYSIWYG), sebaliknya selalunya berlaku dengan reka bentuk e-mel. Anda akan pratonton e-mel dalam platform mereka, kemudian penerima e-mel melihat semua jenis masalah reka bentuk. Syarikat selalunya tanpa diketahui memilih editor yang kaya dengan ciri dan bukannya editor yang dikunci yang menganggap bahawa seseorang mempunyai lebih banyak ciri daripada yang lain. 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 – Terdapat beratus-ratus klien e-mel, setiap satu memaparkan HTML secara berbeza merentas klien desktop, apl, mudah alih dan mel web. Walaupun editor teks bagus anda pada pembekal perkhidmatan e-mel anda mungkin mempunyai tetapan untuk meletakkan tajuk dalam e-mel anda... pelapik, jidar, ketinggian garisan dan saiz fon mungkin berbeza pada setiap klien e-mel tunggal. Akibatnya, anda perlu merendahkan HTML dan mengodkan setiap elemen secara berbeza (lihat contoh di bawah) – dan selalunya menulis dalam pengecualian yang khusus untuk klien e-mel – untuk mendapatkan e-mel yang 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 pemaparan 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:

<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>

<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. Reka Bentuk Templat – Bina templat dengan reka letak dan blok kandungan berbeza yang merangkumi setiap gaya yang anda ingin hasilkan dalam reka bentuk e-mel anda. Apabila kami melaksanakan pelanggan, kami sentiasa mendorong mereka mereka bentuk e-mel untuk masa hadapan – bukan sahaja kempen e-mel seterusnya yang dihantar. Dengan cara itu, kami boleh mereka bentuk, membangun, menguji dan melaksanakan penyelesaian yang diperlukan sepenuhnya sebelum mereka pernah menghantar e-mel pertama itu.
2. 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.
3. 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.
4. 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.
5. 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 MailChimp, HubSpot, Monitor Kempen, 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

Pendedahan: Saya memautkan kepada saya firma perunding pemasaran yang mereka bentuk dan menggunakan e-mel silang pelanggan untuk jenama terkemuka dalam hampir mana-mana pembekal perkhidmatan e-mel. Saya juga ahli gabungan Stripo dan saya menggunakan pautan saya dalam artikel ini.