Frustrasi dengan Tautan Biru di Email? Taklukkan Mereka untuk Kebaikan

Diterbitkan: 2021-07-24

Tautan biru di email: Ini adalah fitur kegunaan yang bermanfaat, tetapi terlalu sering menyebabkan sakit kepala bagi pemasar email yang ingin merancang kampanye merek yang bijaksana.

Selama bertahun-tahun, kami telah melihat banyak cara menangani tautan biru di email HTML, dari yang sederhana hingga yang rumit.

Tapi teknik mana yang paling berhasil? Dan bagaimana pemasar memastikan desain email yang indah tanpa mengorbankan fungsionalitas yang berguna dalam email? Dalam panduan ini, kita akan melihat apa itu tautan biru dan cara terbaik untuk mencegahnya merusak email Anda sendiri. Bersiaplah untuk belajar:

Apa itu tautan biru?
Haruskah Anda menghapusnya?
Bagaimana mengubahnya untuk setiap klien email
Kasus tepi sebagai cadangan (dan untuk Outlook)

Hati-hati: Ada penyebab lain dari email yang rusak

Apakah kesalahan email membuat Anda bergidik? Tautan biru hanyalah salah satu cara email Anda terlihat rusak. Pelajari lebih dalam tentang apa yang dapat merusak email Anda dan tips & trik untuk tetap menjadi kenyataan.

Ungkapkan masalah dan perbaikan umum →

Apa itu tautan biru?

Tautan biru persis seperti apa bunyinya: Teks dalam email yang menggunakan gaya bergaris bawah biru default yang umum untuk hyperlink. Dalam pemasaran email—terutama di perangkat seluler—tautan biru ini dibuat secara otomatis oleh klien email untuk memberi orang pilihan untuk menyimpan atau berinteraksi dengan informasi.

Dalam beberapa tahun terakhir, Apple Mail telah memperbarui penanganan beberapa tautan ini dan tidak lagi mengubahnya menjadi biru. Untuk alamat dan waktu, perangkat iOS mempertahankan gaya asli tetapi menambahkan garis bawah putus-putus untuk menunjukkan bahwa ini dapat diklik.

Meskipun ini merupakan langkah maju untuk aksesibilitas untuk beberapa masalah tautan biru, ini tidak menyelesaikan semua masalah karena lebih dari sekadar alamat dan waktu dapat terpengaruh.

Sebagian besar versi iOS Apple Mail mengubah nomor telepon, URL, dan alamat email menjadi biru—tetapi biarkan alamat fisik dan waktu dalam warna gaya asli (merah, pada contoh di bawah).

tautan biru di iOS Apple Mail

Di iOS 13, konten masih ditautkan, tetapi warna gaya aslinya tetap dipertahankan:

tautan otomatis di Apple Mail iOS 13

Dalam pengujian kami, hal-hal ini adalah kandidat utama untuk menjadi konten tertaut (biru atau lainnya):

Alamat
tanggal
Alamat email
URL situs web
Waktu
Nomor telepon

Manfaat tautan biru: Haruskah Anda menghapusnya atau tidak?

Dalam setiap kasus, informasi yang ditautkan dapat bermanfaat bagi pelanggan, apakah mereka ingin menambahkan nomor telepon ke daftar kontak mereka atau mencari alamat secara online. Meskipun mengganggu dari perspektif branding, tautan biru sebenarnya bagus untuk kegunaan dan aksesibilitas, menyediakan fungsionalitas penting.

Ini memunculkan perdebatan: Haruskah kita mengesampingkan perilaku ini sejak awal?

Di satu sisi, kami ingin desain email kami tetap konsisten dan sesuai merek. Klien email yang mengesampingkan gaya kami sendiri dapat menyebabkan kejutan, membuat marah pemangku kepentingan, dan menyebabkan masalah aksesibilitas. Di sisi lain, orang mungkin mengandalkan fungsi ini dan berharap dapat mengambil tindakan atas informasi dalam email.

Jadi, apa yang harus dilakukan oleh desainer email?

Menurut pendapat kami, mengesampingkan gaya— tetapi bukan fungsionalitas— dari tautan ini adalah pendekatan terbaik. Solusi ideal untuk tautan biru harus mempertahankan kemampuan untuk mengambil tindakan pada tautan yang dibuat secara otomatis tersebut tetapi memungkinkan kami untuk menata tautan tersebut, bukan sistem operasi atau klien email.

Beberapa orang akan berpendapat bahwa mengesampingkan gaya biru yang digarisbawahi terlalu jauh. Namun, perilaku default memiliki masalah aksesibilitas serius yang dapat kami atasi. Misalnya, lihat footer email ini dengan tautan biru yang ditambahkan ke alamat:

tautan biru di footer email

Ini adalah desain yang umum: Teks putih dengan latar belakang hitam, dengan teks kecil untuk menjaga fokus pada konten di atasnya. Saat informasi ditautkan dan gaya biru diterapkan, kontrasnya sangat rendah. Siapa pun yang memiliki gangguan penglihatan—atau mereka yang memiliki penglihatan sangat baik menggunakan layar yang redup atau perangkat seluler di tempat yang cerah—akan mengalami kesulitan yang luar biasa dalam mengonsumsi informasi tersebut. Fitur yang membantu berubah menjadi pengalaman yang membuat frustrasi.

Tidak semua klien email memperlakukan penautan otomatis dengan cara yang sama. Sementara tautan biru adalah penyebab paling umum, beberapa klien mempertahankan warna font tetapi menambahkan garis bawah yang halus. Beberapa klien menghubungkan nomor telepon tetapi bukan alamat. Dengan semua inkonsistensi itu, dapat membuat frustasi untuk dikelola.

Jadi, bagaimana desainer email dapat menangani tautan biru?

Cara terbaik untuk mengganti gaya tautan otomatis

Meskipun kami telah melihat solusi yang berbeda di masa lalu—seperti menargetkan teks yang sering ditautkan dengan rentang dan kelas, atau menyisipkan karakter yang tidak terlihat ke dalam teks itu untuk menghentikan perilaku—solusi terbaik yang kami temukan adalah mengandalkan CSS yang disematkan untuk mengganti gaya tautan otomatis. Kemudian, tambahkan nilai seperti garis bawah dan warna pada merek agar orang tahu bahwa konten masih dapat diklik. Ideal untuk kegunaan dan aksesibilitas.

Metode ini memiliki banyak hal untuk itu. Kamu bisa:

Atur gaya Anda sendiri pada teks.
Gunakan gaya yang berbeda untuk tautan yang berbeda—itu tidak memaksa satu gaya di seluruh email.
Pertahankan fungsionalitas yang diperkenalkan oleh klien email dan sistem operasi.
Pertahankan gaya dengan mudah.

Itu adalah win-win untuk Anda dan pelanggan Anda.

Satu-satunya peringatan? Klien email yang berbeda melakukan hal yang berbeda saat menautkan teks secara otomatis, jadi Anda memerlukan beberapa aturan CSS untuk mengganti gaya.

Apakah email Anda memiliki tautan biru?

Selalu tahu kapan klien email memperbarui rendering email mereka dengan Pratinjau Email Litmus. Pratinjau email Anda di semua klien dan perangkat email populer dan temukan kesalahan sebelum Anda mengirim.

Pelajari lebih lanjut →

Mengganti tautan biru di Apple Mail

Saat membuat tautan di sekitar teks, Apple Mail menambahkan atribut tambahan ke tautan tersebut di luar href biasa. Contoh sederhananya adalah sebagai berikut:

<a href="#" x-apple-data-detectors="true">

Kami membahas banyak cara untuk menangani tautan biru iOS di masa lalu. Untungnya, yang perlu Anda lakukan sekarang adalah menargetkan elemen dengan atribut khusus dan mengganti gaya untuk elemen tersebut.

Di blok gaya email Anda, tambahkan berikut ini untuk menargetkan tautan yang ditambahkan Apple dan paksa teks itu untuk mewarisi gaya dari elemen induknya:

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

Fungsionalitasnya akan tetap ada, tetapi teks akan ditata seperti yang Anda inginkan.

Untuk memastikan orang tahu bahwa konten dapat diklik, ubah nilai warna dari pewarisan ke kode warna heksagonal yang cocok dengan desain merek Anda (mis. #77d6fc untuk biru muda) dan ubah nilai dekorasi teks menjadi garis bawah.

Mengganti tautan biru di Gmail

Alih-alih menambahkan atribut ke teks yang ditautkan secara otomatis, Gmail melakukan hal lain sepenuhnya. Saat memproses HTML email, Gmail akan mengonversi doctype menjadi elemen garis bawah (u). Mengetahui hal ini, Anda kemudian dapat menambahkan pengait ke HTML Anda sendiri untuk menargetkan elemen hanya untuk Gmail. Ini biasanya dilakukan dengan menambahkan ID ke elemen body.

<body id="body"></body>

Meskipun ada beberapa cara untuk memperbaiki tautan biru Gmail, ini adalah rekomendasi kami: Targetkan semua tautan yang ada di dalam isi Gmail dengan tag gaya Anda berikut ini, dengan mengesampingkan gaya tambahan apa pun dalam prosesnya:

u + #body a {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
}

Ini menggunakan properti CSS yang sama persis dengan trik Apple Mail, hanya diterapkan secara khusus ke Gmail.

Ingatlah untuk memperbarui nilai warna dan dekorasi teks agar jelas bagi pelanggan bahwa mereka dapat mengeklik tautan otomatis. Sekali lagi, beberapa orang lebih suka opsi ini, jadi jangan sembunyikan dari mereka.

Mengganti tautan biru di Samsung Mail

Samsung Mail menggunakan teknik yang mirip dengan Gmail. Alih-alih mengonversi satu elemen ke elemen lainnya, Samsung Mail akan menambahkan ID khusus ke email yang disebut "MessageViewBody." Sama seperti Gmail, targetkan ID itu dan tautan apa pun yang ada di dalam blok gaya Anda:

#MessageViewBody a {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
}

Sekali lagi, properti CSS yang sama persis digunakan seperti sebelumnya. Dan Anda ingin menukar nilai warna merek Anda dan menggarisbawahi tautan jika itu bagian dari panduan desain Anda.

Semua bersama Sekarang

Meskipun akan lebih mudah untuk menghubungkan semua pemilih CSS di atas menjadi satu aturan, Gmail menghapus CSS menggunakan pemilih atribut, sehingga perbaikan akan dihapus dari Gmail, memungkinkan tautan biru bebas berkeliaran.

Oleh karena itu, Anda harus memisahkan ketiga aturan tersebut. Kabar baiknya adalah setelah mereka ditambahkan ke template email, Anda tidak perlu melakukan tambahan apa pun dalam kode Anda untuk menghapus tautan biru dari sebagian besar klien email.

Jika digabungkan, HTML Anda akan terlihat seperti ini:

<html>
	<head>
	<style>
a[x-apple-data-detectors] {
	color: #77d6fc !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

u + #body a {
	color: #77d6fc !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

#MessageViewBody a {
	color: #77d6fc !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}
</style>
</head>
<body id="body">

 <your email code goes here as normal>

</body>

Berikut adalah contoh tampilannya jika Anda tidak melakukan apa pun (tanpa perbaikan), menghapus gaya default tanpa menambahkan gaya Anda sendiri (dengan perbaikan), dan mengganti gaya default dengan gaya Anda sendiri (dengan perbaikan gaya):

Tanpa perbaikan	Dengan perbaikan	Dengan perbaikan bergaya

Menangani kasus tepi untuk pembuat kode just-in-case (dan Outlook)

Seperti yang mungkin Anda ketahui, selalu ada kasus tepi dalam hal desain email. Tautan biru tidak berbeda. Beberapa klien email masih akan menautkan teks secara otomatis. Dan karena aplikasi email berubah setiap 1-2 hari, ketiga klien di atas dapat dengan mudah memperkenalkan pembaruan yang merusak perbaikan tersebut.

Untuk kasus tepi ini, Anda dapat mengambil pendekatan yang berbeda.

Teknik ini melibatkan pembungkusan kandidat tautan otomatis dengan elemen yang kemudian ditargetkan melalui CSS di kepala email. Elemen penampung memiliki kelas yang diterapkan untuk penargetan. Sebelum desainer mengetahui bahwa mereka dapat menggunakan peretasan x-apple-data-detectors, trik ini biasanya digunakan untuk tautan biru Apple Mail, jadi Anda biasanya akan melihat sesuatu seperti "appleLinks" digunakan untuk kelas, tetapi bisa apa saja.

Dalam contoh kami, kami akan menggunakan kelas "blueLinks":

<p class="blueLinks">+1 (800) 123-4567</p>

Karena klien email akan menambahkan tautan di dalam elemen itu, targetkan di CSS di blok gaya email Anda dan timpa properti CSS tertentu:

.blueLinks a { 
            color:inherit !important; 
            text-decoration: none !important; 
}

Ini bisa menjadi solusi yang sangat kuat, tetapi membutuhkan lebih banyak perawatan. Karena konten email dapat sering berubah, melacak di mana kelas tersebut diterapkan dan memastikan semua teks yang dicurigai diperhitungkan dapat memakan waktu dan rentan terhadap kesalahan.

Itu sebabnya kami biasanya menyarankan untuk menggunakan tiga solusi CSS yang disematkan di atas, kembali ke solusi berbasis kelas hanya ketika pengujian menunjukkan kebutuhan untuk itu.

Perbaikan Anda untuk klien desktop Outlook

Aplikasi seluler Outlook dapat diperbaiki dengan solusi kasus tepi di atas, tetapi perbaikan itu tidak akan berfungsi dengan klien desktop Outlook.

Untuk klien desktop Outlook, URL dan alamat email akan selalu muncul sebagai warna default jika Anda tidak membungkusnya dalam tag <a>. Dalam kebanyakan kasus, Anda ingin ini ditautkan ke halaman web atau alamat email yang ditampilkan, jadi menambahkan tag <a> dengan atribut href dan menatanya sebagai tautan akan memberikan pengalaman pelanggan yang baik.

Jika Anda tidak ingin terlihat seperti tautan, Anda masih dapat menambahkan tag <a> dan menatanya agar terlihat seperti salinan lainnya.

Dalam kasus tepi, Anda mungkin memiliki klien yang membutuhkan URL agar terlihat seperti salinan biasa dan tidak ditautkan. Dalam hal ini, satu-satunya cara untuk mencapainya adalah dengan menambahkan banyak penyambung lebar nol di seluruh tautan:

www.litmus. com menjadi w&zwj;ww&zwj;.&zwj;litm&zwj;kita.&zwj;com

Ini bukan hal tercantik, tetapi berhasil. Namun, ini dapat menyebabkan gesekan dengan pelanggan Anda jika mereka mencoba menyalin dan menempelkan URL. Terkadang &zwj; muncul aneh atau mengganggu ketika disisipkan ke program yang berbeda. Misalnya, menyalin dan menempelkan URL saat dikodekan seperti di atas di bilah alamat di Firefox menghasilkan pencarian Google alih-alih membawa Anda langsung ke Litmus.com:

menyalin dan menempelkan tautan dengan penyambung lebar nol ke dalam browser

Jadi inilah yang saya sebut perbaikan terakhir-resort-bottom-of-the-bucket-client-will-listen-to-reason.

Perbaikan ini tidak berfungsi untuk alamat email, dan menurut pengalaman saya, saya belum menemukan solusi untuk membuat alamat email tanpa gaya dan tidak dapat diklik yang berfungsi untuk setiap penyedia layanan email (ESP). Untuk beberapa ESP, Anda dapat menggunakan tag <a> tanpa atribut href atau <a href=”#”>. Tetapi beberapa ESP tidak mengizinkan Anda mengirim email dengan peretasan itu.

Perbaiki gayanya, bukan fungsinya

Meskipun Anda mungkin ingin menghapus tautan otomatis biru demi desain piksel yang sempurna, ingatlah untuk siapa email Anda: pelanggan Anda. Klien email memiliki niat baik untuk membuat hal-hal seperti alamat, tanggal, dan nomor telepon dapat diklik—dan banyak orang menyukai dan berharap dapat menggunakannya dengan cara itu. Jangan sembunyikan mereka. Alih-alih, ubahlah agar sesuai dengan desain email Anda. Anda akan membuat pemangku kepentingan dan pelanggan Anda senang.

Buat email sesuai merek dan bebas kesalahan dengan Litmus

Lihat tampilan email Anda (tidak ada lagi tautan biru, kan?) di 100+ klien email, aplikasi, dan perangkat. Ucapkan selamat tinggal pada email yang rusak. Wah!

Mulai uji coba gratis Anda →

Awalnya diterbitkan pada 2 Juli 2019, oleh Jason Rodriguez. Terakhir diperbarui pada 23 Juli 2021.