Tunggu. Apa yang Baru Saja Terjadi pada Email Saya? Rekaman Webinar

Diterbitkan: 2016-02-11

Hampir setiap desainer dan pengembang harus membuat email di beberapa titik dalam karier mereka—apakah mereka mau atau tidak. Tetapi banyaknya klien email—masing-masing dengan masalah renderingnya sendiri—membuat banyak orang menggelengkan kepala karena kalah, bingung dengan serangan gencar masalah desain email.

Setelah mengalami banyak skenario seperti itu, kami bergabung dengan Alex Mohr dari Sendwithus untuk menjelaskan masalah paling umum yang dihadapi orang yang baru mengenal email dan, yang lebih penting, beberapa solusi untuk masalah tersebut.

Jika Anda tidak sempat menghadiri webinar, “Tunggu. Apa yang baru saja terjadi dengan email saya?”, jangan khawatir. Anda dapat mengunduh slide dan melihat rekaman di bawah ini.

Lihat slide & rekaman →

Berusaha sekuat tenaga, kami tidak dapat menjawab setiap pertanyaan yang diajukan selama webinar. Dan ada beberapa yang hebat. Jadi, saya menggunakan kesempatan ini untuk menjawab beberapa pertanyaan yang lebih sering diajukan oleh mereka yang baru mendalami pemasaran dan desain email.

Mengapa Google dan Microsoft sangat buruk dalam merender email?

Semua klien email mengalami kesulitan merender beberapa HTML dan CSS—dua bahasa yang digunakan untuk mengkodekan kampanye email. Ini karena mereka semua menggunakan mesin rendering yang berbeda. Mesin rendering adalah bagian dasar dari aplikasi email yang menentukan kode apa yang dirender ke layar dan bagaimana sebenarnya kode itu dirender.

mesin rendering

Dalam kasus Gmail Google, praprosesor digunakan untuk menghapus bagian kode tertentu dari email demi alasan keamanan. Sementara hampir setiap klien email web lain telah mengetahuinya sekarang, Gmail pada dasarnya menghapus gaya CSS yang disematkan di <head> email. Dan, karena banyak desainer menggunakan gaya tersebut untuk menentukan tampilan kampanye mereka, email tersebut bermasalah di Gmail.

Ini terutama terlihat pada klien seluler Gmail, karena kueri media—pemicu CSS yang digunakan dalam desain responsif tradisional—ada di bagian itu. Inilah sebabnya mengapa teknik seperti pengkodean hibrida (atau spons) dikembangkan, sebagai solusi langsung untuk kemampuan rendering Gmail yang buruk.

Dalam kasus klien Microsoft Outlook, masalahnya terletak pada kenyataan bahwa Outlook benar-benar menggunakan Microsoft Word sebagai mesin renderingnya. Itu benar, editor teks kaya yang digunakan oleh pelajar dan pebisnis sama-sama digunakan untuk merender kode HTML dan CSS (atau setidaknya mencoba). Sementara versi Outlook yang lebih lama menggunakan versi terinstal dari browser web Microsoft, Internet Explorer, untuk membuat kode email, pada Outlook 2007, Word telah digunakan untuk mempermudah pengeditan teks kaya bagi pengguna Outlook.

Sayangnya untuk desainer email, Word memiliki dukungan yang sangat terbatas untuk HTML dan CSS yang biasa digunakan di web dan dalam kampanye email. Dukungan terbatas untuk standar web ini menghasilkan kampanye email yang terlihat rusak di Outlook. Memahami bahwa dukungan adalah langkah pertama agar email terlihat bagus di Outlook, atau klien email apa pun, dalam hal ini.

Berikut adalah beberapa sumber untuk membantu Anda memulai pemahaman yang lebih baik tentang dukungan klien email untuk HTML dan CSS:

  • Panduan Utama Monitor Kampanye untuk CSS
  • Memahami Gmail dan CSS: Bagian 1 dan Bagian 2
  • Panduan untuk Merender Perbedaan di Klien Microsoft Outlook
  • Bagaimana Perangkat, Sistem Operasi, Aplikasi, dan Mesin Mempengaruhi Rendering
  • Masalah Rendering Desktop? Fokus Pengujian Awal pada Beberapa Mesin Rendering
  • Penjelasan Rendering Webmail: Mengapa Preprocessors adalah Musuh

Bagaimana Anda menangani Outlook yang tidak menampilkan font yang tepat saat menggunakan font web?

Font web, font yang disajikan melalui web alih-alih diinstal pada perangkat pengguna, semakin populer. Karena mereka memungkinkan perusahaan untuk tetap pada merek dengan tipografi mereka dan mendorong teks langsung, mereka adalah alat yang ideal untuk pemasar email. Sayangnya, mereka tidak didukung oleh semua klien email. Dan, dalam kasus Outlook, kurangnya dukungan menyebabkan situasi di mana Times New Roman ditampilkan alih-alih font fallback yang dideklarasikan dalam HTML Anda.

Kami telah mengatasi masalah ini sebelumnya dengan solusi yang memerlukan kelas HTML pada teks yang terpengaruh dan beberapa CSS khusus Outlook. Meskipun solusi ini masih berfungsi dengan baik, solusi yang lebih bersih dan lebih mudah dirawat telah mendapatkan daya tarik. Awalnya diusulkan oleh orang-orang di Action Rocket, solusi ini memerlukan penggunaan aturan @font-face untuk menyajikan font dan membungkusnya dalam kueri media di kepala email Anda.

 <style type="text/css"> @media screen { @font-face { font-family: 'Family Name'; font-style: normal; font-weight: 400; src: local(), local(), url() format(); } } </style>

Solusi ini adalah pendekatan yang sangat baik karena tidak memerlukan atribut kelas HTML yang mencemari kode Anda sambil tetap memastikan bahwa Outlook kembali ke tumpukan font yang Anda nyatakan. Lihat artikel asli Action Rocket untuk mempelajari lebih lanjut tentang teknik ini.

Bagaimana Anda menghentikan tautan biru agar tidak terjadi di seluler?

Perangkat seluler adalah alat yang berguna. Untuk membuatnya lebih berguna, perusahaan seperti Apple telah menambahkan fitur ke klien email mereka yang memungkinkan pengguna untuk dengan cepat menambahkan informasi ke kontak, kalender, atau aplikasi peta mereka. Kemungkinan besar Anda telah melihat sesuatu seperti ini di email:

ios_links

Alamat, tanggal, waktu, dan nomor telepon seperti teks tertentu disorot sebagai tautan biru yang digarisbawahi untuk menunjukkan bahwa mereka dapat berinteraksi dengannya. Sayangnya, tautan biru ini terkadang menyebabkan masalah dari perspektif desain dan aksesibilitas. Ketika teks terang pada latar belakang gelap berubah menjadi biru, tautan tersebut sekarang sulit (jika bukan tidak mungkin) untuk dibaca, apalagi berinteraksi.

aksesibilitas tautan biru

Kami telah menulis sebelumnya tentang solusi untuk masalah ini yang memungkinkan Anda mempertahankan gaya pada teks itu tetapi, sekali lagi, solusi yang lebih baru semakin populer. Ternyata menyertakan cuplikan berikut mematikan tautan biru di iOS tanpa perlu markup tambahan di HTML Anda. Cukup sertakan di kepala email Anda dan kirim.

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

Beberapa peserta webinar dengan cerdik menunjukkan bahwa CSS di atas secara khusus menargetkan perangkat Apple. Sementara pengujian saya baru-baru ini menunjukkan bahwa tautan biru tidak menjadi masalah di Android, beberapa anggota Komunitas Litmus mengalami masalah dengan Android dan Gmail yang menautkan hal-hal seperti nomor telepon. Lihat diskusi Komunitas untuk melihat beberapa solusi cerdas.

Apa cara terbaik untuk menangani gambar responsif? Bagaimana dengan gambar retina?

Karena semakin banyak orang mengadopsi desain email responsif, kebutuhan akan gambar responsif pun meningkat. Saran terbaik saya untuk menangani gambar responsif adalah teknik yang saya ambil untuk Julie Ng, pengembang di balik Buletin Pengembangan Email yang mengagumkan.

Pada dasarnya, Anda mendeklarasikan dimensi gambar Anda dalam beberapa cara dalam tag img Anda. Untuk mencegah beberapa klien email menampilkan gambar retina yang lebih besar dalam ukuran penuh, Anda mendeklarasikan lebar menggunakan atribut lebar. Ini memberikan lebar dasar yang baik dalam piksel. Untuk email responsif, Anda kemudian mendeklarasikan lebar, lebar maksimum, dan lebar minimum gambar sebagai CSS sebaris. Berikut ini contohnya:

 <img alt="Hello" src="http://example.com/image.png" width="600" border="0">

Secara alami, Anda ingin memberikan beberapa teks ALT ketika gambar dinonaktifkan dan mendeklarasikan display:block; untuk mencegah spasi yang tidak perlu di sekitar gambar. Jika Anda memerlukan kontrol tambahan atas gambar, Anda dapat menargetkannya dengan kelas dan CSS di kepala email Anda. Ingat saja, CSS yang disematkan tidak didukung di semua tempat.

Ketika datang ke gambar retina, taruhan terbaik Anda adalah membuat gambar Anda dua kali ukuran tampilan yang dimaksudkan untuk gambar di email Anda. Misalnya, jika Anda memiliki gambar 600px kali 200px, Anda akan membuat dan menyimpannya sebagai gambar berukuran 1200px x 400px. Sertakan secara normal di email Anda. Atribut lebar yang saya sebutkan sebelumnya akan mencegahnya ditampilkan sebagai gambar yang sangat besar di klien seperti Outlook dan gambar Anda akan terlihat bagus dan tajam di perangkat dengan layar retina.

Adakah saran untuk seseorang yang ingin menggunakan GIF animasi dalam email?

Pergi untuk itu! GIF animasi adalah cara fantastis untuk menambahkan gerakan dan minat pada kampanye email Anda. Kami sangat menyukai teknik ini sehingga kami menulis panduan ekstensif untuk menggunakan GIF animasi dalam email.

Masuk saja dengan pemahaman bahwa mereka tidak didukung di mana-mana, paling menonjol di Microsoft Outlook, yang hanya menampilkan bingkai pertama animasi. Sebaiknya pastikan setiap gambar dalam GIF digunakan untuk tujuan ilustrasi, bukan untuk menyampaikan informasi penting kepada pelanggan. Informasi semacam itu harus selalu ditampilkan sebagai teks langsung di email sehingga pelanggan dapat membacanya bahkan ketika hal-hal seperti GIF dan gambar dinonaktifkan.

Sementara banyak orang berpikir GIF hanya untuk bersenang-senang, banyak perusahaan produk menggunakan GIF animasi untuk memamerkan interaksi dengan produk mereka dan pada dasarnya mengajari orang cara menggunakan produk bahkan sebelum mereka menyentuhnya. Berikut ini contoh bagus dari MailChimp:

mailchimp-antarmuka-gif

GIF adalah tambahan yang bagus untuk kotak alat setiap pemasar email. Satu kata nasihat adalah menggunakannya dengan hemat. Jika setiap kampanye berisi banyak GIF, mereka dengan cepat kehilangan rasa terkejut. Gunakan sesekali saat Anda benar-benar ingin menarik perhatian ke kampanye atau pertunjukan sesuatu yang keren.

Apa pendapat Anda tentang penggunaan video dalam email?

Sama seperti GIF animasi, video bisa menjadi cara terbaik untuk menarik perhatian pelanggan. Sayangnya, video itu sendiri memiliki lebih sedikit dukungan di seluruh klien email. Meskipun kami pernah dapat menggunakan latar belakang video dalam email, itu hanya didukung di Apple Mail dan Outlook untuk Mac.

Itu seharusnya tidak menghalangi Anda untuk menggunakan video bersama-sama dengan email. Orang-orang sangat menyukai video dan perusahaan semakin menggunakan pemasaran video sebagai cara untuk meningkatkan keterlibatan dengan pengguna. Cara terbaik menggunakan video dalam email adalah dengan menyertakan gambar diam video dengan tombol putar di kampanye email yang tertaut ke halaman arahan. Pengguna segera memahami bahwa itu adalah video dan dapat melihat video di halaman arahan.

Sementara video yang disematkan di email akan memungkinkan pengalaman pengguna yang menyenangkan, teman-teman kami di Wistia membuat beberapa poin bagus mengapa halaman arahan adalah solusi yang lebih baik.

  • Video di halaman arahan dapat digunakan kembali di tempat lain. Ini adalah sumber daya konten permanen.
  • Halaman arahan memfasilitasi interaksi lebih lanjut. Setelah Anda selesai menonton video di kotak masuk Anda, apa yang tersisa untuk Anda lakukan?
  • Orang-orang dapat lebih mudah berbagi video di halaman arahan.

Jadi, pasti gunakan video dalam kampanye email Anda, tetapi setidaknya untuk saat ini, terimalah kenyataan bahwa tidak berarti melihat video dalam email.

Apakah ada kerangka kerja email responsif yang Anda rekomendasikan?

Kami menyebutkan beberapa sumber daya untuk membangun kampanye email yang lebih baik di webinar, tetapi mereka pasti layak untuk diulang dan diperluas di sini.

Sejauh kerangka kerja dan template email responsif, ada beberapa yang tersedia:

  • Cerberus dari Ted Goas
  • Cetak Biru Email MailChimp
  • Yayasan Zurb untuk Email
  • MJML Mailjet

Salah satu favorit kami adalah Slate kami sendiri, yang mencakup lima template responsif untuk berbagai skenario pengiriman. Opsi apa pun yang Anda pilih, pastikan untuk mengujinya di seluruh klien email untuk memastikan pelanggan Anda tidak terkejut.

Lihat slide & rekaman

Kami membahas banyak hal, “Tunggu. Apa yang baru saja terjadi dengan email saya?” Seiring dengan mengidentifikasi masalah email yang paling umum dan solusinya, kami menyentuh pentingnya menguji setiap email dan bahkan melihat cara menguji email transaksional dengan Sendwithus. Jika Anda melewatkannya pertama kali, Anda dapat mengunduh slide dan melihat rekaman di bawah ini.

Lihat slide & rekaman →