Bab 6: Reka Bentuk dan Teknikal

Reka bentuk email pada tahun 2026 adalah satu disiplin yang pelik. Anda mereka bentuk untuk medium yang dipaparkan secara berbeza dalam puluhan klien email, pada skrin daripada jam tangan pintar hingga monitor ultrawide, dalam mod terang dan gelap, dengan kekangan teknologi yang akan membuatkan pembangun web menangis. Namun begitu, email yang berprestasi terbaik selalunya yang paling mudah.

Bab ini merangkumi asas teknikal yang memastikan email anda dipaparkan dengan betul, dimuatkan dengan cepat, dan menukar dengan boleh dipercayai.

Reka Bentuk Mobile-First

Lebih daripada 60% email kini dibuka pada peranti mudah alih. Angka ini telah meningkat secara berterusan selama bertahun-tahun, dan tidak akan turun semula. Lebih kritikal lagi, 64% pengguna mudah alih akan memadam email yang tidak dipaparkan dengan baik pada telefon mereka. Bukan "tidak kelihatan sempurna." Tetapi "tidak berfungsi."

Mobile-first bermakna mereka bentuk untuk skrin terkecil dahulu, kemudian meningkatkan skala ke atas.

Susun atur satu lajur adalah pendekatan yang paling selamat dan paling berkesan. Reka bentuk berbilang lajur yang kelihatan hebat pada desktop runtuh secara tidak dapat dijangka pada mudah alih, sering bertindih dalam susunan yang salah atau mewujudkan mimpi buruk menatal mendatar. Satu lajur dengan teks, imej, dan butang bersaiz betul berfungsi di mana-mana sahaja.

Kekalkan lebar email anda antara 600 dan 640 piksel. Ini adalah piawaian yang berfungsi merentasi julat klien email yang paling luas. Lebih lebar daripada 640px dan anda berisiko menatal mendatar pada skrin yang lebih kecil dan dalam klien email yang menambah panel sisi.

Butang mesra sentuhan mestilah sekurang-kurangnya 44x44 piksel. Ini adalah Panduan Antara Muka Manusia Apple untuk sasaran ketukan minimum, dan saya sebenarnya mencadangkan untuk pergi sedikit lebih besar, ke 46x46 piksel, untuk mengambil kira ketukan yang kurang tepat. Tiada yang membunuh penglibatan email mudah alih lebih cepat daripada butang yang terlalu kecil untuk diketuk dengan tepat.

Saiz fon mestilah sekurang-kurangnya 13px pada iPhone. Apa-apa yang lebih kecil daripada 13px pada iOS mencetuskan zum automatik, yang merosakkan susun atur anda. Gunakan 14-16px untuk teks isi dan 20-22px untuk tajuk. Lebih besar hampir selalu lebih baik pada mudah alih.

Baris subjek harus kekal di bawah 30 aksara untuk keterlihatan mudah alih. Kebanyakan klien email mudah alih memotong baris subjek antara 30 dan 40 aksara bergantung kepada peranti dan sama ada teks pratonton dipaparkan. Letakkan perkataan penting di hadapan.

Gunakan pertanyaan media untuk imej yang dioptimumkan mudah alih. Sajikan fail imej yang lebih kecil kepada peranti mudah alih, untuk kelajuan muat dan penggunaan data. Imej yang dimuatkan dalam 1 saat pada Wi-Fi mungkin mengambil masa 5 saat pada sambungan mudah alih yang lemah, dan pembaca anda tidak akan menunggu.

Saiz fail imej lebih penting daripada yang disedari oleh kebanyakan pemasar. Kekalkan imej individu di bawah 200KB dan jumlah berat email di bawah 800KB. Mampat semua imej sebelum memuat naik. Gunakan TinyPNG atau Squoosh untuk pemampatan tanpa kerugian. Banyak ESP mengubah saiz imej dengan segera, tetapi mereka tidak selalu memampatnya dengan cukup agresif.

Gunakan fon web-selamat sebagai tindanan utama anda. Fon tersuai dalam email mempunyai sokongan yang tidak konsisten. Arial, Helvetica, Georgia, dan Verdana dipaparkan dengan boleh dipercayai di mana-mana sahaja. Anda boleh menentukan fon web tersuai sebagai pilihan pertama anda dan kembali kepada fon web-selamat untuk klien yang tidak menyokongnya, tetapi ketahuilah bahawa majoriti pembaca anda akan melihat alternatif. Reka bentuk dengan alternatif dalam fikiran, bukan fon tersuai.

Pratonton email anda pada peranti sebenar, bukan hanya dalam pelayar anda. Pratonton pelayar desktop mengelirukan. Email yang kelihatan sempurna dalam pratonton Chrome anda mungkin mempunyai teks bertindih pada iPhone SE atau imej yang dipotong dalam aplikasi Gmail pada Android. Gunakan Litmus, Email on Acid, atau sekurang-kurangnya hantar ujian kepada diri sendiri dan semak pada telefon anda sebelum menghantar.

Paparan Retina dan DPI tinggi memerlukan imej 2x. Jika lajur email anda lebar 600px dan anda menggunakan imej selebar 600px, ia akan kelihatan kabur pada skrin Retina (yang merupakan kebanyakan telefon dan komputer riba moden). Eksport imej pada 2x saiz paparan (1200px untuk lajur 600px) dan tetapkan lebar dalam HTML kepada saiz paparan. Fail akan lebih besar, jadi pemampatan menjadi lebih penting lagi.

Keserasian Klien Email

Inilah kebenaran yang tidak selesa tentang pembangunan email: anda masih membina dengan jadual. Pada tahun 2026. Sementara web telah beralih kepada CSS Grid dan Flexbox, email kekal terikat kepada jadual HTML untuk susun atur.

Mengapa? Kerana Microsoft Outlook menggunakan enjin pemaparan Word (ya, pemproses perkataan) untuk memaparkan email HTML. Dan Outlook mempunyai bahagian pasaran yang mencukupi, terutamanya dalam B2B, yang tidak boleh anda abaikan. Jadual dipaparkan secara konsisten dalam enjin Word. CSS moden tidak.

Gunakan CSS sebaris. Kebanyakan klien email membuang helaian gaya luaran dan ramai yang membuang gaya dari <head>. Satu-satunya cara yang boleh dipercayai untuk memastikan gaya anda digunakan adalah dengan memasukkannya terus pada setiap elemen. Setiap alat pembinaan email yang serius mengendalikan ini secara automatik semasa eksport.

Reka bentuk responsif menggunakan pertanyaan media berfungsi dalam kebanyakan klien email moden: Apple Mail, iOS Mail, aplikasi Gmail, Outlook mudah alih, Yahoo. Klien web desktop Gmail secara teknikal menyokong pertanyaan media, tetapi kerana email dipaparkan dalam tetingkap pratonton yang lebih kecil daripada paparan penuh, pertanyaan sering tidak diaktifkan. Ini sama untuk kebanyakan klien webmail, walaupun sesetengahnya menggunakan iframe untuk memaparkan email, dalam kes mana pertanyaan media akan dicetuskan. Membina mobile-first membantu di sini, kerana pertanyaan media tersebut akan diaktifkan. Untuk keserasian yang lebih luas, reka bentuk hibrid adalah jaring keselamatan anda.

Reka bentuk hibrid (juga dipanggil reka bentuk spongy) adalah alternatif anda. Ia menggunakan susun atur bendalir, lebar berasaskan peratusan, dan komen bersyarat untuk mewujudkan email yang menyesuaikan diri dengan saiz skrin tanpa bergantung pada pertanyaan media. Ia boleh dilakukan dengan atau tanpa jadual. Mark Robbins umumnya mengesyorkan menggunakan div dengan jadual hantu, yang mengelakkan banyak masalah berulang yang disebabkan oleh jadual. Email kelihatan baik pada mana-mana lebar kerana struktur asasnya fleksibel secara lalai.

Mark Robbins (kini Developer Advocate untuk Email Experience di Customer.io) telah menjadi pelopor teknik CSS-sahaja untuk email yang menolak batasan apa yang mungkin tanpa JavaScript (yang disekat dalam semua klien email). Kerjanya pada komponen interaktif CSS-sahaja, penambahbaikan kebolehaksesan, dan peningkatan progresif telah memajukan bidang ini dengan ketara. Jika anda membina email pada tahap teknikal, kaji kerjanya.

Perbezaan pemaparan klien email yang biasa untuk diuji:

Outlook desktop (2019/2021/365) menggunakan enjin pemaparan Word, yang bermaksud: tiada sokongan untuk imej latar belakang CSS, kawalan padding terhad, dan jarak jadual yang tidak dapat dijangka. VML (Vector Markup Language) secara tradisinya disyorkan untuk imej latar belakang dalam Outlook, tetapi Mark Robbins telah menyerlahkan bahawa VML menyebabkan masalah kebolehaksesan yang serius dan mengesyorkan mengelakkannya. Pertimbangkan menggunakan warna latar belakang pepejal sebagai alternatif untuk Outlook.

Gmail web membuang semua gaya dari <head> jika ia melebihi ambang saiz tertentu (kira-kira 16KB, meningkat daripada had sebelumnya ~8,192 aksara). Jika CSS anda kompleks, sesetengah gaya akan dibuang secara senyap. Dan walaupun Gmail secara teknikal menyokong pertanyaan media, saiz tetingkap pratonton bermakna ia jarang diaktifkan dalam klien web, itulah sebabnya reka bentuk hibrid penting.

Apple Mail adalah klien email yang paling mematuhi piawaian dan menyokong hampir semua perkara, termasuk pertanyaan media, animasi CSS, dan @supports. Ia adalah klien impian untuk dibangunkan, tetapi jangan biarkan ia memperdaya anda fikir klien lain akan berkelakuan sama.

Yahoo Mail dan AOL telah bertambah baik dengan ketara dalam beberapa tahun kebelakangan ini tetapi masih mempunyai keanehan seputar sokongan pertanyaan media dan pengendalian jidar. sentiasa uji.

Alat Reka Bentuk Email

Ekosistem alatan untuk reka bentuk email telah matang dengan ketara. Inilah yang saya cadangkan pada tahun 2026, dipecahkan mengikut kes penggunaan.

Izinkan saya menghuraikan ini dengan lebih banyak konteks.

Pembina tanpa kod untuk pasukan pemasaran:

Beefree (dahulunya BEE) adalah cadangan utama saya untuk pasukan yang perlu membina email dengan cepat tanpa pengekodan. Antara muka seret-dan-lepas adalah benar-benar baik, dan ciri modul tersimpan membolehkan anda membina perpustakaan komponen boleh guna semula. Stripo adalah pilihan terbaik jika anda memerlukan sokongan AMP for Email atau mahu mengakses perpustakaan templat yang besar (1,400+ templat). Chamaileon dibina untuk pasukan enterprise yang memerlukan tadbir urus jenama dan aliran kerja kelulusan yang tertanam dalam proses penciptaan email.

Platform pengujian:

Litmus kekal sebagai piawaian emas, menawarkan pratonton merentasi lebih daripada 90 kombinasi klien email dan peranti. Tidak murah, tetapi jika anda menghantar kepada khalayak yang pelbagai (dan anda mungkin melakukannya), melihat bagaimana email anda dipaparkan dalam Outlook 2019 pada Windows vs Apple Mail pada macOS vs Gmail pada Android adalah penting. Email on Acid menawarkan pratonton pemaparan yang serupa ditambah pengujian spam pada harga yang lebih rendah. Untuk pasukan dengan belanjawan terhad, ia adalah alternatif yang kukuh.

Rangka kerja kod untuk pembangun:

MJML adalah bahasa markup yang dikompilasi kepada email HTML responsif. Anda menulis markup yang bersih dan semantik dan MJML mengendalikan output berasaskan jadual yang tidak elok. Ia adalah rangka kerja pembangun yang paling popular untuk email. Maizzle membawa Tailwind CSS ke pembangunan email, dengan saluran binaan yang mengendalikan penyisipan terus, membuang CSS yang tidak digunakan, dan menjana HTML sedia pengeluaran. React Email membolehkan anda membina templat email menggunakan komponen React dalam ekosistem npm. Jika pasukan anda sudah berfikir dalam komponen, ini adalah padanan yang semula jadi. Parcel (bukan pembundel web, IDE email) menyediakan pratonton masa nyata dan petunjuk sokongan CSS semasa anda mengekod.

Aliran kerja reka bentuk-ke-kod:

Aliran kerja Figma ke Email semakin biasa. Pasukan reka bentuk mencipta templat email dalam Figma menggunakan perpustakaan komponen, kemudian mengeksport ke HTML sama ada melalui pemalam atau dengan menyerahkan reka bentuk kepada pembangun yang melaksanakannya dalam MJML atau Maizzle.

Reka Bentuk Email Berkuasa AI

Landskap alatan reka bentuk berubah dengan ketara pada awal 2026, dan reka bentuk berkuasa AI bukan lagi teori. Inilah yang sebenarnya boleh digunakan hari ini.

Figma MCP + Claude Code ("Code to Canvas") adalah perkembangan yang paling signifikan. Diumumkan pada Februari 2026, integrasi MCP Figma mewujudkan sambungan dua hala antara fail reka bentuk dan alatan pengkodan AI. Claude memeriksa reka bentuk Figma secara semantik — memahami sistem reka bentuk, hierarki komponen, token jarak, dan niat, bukan hanya piksel. Untuk email, huraikan apa yang anda mahukan ("cipta bahagian hero email yang sepadan dengan kit jenama kami dengan imej lebar penuh, tajuk, sub-tajuk, dan butang CTA") dan dapatkan reka bentuk yang menghormati sistem reka bentuk Figma anda yang sedia ada. Digabungkan dengan MJML atau React Email, aliran kerja ini beralih daripada taklimat reka bentuk kepada templat email sedia pengeluaran dalam beberapa minit dan bukannya berjam-jam.

Paper.design adalah kanvas reka bentuk yang didayakan MCP dengan 24 alat yang natif kepada HTML dan CSS. Tidak seperti Figma yang menghasilkan vektor yang memerlukan penukaran, Paper bekerja dalam medium yang sebenarnya digunakan oleh email. Dua hala dengan Claude Code dan Cursor — ejen AI boleh memeriksa artboard, mengubah suai susun atur, menulis HTML, dan mengemas kini gaya. Token reka bentuk disegerakkan daripada Figma, data API sebenar mengisi UI, dan output ditukar kepada React atau Tailwind. Peringkat percuma (100 panggilan MCP seminggu) dan Pro ($20 sebulan, 1M panggilan seminggu). Untuk pereka bentuk email yang mahukan reka bentuk berbantuan AI tanpa meninggalkan persekitaran natif HTML, Paper menghapuskan keseluruhan langkah penukaran daripada aliran kerja.

Cursor untuk pembangunan email patut disebut kerana ia telah menjadi persekitaran pengkodan AI de facto, dan templat email adalah kod. Pereka bentuk yang menggunakan MJML atau React Email boleh mengulangi 10x lebih cepat dalam Cursor berbanding dalam penyunting tradisional. Huraikan perubahan yang anda mahukan dalam bahasa semula jadi, Cursor menulis kod, anda pratonton hasilnya. Untuk pasukan yang telah memindahkan pembangunan email ke dalam kod (yang, menurut bahagian rangka kerja di atas, adalah hala tuju), Cursor merapatkan gelung maklum balas antara "saya mahukan ini" dan "inilah dia."

Aliran kerja design-from-Claude Nitrosend membolehkan anda mereka bentuk templat email sepenuhnya melalui bahasa semula jadi, sama ada melalui pelayan MCP dalam Claude atau melalui sembang AI terbina dalam Nitrosend. "Cipta etalase produk dua lajur dengan logo kami dalam pengepala, tiga kad produk dengan imej dan harga, dan butang CTA hijau" menghasilkan templat yang dipaparkan yang boleh anda ulangi secara perbualan. Untuk pengasas solo dan pasukan kecil tanpa sumber reka bentuk, ini menghapuskan kesesakan reka bentuk sepenuhnya. Kini dalam beta tertutup.

Alat reka bentuk AI lain yang patut dipantau:

Mailmodo menawarkan penciptaan email AI dari hujung ke hujung — huraikan email yang anda mahukan, dan ia menjana email interaktif lengkap dengan sokongan AMP. EmailCanvasAI menjana templat email daripada gesaan teks. Penjana Templat AI Mailjet mencipta reka bentuk titik permulaan daripada penerangan ringkas. Ini adalah alat peringkat awal, tetapi mereka memberi isyarat hala tuju: reka bentuk email beralih daripada "bina secara visual" kepada "huraikan secara perbualan."

Cadangan praktikal: Jika pasukan anda sudah menggunakan Figma, terokai aliran kerja Figma MCP + Claude Code untuk sistem reka bentuk anda. Jika anda pembangun-dahulu, Cursor dengan MJML atau React Email adalah laluan terpantas kepada pembangunan email berbantuan AI. Jika anda pasukan kecil tanpa sumber reka bentuk atau pembangunan yang berdedikasi, pendekatan reka bentuk AI Nitrosend atau Mailmodo menghapuskan kesesakan sepenuhnya. Dan jika anda mahukan kawalan maksimum ke atas reka bentuk natif HTML dengan bantuan AI, Paper.design berbaloi untuk dinilai.

Templat Tanpa Kod vs Templat Berkod

Ini bukan keputusan sama ada atau. Ia adalah tentang memadankan pendekatan dengan kes penggunaan.

Alat tanpa kod adalah 3 hingga 5 kali lebih pantas untuk kempen sekali guna. Apabila anda perlu membina satu email promosi, pembina seret-dan-lepas membawa anda ke sana dalam 30 minit berbanding 3 jam. Gunakan Beefree, Stripo, atau pembina terbina dalam ESP anda.

Templat berkod lebih baik untuk aliran berulang, kawalan versi, dan sistem reka bentuk. Apabila anda membina siri selamat datang yang akan dihantar kepada ribuan pelanggan selama berbulan-bulan atau bertahun-tahun, melabur dalam templat yang dikodkan dengan betul akan berbaloi. Templat berkod boleh berada dalam kawalan versi (Git), disemak dalam permintaan tarik, dan dikemas kini secara sistematik merentasi keseluruhan aliran.

Kebanyakan program email yang matang menggunakan kedua-duanya. Templat berkod untuk aliran automatik (selamat datang, troli terbengkalai, pasca pembelian) dan alat tanpa kod untuk kempen sekali guna (pelancaran produk, promosi bermusim, pengumuman). Pendekatan hibrid ini memberi anda konsistensi di mana ia penting dan kelajuan di mana anda memerlukan.

Sistem Reka Bentuk Templat Email

Jika anda menghantar lebih daripada segenggam jenis email, anda memerlukan sistem reka bentuk. Bukan templat. Sebuah sistem.

Token jenama mentakrifkan pemalar: warna utama dan sekunder anda, tindanan fon, unit jarak piawai (8px, 16px, 24px, 32px), jejari sempadan untuk butang, dan sebarang pemalar visual lain. Dokumentasikan ini sekali dan rujuk di mana-mana sahaja.

Perpustakaan komponen mengandungi blok pembangun: pengepala (logo, navigasi), bahagian hero (imej, tajuk, CTA), blok teks (tajuk, isi, pautan), kad produk (imej, tajuk, harga, butang), butang CTA (utama, sekunder, pautan teks), dan pengaki (pautan sosial, teks undang-undang, berhenti melanggan). Setiap komponen mempunyai tingkah laku responsif yang ditakrifkan, rawatan mod gelap, dan keperluan kebolehaksesan.

Templat susun atur menggabungkan komponen ke dalam jenis email piawai: email promosi, surat berita, pemberitahuan transaksi, email selamat datang, troli terbengkalai. Ini adalah titik permulaan anda, bukan kekangan anda.

Panduan penggunaan memberitahu pasukan anda bila menggunakan apa, berapa banyak salinan yang perlu disertakan, komponen mana yang diperlukan (pengaki, berhenti melanggan) berbanding pilihan, dan sebarang peraturan jenama berkaitan imej, nada, atau penempatan CTA.

Membina sistem reka bentuk memerlukan masa di hadapan. Untuk jenama e-dagang yang tipikal, jangkakan 40 hingga 60 jam kerja pembangunan awal. Tetapi pelaburan itu terbayar dengan cepat. Setelah sistem tersedia, membina email baru turun daripada 3 hingga 4 jam kepada 30 hingga 60 minit. Dan setiap email yang anda hantar secara automatik mengikut jenama dan boleh diakses.

Jika anda adalah pasukan yang lebih kecil tanpa sumber untuk sistem reka bentuk penuh, mulakan dengan satu templat utama yang dibina dengan baik yang merangkumi jenis email anda yang paling biasa (biasanya email promosi). Bina dengan betul sekali, dengan sokongan mod gelap, ciri kebolehaksesan, dan pengoptimuman mudah alih. Kemudian sesuaikan untuk setiap penghantaran. Itu bukan sistem reka bentuk, tetapi ia menyelesaikan 80% masalah.

Kebolehaksesan

Paul Airy telah menjadi suara terkemuka dalam kebolehaksesan email selama bertahun-tahun, dan mesej terasnya patut diulang: email yang boleh diakses bukan sahaja perkara yang betul untuk dilakukan, ia berprestasi lebih baik untuk semua orang.

Dianggarkan 15 hingga 20% orang mempunyai sesuatu bentuk ketidakupayaan. Itu termasuk gangguan penglihatan, ketidakupayaan motor, perbezaan kognitif, dan ketidakupayaan situasi (seperti membaca email dengan satu tangan sambil mendukung bayi). Mereka bentuk untuk kebolehaksesan bermakna mereka bentuk untuk semua mereka, dan dalam prosesnya, anda menjadikan email lebih baik untuk 80% yang lain juga.

Keperluan WCAG 2.1 untuk email:

Kontras warna mesti memenuhi nisbah 4.5:1 untuk teks biasa dan 3:1 untuk teks besar. Gunakan alat pemeriksa kontras. Apa yang kelihatan baik pada monitor berkelas tinggi anda mungkin tidak boleh dibaca pada skrin yang lebih murah di bawah cahaya matahari yang terang.

Semua imej mesti mempunyai teks alt yang deskriptif. Bukan "image1.jpg" atau "banner." Huraikan apa yang ditunjukkan imej dan apa yang perlu diketahui oleh pembaca. Jika imej itu semata-mata hiasan, gunakan atribut alt kosong (alt="") supaya pembaca skrin melewatinya.

Kekalkan susunan membaca yang logik. Pembaca skrin mengikuti susunan sumber HTML, bukan susun atur visual. Pastikan kandungan anda masuk akal apabila dibaca secara linear, dari atas ke bawah.

Sertakan atribut bahasa (lang="en") dan atribut arah (dir="ltr") pada elemen HTML anda supaya pembaca skrin menggunakan model sebutan yang betul dan arah teks.

Pautan harus mempunyai tujuan yang jelas daripada teksnya sahaja. "Klik di sini" tidak bermakna di luar konteks. "Muat turun Laporan Penanda Aras Email 2026" memberitahu pembaca dengan tepat ke mana pautan pergi.

Jangan bergantung pada warna sahaja untuk menyampaikan maklumat. Jika harga ditunjukkan dalam warna merah untuk menunjukkan jualan, sertakan juga teks yang mengatakan "Harga jualan" atau gunakan garis potong pada harga asal.

Gunakan teks berskala. Jangan sekali-kali menetapkan saiz fon dalam piksel yang tidak boleh diganti oleh keutamaan pengguna.

Pastikan navigasi papan kekunci. Semua elemen interaktif harus boleh dicapai dan dikendalikan melalui papan kekunci.

Pada jadual susun atur, tambahkan role="presentation" untuk memberitahu pembaca skrin bahawa jadual digunakan untuk susun atur, bukan data. Tanpa atribut ini, pembaca skrin akan cuba menghurai susun atur anda sebagai jadual data, mewujudkan pengalaman yang mengelirukan.

Sasaran sentuhan sekurang-kurangnya 44x44px bukan sahaja amalan terbaik mudah alih. Mereka adalah keperluan kebolehaksesan. Pengguna dengan ketidakupayaan motor memerlukan saiz sasaran yang mencukupi.

Kebolehaksesan bukan senarai semak yang anda selesaikan sekali. Ia adalah amalan yang anda kekalkan merentasi setiap email. Tambah semakan kebolehaksesan ke proses QA email anda. Sebelum setiap penghantaran, semak: adakah setiap imej mempunyai teks alt? Adakah susunan membaca logik? Adakah semua butang dan pautan mempunyai saiz dan kontras yang mencukupi? Bolehkah anda memahami email jika anda menyipitkan mata dan hanya boleh membaca tajuk dan teks pautan? Jika jawapan kepada mana-mana ini adalah tidak, betulkan sebelum menghantar.

Pengujian pembaca skrin adalah piawaian emas. Jika anda benar-benar ingin memahami betapa boleh diaksesnya email anda, ujilah dengan pembaca skrin sebenar. VoiceOver pada Mac dan iOS, NVDA pada Windows, dan TalkBack pada Android semuanya percuma. Mendengar email anda dibaca kuat oleh pembaca skrin akan mendedahkan masalah yang pemeriksaan visual tidak akan pernah dedahkan. Bertujuan untuk melakukan ini sekurang-kurangnya sekali setiap suku tahun pada templat yang paling kerap digunakan anda.

Mod Gelap

Sekurang-kurangnya 33% penerima email melihat email dalam mod gelap, dan peratusan itu semakin meningkat. Mod gelap boleh melakukan kerosakan pada reka bentuk email yang tidak dibina untuk mengatasinya.

Klien email mengendalikan mod gelap secara berbeza. Sesetengahnya membalikkan warna. Sesetengahnya menukar latar belakang. Sesetengahnya melakukan kedua-duanya. Hasilnya boleh berupa teks hitam pada latar belakang hitam (tidak kelihatan), pautan biru gelap pada latar belakang kelabu gelap (hampir tidak kelihatan), atau logo dengan latar belakang putih yang kini mempunyai segiempat putih yang menyakitkan di sekelilingnya.

Uji email anda dalam mod gelap merentasi Apple Mail, Gmail, dan Outlook. Ketiga-tiga ini mengendalikan mod gelap secara berbeza, dan bersama-sama mereka merangkumi majoriti pengguna mod gelap.

Gunakan PNG telus untuk logo. Logo dengan latar belakang putih pada email putih kelihatan baik. Logo yang sama dalam mod gelap mendapat segiempat putih di sekelilingnya. Latar belakang telus menyelesaikan ini.

Elakkan latar belakang putih tulen. Gunakan putih lembut (#F5F5F5 atau yang serupa) untuk latar belakang isi email anda. Dalam mod gelap, putih tulen (#FFFFFF) boleh mewujudkan kilatan yang menyilau. Putih lembut menyesuaikan diri dengan lebih elegan dan lebih mudah pada mata dalam kedua-dua mod.

Gunakan pertanyaan media CSS @media (prefers-color-scheme: dark) di mana disokong untuk menyediakan gaya mod gelap yang eksplisit. Ini memberi anda kawalan ke atas cara email anda muncul dalam mod gelap dan bukannya membiarkan klien email meneka. Sokongan adalah baik dalam Apple Mail dan Outlook. Gmail mengabaikannya dan menggunakan transformasi mod gelapnya sendiri.

Petua reka bentuk mod gelap praktikal:

Gunakan sempadan atau bayang halus di sekeliling imej dengan latar belakang putih atau cerah supaya ia tidak mengapung dalam mod gelap. Tambahkan sempadan 1px nipis dalam warna jenama anda di sekeliling logo sebagai langkah keselamatan.

Untuk warna teks, elakkan teks hitam tulen (#000000) dalam mod terang. Gunakan kelabu gelap (#333333 atau #222222) sebagai gantinya. Dalam mod gelap, klien email sering membalikkan hitam tulen kepada putih tulen, yang boleh kelihatan keras. Teks yang sedikit berbeza daripada hitam tulen membalik kepada sedikit berbeza daripada putih tulen, yang lebih mudah dibaca.

Uji butang CTA anda dalam kedua-dua mod. Butang yang sangat kelihatan pada latar belakang putih mungkin hilang pada latar belakang gelap. Pertimbangkan untuk menambah sempadan pada butang anda supaya ia kekal kelihatan tanpa mengira warna latar belakang.

Jika anda menggunakan warna latar belakang dalam bahagian kandungan (seperti kotak petua yang diserlahkan atau sepanduk berwarna), warna tersebut mungkin diubah atau dibuang dalam mod gelap. Sentiasa pastikan kandungan anda boleh dibaca walaupun warna latar belakang kembali kepada latar belakang gelap lalai klien email.

Email Interaktif

Elemen interaktif dalam email boleh meningkatkan penglibatan dengan ketara. Kadar klik-untuk-buka meningkat sebanyak purata 31.7% apabila elemen interaktif disertakan.

Tetapi interaktiviti dalam email datang dengan kaveat kritikal: sokongan berbeza-beza secara meluas merentasi klien email. Sentiasa bina dengan peningkatan progresif dalam fikiran, konsep yang telah diperjuangkan oleh Jason Rodriguez. Elemen interaktif anda adalah bonus untuk klien yang menyokongnya. Alternatif untuk klien yang tidak menyokong masih harus menjadi email yang berfungsi sepenuhnya dan kelihatan baik.

Kesan tuding CSS mempunyai sokongan yang luas dan memberikan peningkatan 5 hingga 10% dalam penglibatan. Perkara mudah seperti perubahan warna butang semasa tuding, hamparan imej, atau animasi garis bawah. Ini adalah tambahan berisiko rendah, ganjaran tinggi.

Akordion berkuasa CSS mempunyai sokongan sederhana dan boleh memberikan peningkatan 10 hingga 15%. Mereka berfungsi dengan baik untuk email yang padat kandungan seperti surat berita atau perbandingan produk, membolehkan pembaca mengembangkan hanya bahagian yang mereka ambil berat. Mereka tidak berfungsi dalam Gmail web atau Outlook, jadi alternatif anda harus menunjukkan semua kandungan yang dikembangkan.

GIF animasi mempunyai sokongan universal dan memberikan 5 hingga 8% lebih banyak penglibatan. Setiap klien email menyokong GIF (dengan pengecualian sesetengah versi desktop Outlook, yang hanya menunjukkan bingkai pertama). Mereka adalah elemen interaktif yang paling selamat yang boleh anda gunakan. Demonstrasi produk, animasi halus, dan minat visual semuanya berfungsi dengan baik.

AMP for Email menawarkan interaktiviti yang paling berkuasa dengan peningkatan penglibatan 20 hingga 30%, membenarkan karosel, borang, menu akordion, dan malah kandungan langsung dalam email. Tetapi sokongan terhad kepada Gmail dan Yahoo, ia memerlukan pendaftaran penghantar Google, dan penggunaan kekal rendah. Jika khalayak anda terutamanya menggunakan Gmail dan anda mempunyai sumber pembangun, AMP boleh menjadi berkuasa. Bagi kebanyakan penghantar, ia belum berbaloi untuk pelaburan.

Pemasa kira detik adalah elemen interaktif biasa untuk email jualan dan tawaran terhad masa. Ia dijana di pihak pelayan sebagai GIF animasi yang memaparkan kira detik langsung. Perkhidmatan seperti Sendtric dan Mailmodo menawarkan penjana pemasa kira detik percuma dan berbayar. Mereka berfungsi dalam hampir setiap klien email. Kaveat penting: hanya gunakan pemasa kira detik sebenar untuk tarikh akhir sebenar. Pemasa yang mengira detik menuju jualan yang dilanjutkan secara senyap selepas itu melatih pelanggan untuk mengabaikan kemendesakan anda.

Tinjauan dan undian tertanam boleh meningkatkan penglibatan dengan ketara kerana ia mengubah email daripada siaran kepada perbualan. Alat seperti Typeform dan SurveyMonkey menjana undian satu soalan yang boleh ditanam yang berfungsi dalam kebanyakan klien email. Untuk klien yang tidak menyokong versi tertanam, alternatifnya adalah pautan kepada tinjauan. walaupun undian satu soalan dalam surat berita boleh meningkatkan kadar klik sebanyak 15 hingga 20%.

Peraturan emas email interaktif: sentiasa bina alternatif terlebih dahulu. Reka bentuk email anda seolah-olah tiada elemen interaktif yang akan berfungsi. Kemudian lapisi interaktiviti di atas untuk klien yang menyokongnya. Dengan cara ini, setiap pelanggan menerima email yang berfungsi, dan mereka yang mempunyai klien email moden mendapat sesuatu yang lebih.