E-postadaki Mavi Bağlantılar sizi hayal kırıklığına mı uğrattı? Onları İyilik İçin Fethedin

Yayınlanan: 2021-07-24

E-postadaki mavi bağlantılar: Yararlı bir kullanılabilirlik özelliğidir, ancak çoğu zaman düşünceli, marka üzerine kampanyalar tasarlamak isteyen e-posta pazarlamacıları için baş ağrısına neden olur.

Yıllar içinde, HTML e-postalarındaki mavi bağlantıları basitten karmaşığa doğru kullanmanın birçok yolunu gördük.

Ama hangi teknikler en iyi sonucu verir? Pazarlamacılar, bir e-postadaki kullanışlı işlevsellikten ödün vermeden güzel bir e-posta tasarımını nasıl sağlayabilirler? Bu kılavuzda, mavi bağlantıların ne olduğuna ve kendi e-postalarınızı mahvetmelerini önlemenin en iyi yoluna bakacağız. Öğrenmeye hazır olun:

Mavi bağlantılar nedir?
Onları kaldırmalı mısın?
Her e-posta istemcisi için nasıl değiştirilir
Geri dönüş olarak Edge vakaları (ve Outlook için)

Kırık Bir E-postanın Anatomisi (2. Baskı)

Dikkat: Bozuk bir e-postanın başka suçluları da var

E-posta hataları sizi ürpertir mi? Mavi bağlantılar, e-postanızın bozuk görünmesinin yalnızca bir yoludur. E-postanızı neyin bozabileceğini ve doğru kalmanız için ipuçlarını ve püf noktalarını derinlemesine inceleyin.

Sık karşılaşılan sorunları ve düzeltmeleri ortaya çıkarın →

Mavi bağlantılar nedir?

Mavi bağlantılar tam olarak kulağa nasıl geliyorsa öyledir: Köprülerde ortak olan varsayılan mavi, altı çizili stili kullanan bir e-postadaki metin. E-posta pazarlamasında - özellikle mobil cihazlarda - bu mavi bağlantılar, insanlara bilgi kaydetme veya bilgi ile etkileşim kurma seçenekleri sağlamak için e-posta istemcileri tarafından otomatik olarak oluşturulur.

Son yıllarda, Apple Mail bu bağlantılardan bazılarının kullanım şeklini güncelledi ve artık onları maviye çevirmiyor. Adresler ve saatler için, iOS aygıtları orijinal stili korur ancak bunların tıklanabilir olduğunu belirtmek için noktalı bir alt çizgi ekler.

Bu, bazı mavi bağlantı sorunları için erişilebilirlik için ileri bir adım olsa da, tüm sorunları çözmez çünkü yalnızca adresler ve zamandan daha fazlası etkilenebilir.

Apple Mail'in çoğu iOS sürümü telefon numaralarını, URL'leri ve e-posta adreslerini maviye çevirir, ancak fiziksel adresleri ve saatleri orijinal stil renginde bırakır (aşağıdaki örnekte kırmızı).

iOS Apple Mail'deki mavi bağlantılar

iOS 13'te içerik hala bağlantılıdır, ancak orijinal stil rengi korunur:

Apple Mail iOS 13'te otomatik bağlantılar

Testlerimizde, bunlar bağlantılı içerik (mavi veya başka türlü) olmak için başlıca adaylardır:

adresler
Tarih
E-mail adresleri
Web sitesi URL'leri
Zamanlar
Telefon numaraları

Mavi bağlantıların faydaları: Kaldırmalı mı, kaldırmamalı mı?

Her durumda, bağlantı verilen bilgiler, ister kişi listelerine bir telefon numarası eklemek ister çevrimiçi bir adres aramak istesinler aboneler için değerli olabilir. Marka açısından can sıkıcı olsa da, mavi bağlantılar aslında kullanılabilirlik ve erişilebilirlik açısından harikadır ve kritik işlevsellik sağlar.

Bu, tartışmayı gündeme getiriyor: İlk etapta bu davranışı geçersiz mi kılmalıyız?

Bir yandan, e-posta tasarımlarımızın tutarlı ve markaya uygun kalmasını istiyoruz. Kendi stilimizi geçersiz kılan e-posta istemcileri, sürprizlere neden olabilir, paydaşları kızdırabilir ve erişilebilirlik sorunlarına neden olabilir. Öte yandan, insanlar bu işlevselliğe güvenebilir ve bir e-postadaki bilgiler üzerinde işlem yapabilmeyi bekleyebilirler.

Peki, e-posta tasarımcıları ne yapmalı?

Bu bağlantıların stillerini geçersiz kılmanın - ancak işlevselliğini değil - en iyi yaklaşım olduğunu düşünüyoruz. Mavi bağlantılar için ideal çözüm, otomatik olarak oluşturulan bağlantılar üzerinde işlem yapma yeteneğini korumalı, ancak işletim sistemi veya e-posta istemcisine değil, bu bağlantılara stil vermemize izin vermelidir.

Bazıları mavi, altı çizili stili geçersiz kılmanın çok ileri gittiğini iddia edebilir. Ancak, varsayılan davranış, mücadele edebileceğimiz ciddi erişilebilirlik sorunlarına sahiptir. Örneğin, adrese mavi bağlantıların eklendiği bu e-posta altbilgisine bakın:

e-posta alt bilgisindeki mavi bağlantı

Bu yaygın bir tasarımdır: Siyah bir arka plan üzerinde beyaz metin, odağın üstündeki içeriğe odaklanmak için küçük metin. Bilgi bağlandığında ve mavi stil uygulandığında kontrast son derece düşüktür. Görme bozukluğu olan veya güneşli bir ortamda loş bir ekran veya mobil cihaz kullanan mükemmel görüşe sahip herkes bu bilgiyi tüketmek için son derece zor bir zaman alacaktır. Yararlı bir özellik sinir bozucu bir deneyime dönüşür.

Tüm e-posta istemcileri de otomatik bağlamayı aynı şekilde işlemez. Mavi bağlantılar en yaygın suçlu olsa da, bazı müşteriler yazı tipi rengini korur ancak ince bir alt çizgi ekler. Bazı istemciler telefon numaralarını bağlar ancak adresleri bağlamaz. Tüm bu tutarsızlıklarla, yönetmek sinir bozucu olabilir.

Peki, e-posta tasarımcıları mavi bağlantılarla nasıl başa çıkabilir?

Otomatik bağlantı stilini geçersiz kılmanın en iyi yolu

Geçmişte farklı çözümlere bakmış olsak da – yaygın olarak bağlantılı metni yayılma alanları ve sınıflarla hedeflemek veya davranışı bozmak için bu metne görünmeyen karakterler eklemek gibi – bulduğumuz en iyi çözüm gömülü CSS'ye güvenmek. otomatik bağlantı stilini geçersiz kılmak için. Ardından, insanların içeriğin hâlâ tıklanabilir olduğunu bilmelerini sağlamak için alt çizgiler ve marka üzerindeki renkler gibi değerler ekleyin. Kullanılabilirlik ve erişilebilirlik için idealdir.

Bu yöntemin çok işi var. Yapabilirsiniz:

Metin üzerinde kendi stillerinizi belirleyin.
Farklı bağlantılar için farklı stiller kullanın; bu, bir e-postada tek bir stili zorlamaz.
E-posta istemcileri ve işletim sistemleri tarafından sunulan işlevselliği koruyun.
Stili kolayca koruyun.

Bu hem siz hem de aboneleriniz için bir kazan-kazan.

Tek uyarı? Farklı e-posta istemcileri, metni otomatik olarak bağlarken farklı şeyler yapar, bu nedenle stili geçersiz kılmak için birden çok CSS kuralına ihtiyacınız vardır.

E-postalarınızın mavi bağlantıları var mı?

E-posta istemcilerinin e-posta oluşturmalarını Litmus E-posta Önizlemeleri ile ne zaman güncellediklerini her zaman bilin. E-postalarınızı tüm popüler e-posta istemcilerinde ve cihazlarında önizleyin ve göndermeden önce hataları tespit edin.

Daha fazla bilgi edinin →

Apple Mail'de mavi bağlantıları geçersiz kılma

Metin etrafında bağlantılar oluştururken, Apple Mail bu bağlantılara normal href'in ötesinde ek özellikler ekler. Basit bir örnek aşağıdaki gibidir:

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

Geçmişte iOS mavi bağlantılarını ele almanın birçok yolunu ele aldık. Neyse ki, şimdi tek yapmanız gereken belirli niteliklere sahip öğeleri hedeflemek ve bu öğeler için stili geçersiz kılmak.

E-postanızın stil bloğuna, Apple tarafından eklenen bağlantıları hedeflemek için aşağıdakini ekleyin ve bu metni stili üst öğesinden devralmaya zorlayın:

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

İşlevsellik hala orada olacak, ancak metin, orijinal olarak amaçladığınız gibi biçimlendirilecek.

İnsanların içeriğin tıklanabilir olduğunu bilmesini sağlamak için, renk değerini mirastan markanızın tasarımına uyan bir onaltılık renk koduna değiştirin (örneğin açık mavi için #77d6fc) ve metin-dekorasyon değerini altı çizili olarak değiştirin.

Gmail'de mavi bağlantıları geçersiz kılma

Gmail, otomatik bağlantılı metne nitelikler eklemek yerine tamamen başka bir şey yapar. Bir e-postanın HTML'sini işlerken Gmail, doküman tipini bir alt çizgi öğesine (u) dönüştürür. Bunu bilerek, öğeleri yalnızca Gmail için hedeflemek için kendi HTML'nize bir kanca ekleyebilirsiniz. Bu genellikle gövde öğesine bir kimlik eklenerek yapılır.

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

Gmail mavi bağlantılarını düzeltmenin birkaç yolu olsa da, bizim önerimiz şudur: Gmail'de gövdede bulunan tüm bağlantıları, süreçte eklenen stilleri geçersiz kılarak stil etiketinizde aşağıdakilerle hedefleyin:

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

Yalnızca Gmail'e özel olarak uygulanan Apple Mail hilesiyle aynı CSS özelliklerini kullanır.

Abonelere otomatik bağlantıları tıklayabileceklerini açıkça göstermek için renk ve metin süsleme değerlerini güncellemeyi unutmayın. Yine, bazı insanlar seçeneği tercih ediyor, bu yüzden onlardan saklamayın.

Samsung Mail'deki mavi bağlantıları geçersiz kılma

Samsung Mail, Gmail'e benzer bir teknik kullanır. Ancak, bir öğeyi diğerine dönüştürmek yerine, Samsung Mail, "MessageViewBody" adlı e-postaya belirli bir kimlik ekleyecektir. Tıpkı Gmail'de olduğu gibi, bu kimliği ve stil bloğunuzdaki tüm bağlantıları hedefleyin:

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

Yine, öncekiyle aynı CSS özellikleri kullanılır. Ve markanızın renk değerini değiştirmek ve tasarım kılavuzunuzun bir parçasıysa bağlantının altını çizmek isteyeceksiniz.

Şimdi hep beraber

Yukarıdaki tüm CSS seçicilerini tek bir kurala zincirlemek uygun olsa da, Gmail, öznitelik seçicileri kullanarak CSS'yi kaldırır, böylece düzeltme Gmail'den kaldırılarak mavi bağlantıların serbestçe dolaşmasına izin verilir.

Bu nedenle, üç kuralı da ayrı tutmalısınız. İyi haber şu ki, e-posta şablonlarına eklendikten sonra mavi bağlantıları çoğu e-posta istemcisinden kaldırmak için kodunuzda ek bir şey yapmanız gerekmez.

Birlikte, HTML'niz şöyle görünebilir:

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

Hiçbir şey yapmadıysanız (düzeltme olmadan), kendi stilinizi eklemeden (düzeltmeyle) varsayılan stili kaldırdıysanız ve varsayılan stili kendi stilinizle (stil düzeltmeyle) değiştirdiyseniz, bunun nasıl görünebileceğine dair bir örnek:

düzeltmeden	düzeltme ile	tarz düzeltme ile

Her ihtimale karşı kodlayıcı (ve Outlook) için uç vakaları işleme

Bildiğiniz gibi, konu e-posta tasarımı olduğunda her zaman uç durumlar vardır. Mavi bağlantılar farklı değil. Bazı e-posta istemcileri metni otomatik olarak bağlamaya devam eder. Ve e-posta uygulamaları 1-2 günde bir değiştiğinden, yukarıdaki üç istemci, bu düzeltmeleri bozan bir güncellemeyi çok kolay bir şekilde sunabilir.

Bu uç durumlar için farklı bir yaklaşım uygulayabilirsiniz.

Bu teknik, otomatik bağlantı adaylarını daha sonra bir e-postanın başlığında CSS aracılığıyla hedeflenen bir öğeyle sarmalamayı içerir. Kapsayıcı öğesi, hedefleme için uygulanan bir sınıfa sahiptir. Tasarımcılar, x-apple-data-dedektörleri hack'ini kullanabileceklerini anlamadan önce, bu numara Apple Mail mavi bağlantıları için yaygın olarak kullanılıyordu, bu nedenle sınıf için yaygın olarak "appleLinks" gibi bir şey göreceksiniz, ancak herhangi bir şey olabilir.

Örneğimizde, “blueLinks” sınıfını kullanacağız:

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

E-posta istemcileri bu öğeye bir bağlantı ekleyeceğinden, onu e-postanızın stil bloğundaki CSS'de hedefleyin ve belirli CSS özelliklerini geçersiz kılın:

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

Bu çok sağlam bir çözüm olabilir, ancak daha fazla bakım gerektirir. Bir e-postanın içeriği sık sık değişebileceğinden, bu sınıfların nerede uygulandığını takip etmek ve tüm şüpheli metinlerin hesaba katılmasını sağlamak zaman alabilir ve hatalara açık olabilir.

Bu nedenle, yalnızca testler buna ihtiyaç olduğunu gösterdiğinde sınıf tabanlı çözüme geri dönerek, genellikle yukarıdaki üç gömülü CSS çözümünü kullanmanızı öneririz.

Outlook masaüstü istemcileri için düzeltmeniz

Outlook mobil uygulamaları, yukarıdaki uç durum çözümüyle düzeltilebilir, ancak bu düzeltme Outlook masaüstü istemcileriyle çalışmaz.

Outlook masaüstü istemcileri için, URL'ler ve e-posta adresleri, onları <a> etiketlerine sarmazsanız her zaman varsayılan renkler olarak görünür. Çoğu durumda, bunların sunulan web sayfasına veya e-posta adresine bağlantı vermesini istersiniz, bu nedenle, <a> etiketini href özniteliğiyle eklemek ve bir bağlantı olarak biçimlendirmek iyi bir abone deneyimi sağlar.

Bağlantı gibi görünmesini istemiyorsanız, yine de <a> etiketini ekleyebilir ve kopyanın geri kalanı gibi görünecek şekilde biçimlendirebilirsiniz.

Uç durumlarda, URL'nin normal kopya gibi görünmesine ve bağlantılı olmamasına ihtiyaç duyan bir müşteriniz olabilir. Bu durumda, bunu başarmanın tek yolu, bağlantı boyunca çok sayıda sıfır genişlikli birleştirici eklemektir:

www.litmus. com w&zwj;ww&zwj;.&zwj;litm&zwj;us olur.&zwj;com

Bu en güzel şey değil, ama işe yarıyor. Ancak, URL'yi kopyalayıp yapıştırmaya çalışırlarsa aboneleriniz arasında sürtüşmelere neden olabilir. Bazen &zwj; farklı programlara yapıştırıldığında garip görünüyor veya müdahale ediyor. Örneğin, Firefox'ta adres çubuğuna yukarıda olduğu gibi kodlandığında URL'yi kopyalayıp yapıştırmak, sizi doğrudan Litmus.com'a götürmek yerine bir Google aramasıyla sonuçlanır:

sıfır genişlikli birleştiricilere sahip bir bağlantıyı kopyalayıp tarayıcıya yapıştırma

Bu yüzden, son çare-istemci-nedeni dinlemeyecek-son çare olarak adlandırıyorum.

Bu düzeltme e-posta adresleri için çalışmıyor ve deneyimlerime göre, her e-posta servis sağlayıcısı (ESP) için çalışan, stili belirlenmemiş, tıklanamaz bir e-posta adresi oluşturmak için bir çözüm bulamadım. Bazı ESP'ler için, bir href niteliği olmayan bir <a> etiketi veya bir <a href=”#”> kullanabilirsiniz. Ancak bazı ESP'ler bu hack'lerle bir e-posta göndermenize izin vermez.

İşlevi değil stili düzeltin

Mükemmel piksel tasarımı için mavi otomatik bağlantıları kaldırmak isteyebilirsiniz, ancak e-postanızın kim için olduğunu unutmayın: aboneleriniz. E-posta istemcileri, adresler, tarihler ve telefon numaraları gibi şeyleri tıklanabilir hale getirme konusunda iyi niyetlidir ve birçok kişi bunları bu şekilde kullanmayı sever ve sabırsızlıkla bekler. Onları saklama. Bunun yerine, bunları e-postanızın tasarımına uyacak şekilde dönüştürün. Hem paydaşlarınızı hem de abonelerinizi mutlu edeceksiniz.

Litmus ile markaya özel, hatasız e-postalar oluşturun

100'den fazla e-posta istemcisi, uygulaması ve cihazında e-postalarınızın nasıl göründüğüne bakın (artık mavi bağlantı yok, değil mi?). Bozuk e-postalara elveda deyin. Vay!

Ücretsiz denemenizi başlatın →

İlk olarak 2 Temmuz 2019'da Jason Rodriguez tarafından yayınlandı. En son 23 Temmuz 2021'de güncellendi.