Bir E-posta Rüyası İçin Gmail Mavi Bağlantıları Nasıl Gerçekleşir?

Yayınlanan: 2021-07-16

Gmail'de aksi takdirde mükemmel e-postanızı QA test ederken görünüşte rastgele, marka dışı mavi bağlantılardan bıktınız mı? Orada bulunmak. Bunu yaptım. Güzel haberler? Yanlış bir şey yapmadın. 2017'den beri Gmail, e-posta adresleri, telefon numaraları, fiziksel adresler ve saatler gibi kopyalarınızın bir kısmını otomatik olarak tıklanabilir öğelere, bazen de maviye dönüştürür. Ve e-postaların %30'dan fazlasının açıldığı ikinci en popüler e-posta istemcisi olarak, verilerimize göre Gmail'i göz ardı edemezsiniz.

Mavi bağlantıların ne olduğuna ve neden olduğuna rağmen, onaylanana benzemek için e-postanıza ihtiyacınız var. Veya en azından bağlantıların marka üzerinde olmasını sağlayın. Neyse ki, varsayılan stili kaldırmak o kadar da zor değil. Mavi bağlantıların nasıl oluştuğunu ve bunları e-postanızın tasarımına uyacak şekilde değiştirmek için neler yapabileceğinizi anlatacağız. Tüm bunlar, Gmail hedef kitleniz için kullanımı kolay bağlantıları korurken.

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ı Gmail dahil tüm popüler e-posta istemcilerinde ve cihazlarda önizleyin ve göndermeden önce hataları tespit edin.

Daha fazla bilgi edinin →

Erişilebilirliği aklınızda bulundurun

İlk olarak, mavi bağlantıların önemli bir amaca hizmet ettiğini hatırlamak önemlidir. Abonelerinizin e-postanıza göre hareket etmesini (örneğin, eklediğiniz bir konuma gitmesini veya sizi hızlı aramasını) daha uygun hale getirirler. Hem kullanılabilirlik hem de erişilebilirlik açısından harika.

Ancak, bu otomatik bağlantılar varsayılan stille gelebilir: altı çizili ve mavi. Bu, e-posta tasarımınızla çelişebilir ve hatta bağlantılar, onlarla iyi kontrast oluşturmayan bir arka plan rengindeyse e-postanızı daha az erişilebilir hale getirebilir.

altbilgi — Buradaki mavi bağlantı zar zor fark ediliyor

Bu nedenle, bağlantının işlevselliğini korumak, ancak e-posta tasarımınıza daha iyi uyacak ve okunaklı olacak şekilde biçimlendirmek isteyeceksiniz.

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 →

Gmail'de mavi bağlantı rengini değiştirmenin üç yolu

Mavi bağlantı rengini değiştirmek için bunun neden olduğunu anlamalısınız. Gmail bir e-postada bir adres veya telefon numarası bulduğunda, e-postadaki herhangi bir satır içi stili eklenmemişse, bağlantıyı mavi olarak biçimlendiren ek bir stil bildirimini otomatik olarak ekler:

.ii a[href] { color: #15c; }

.ii sınıfı, Gmail'de tüm e-postayı içeren div'e verilen sınıfı ifade eder. a[href] bir CSS nitelik seçicisidir. Bu, .ii sınıfındaki herhangi bir bağlantının mavi renkte olması gerektiğini bildirir.

Adresler ve telefon numaraları, e-postalarda yaygın olarak bağlantılı değildir. Ancak Gmail onları tanır ve beğenseniz de beğenmeseniz de bir bağlantıya dönüştürür. Bu bağlantılar anında oluşturulduğundan, bunlara eklenmiş satır içi stilleri yoktur ve bu nedenle yukarıdaki varsayılan stil kullanılır.

Bu bağlantıların e-postanızdaki diğer bağlantılarla aynı mı yoksa farklı mı görünmesini istediğinize bağlı olarak bağlantıların maviye dönmesini durdurmak için kullanabileceğiniz üç yöntem vardır.

Seçenek 1: <span> yöntemini kullanın

<span> yöntemi, Gmail'de telefon numaralarının ve adreslerin maviye dönmesini önlemenin en basit tekniğidir. İşlevlerini korurken onları diğer bağlantılarınızdan farklı bir şekilde stilize etmek istiyorsanız mükemmeldir. İşte nasıl:

Telefon numarasını veya adresi bir <span></span> içine sarın.
<span> öğesine bir sınıf verin, örneğin: <span class=”contact”></span>
Telefon numarasını veya adresi istediğiniz gibi stilize etmek için e-postanızın <style> bölümünde sınıfı bildirin
Kâr!

Adresin e-postada göründüğü HTML örneğini burada bulabilirsiniz:

<span class="contact">675 Massachusetts Ave.<br />Cambridge, MA 02139, USA</span>

Ve burada, e-postanızın <head> bölümündeki <style> bloğundaki "contact" sınıfı için, bağlantıyı siyah (#000000) olarak ayarladığımız ve altı çizidiğimiz örnek bir stil bildirimi:

<style type="text/css">
    .contact a {color: #000000!important; text-decoration: underline!important;}
</style>

Örnek kodumuzdaki siyah rengi, #000000'ı markanıza uyan bir renk onaltılı koduyla değiştirerek değiştirin. Bağlantınızın altının çizilmesini istemiyorsanız, kodunuzdaki alt çizgiyi yok olarak değiştirin.

Adres veya telefon numarası çevresinde bir sınıf adıyla bir <span> oluşturmak, CSS kullanarak hedeflemeniz için size bir şey verir. Yalnızca <span> öğesinin kendisini hedeflemek bağlantıya stil kazandırmaz. Yalnızca bağlantısız metni biçimlendirirken, <span> içindeki bağlantı hala varsayılan mavi stile sahip olacaktır. Bu nedenle, yayılma alanı içindeki bağlantıyı hedeflemek için stil bildirimi, sınıf adının yanı sıra “a”yı da içerir.

Bu, özellikle <a href=”tel:XXX-XXXX”> öğesini doğrudan telefon numaralarına eklemek istiyorsanız, ancak telefon numarasının masaüstünde bir telefon uygulamasını açmaya çalışmasını istemiyorsanız, telefon numaraları için harikadır. Ardından, masaüstü ve mobil için içeriği gizlemek ve göstermek zorunda kalırsınız. Sadece baş ağrısını atlayın ve bir e-posta istemcisinin sonunda size yardımcı olacak bir şeyler yaptığı gerçeğinden yararlanın.

Seçenek 2: Tüm bağlantı stillerini geçersiz kıl

Başka bir seçenek de, bir e-postadaki tüm bağlantılara uygulanacak kendi varsayılan stilinizi belirlemektir. Adres veya telefon numarası bağlantılarınızın Gmail'in sağladığı işlevselliği korurken diğer bağlantılarınızla aynı görünmesini istiyorsanız bu seçenek mükemmeldir.

Bu Gmail'e özgü stil bildirimini, e-postanızın <head> bölümündeki <style> bloğunuza şu şekilde ekleyin:

<style type="text/css">
    u + #body a {
    	  color: inherit;
    	  text-decoration: none;
    	  font-size: inherit;
    	  font-family: inherit;
    	  font-weight: inherit;
    	  line-height: inherit;
    }
</style>

Ardından, gövde etiketine "gövde" kimliğini ekleyin:

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

Altı çizili "u", Gmail için bir hedefleme yöntemidir. Belge türünü bir alt çizgi etiketine dönüştürür ve Gmail bu şekilde davranan tek istemcidir. Bu nedenle, CSS'de o div üzerinde bir div veya id/sınıfın bitişik kardeş seçicisiyle altı çizili etiketi kullanmak, yalnızca Gmail istemcilerini (en azından şimdilik) hedeflemenin benzersiz bir yöntemidir. Bu örnekte, bir "vücut" kimliği kullandık.

Bu yöntemle, e-postanızdaki bağlantıların biraz farklı stillere sahip olmasını istiyorsanız, bunun bu belirli bağlantılara satır içi olarak eklenmesi gerekecektir, çünkü yukarıdaki bu teknik, stil bildiriminde tanımlandığı gibi tüm bağlantılara stil verecektir.

Ancak, bu yöntemle küçük bir uyarı var.

Gmail kullanıcılarının varsayılan olarak resimleri kapalıyken ve ardından etkinleştirdiğinde çalışmaz. Bunun nedeni, Gmail'de, resimler etkinleştirildikten sonra stili uygun olmayan şekilde değiştiren bir hatadır. E-posta geliştiricisi Remi Parmentier, bu hatayla ilgili daha fazla ayrıntıya sahip.

3. Seçenek: <a> etiketini ekleyin ve bağlantılarını kendiniz yapın

Gmail'in otomatik olarak bağlayacağı öğeleri proaktif olarak bağlayarak, stilleri ve renkleri üzerinde daha fazla kontrole sahip olursunuz. Bu seçenek, Gmail'in varsayılan işlevini kaldırarak içeriğin bağlantı verdiği yeri de değiştirmek istiyorsanız mükemmeldir.

Belki de web sitenizde, abonelerin telefonlarının navigasyon uygulamasını otomatik olarak açmasını veya anında sizi doğrudan aramasını sağlamak yerine almayı tercih edeceğiniz bir iletişim sayfanız vardır.

<a style="color:#4B525D; text-decoration:none;" href="https://www.litmus.com/contact-us/">675 Massachusetts Ave.<br />Cambridge, MA 02139, USA</a>

Yukarıdaki örnekte, fiziksel adres, altı çizili olmayan gri bir renge göre biçimlendirilmiştir ve web sitemizin iletişim sayfasına bağlanmıştır. Bu, Gmail'in varsayılan stilini ve işlevini uygulamasını engeller.

Güle güle, Gmail mavi bağlantıları

Üç yöntemimizden herhangi birinde, mavi bağlantılar artık e-postanızın tasarımını bozmayacak ve Gmail'de bozuk görünmesine neden olmayacak. Ve bu harika - çünkü bozuk e-postalar etkileşime ve dönüşümlere zarar verebilir (ve bunu kesinlikle istemezsiniz).

Yöntemlerimiz hakkında sorularınız mı var? Veya paylaşacak başka bir çözümünüz var mı? Aşağıdaki yorumlarda bize bildirin.

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

Gmail dahil 90'dan 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 13 Ekim 2017'de Jaina Mistry tarafından yayınlandı. En son 16 Temmuz 2021'de güncellendi.