Comment réparer les liens bleus de Gmail pour un rêve d'e-mail devenu réalité

Publié: 2021-07-16

Frustré par les liens bleus apparemment aléatoires et hors marque lors du contrôle qualité de votre e-mail par ailleurs parfait dans Gmail ? Été là. C'est fait. La bonne nouvelle? Vous n'avez rien fait de mal. Depuis 2017, Gmail transforme automatiquement une partie de votre copie, comme les adresses e-mail, les numéros de téléphone, les adresses physiques et les heures, en éléments cliquables, les rendant parfois bleus. Et comme le deuxième client de messagerie le plus populaire avec plus de 30% des e-mails s'ouvre, selon nos données, vous ne pouvez pas ignorer Gmail.

Malgré ce que sont les liens bleus et pourquoi, vous avez besoin que votre e-mail ressemble à ce qui a été approuvé. Ou au moins avoir les liens sur la marque. Heureusement, supprimer le style par défaut n'est pas si difficile. Nous vous expliquerons comment les liens bleus apparaissent et ce que vous pouvez faire pour les modifier afin qu'ils correspondent à la conception de votre e-mail. Tout en conservant les liens faciles à utiliser pour votre audience Gmail.

Vos e-mails ont-ils des liens bleus ?

Sachez toujours quand les clients de messagerie mettent à jour le rendu de leurs e-mails avec Litmus Email Previews. Prévisualisez vos e-mails dans tous les clients et appareils de messagerie courants, y compris Gmail, et repérez les erreurs avant de les envoyer.

En savoir plus →

Gardez l'accessibilité à l'esprit

Tout d'abord, il est important de se rappeler que les liens bleus servent un objectif important. Ils permettent à vos abonnés d'agir plus facilement sur votre courrier électronique, par exemple, pour accéder à un emplacement que vous avez inclus ou pour vous appeler rapidement. Les deux sont parfaits pour la convivialité et l'accessibilité.

Cependant, ces liens automatiques peuvent avoir le style par défaut : souligné et bleu. Cela peut entrer en conflit avec la conception de votre e-mail et même rendre votre e-mail moins accessible si les liens sont sur une couleur d'arrière-plan qui ne contraste pas bien avec eux.

bas de page — Le lien bleu ici est à peine perceptible

Ainsi, vous souhaiterez conserver la fonctionnalité du lien, mais le styler de manière à ce qu'il corresponde mieux à la conception de votre e-mail et soit lisible.

L'anatomie d'un e-mail cassé (2e édition)

Attention : il y a d'autres coupables d'un e-mail cassé

Les erreurs de courrier électronique vous font-elles frissonner ? Les liens bleus ne sont qu'une des façons dont votre e-mail peut sembler brisé. Plongez profondément dans ce qui peut casser votre courrier électronique et les trucs et astuces pour rester fidèle.

Révéler les problèmes courants et les correctifs →

Trois façons de changer la couleur du lien bleu dans Gmail

Pour changer la couleur du lien bleu, vous devez comprendre pourquoi cela se produit. Lorsque Gmail détecte une adresse ou un numéro de téléphone dans un e-mail, il ajoute automatiquement une déclaration de style supplémentaire, qui met en forme tout lien dans l'e-mail en bleu s'il n'a pas de styles en ligne attachés :

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

La classe .ii fait référence à la classe attribuée au div qui contient l'intégralité de l'e-mail dans Gmail. Le a[href] est un sélecteur d'attribut CSS. Cela déclare que tout lien dans la classe .ii doit être de couleur bleue.

Les adresses et les numéros de téléphone ne sont généralement pas liés dans les e-mails. Cependant, Gmail les reconnaît et les transforme en lien, que cela vous plaise ou non. Étant donné que ces liens sont créés à la volée, aucun style en ligne ne leur est attaché et, par conséquent, le style par défaut ci-dessus est utilisé.

Il existe trois méthodes que vous pouvez utiliser pour empêcher les liens de virer au bleu, selon que vous souhaitez que ces liens soient identiques ou différents des autres liens de votre e-mail.

Option 1 : utiliser la méthode <span>

La méthode <span> est la technique la plus simple pour empêcher les numéros de téléphone et les adresses de devenir bleus dans Gmail. C'est parfait si vous souhaitez les styliser différemment de vos autres liens tout en gardant leur fonctionnalité. Voici comment:

Enveloppez le numéro de téléphone ou l'adresse dans un <span></span>
Donnez une classe au <span>, par exemple : <span class="contact"></span>
Déclarez la classe dans la section <style> de votre email pour styliser le numéro de téléphone ou l'adresse comme vous le souhaitez
Profit!

Voici un exemple du code HTML où l'adresse apparaît dans l'e-mail :

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

Et voici un exemple de déclaration de style pour la classe « contact » dans le bloc <style> du <head> de votre e-mail où nous définissons le lien comme étant noir (#000000) et souligné :

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

Changez la couleur noire dans notre exemple de code en remplaçant le #000000 par un code hexadécimal de couleur qui correspond à votre marque. Si vous ne voulez pas que votre lien soit souligné, remplacez le soulignement de votre code par aucun.

Créer un <span> avec un nom de classe autour de l'adresse ou du numéro de téléphone vous donne quelque chose à cibler en utilisant CSS. Le simple fait de cibler le <span> lui-même ne stylisera pas le lien. Il ne stylisera que le texte non lié , tandis que le lien à l'intérieur de <span> aura toujours le style bleu par défaut. Ainsi, pour cibler le lien à l'intérieur de l'étendue, la déclaration de style inclut le nom de la classe ainsi que « a ».

C'est particulièrement utile pour les numéros de téléphone si vous souhaitez ajouter <a href="tel:XXX-XXXX"> directement aux numéros de téléphone mais que vous ne voulez pas que le numéro de téléphone essaie d'ouvrir une application téléphonique sur le bureau. Et puis vous devez masquer et afficher le contenu pour le bureau par rapport au mobile. Évitez simplement les maux de tête et profitez du fait qu'un client de messagerie fait enfin quelque chose pour vous aider.

Option 2 : Remplacer tous les styles de liens

Une autre option consiste à définir votre propre style par défaut qui s'appliquera à tous les liens d'un e-mail. Cette option est parfaite si vous souhaitez que vos liens d'adresse ou de numéro de téléphone ressemblent à vos autres liens tout en conservant les fonctionnalités que Gmail leur offre.

Ajoutez cette déclaration de style spécifique à Gmail à votre bloc <style> dans le <head> de votre e-mail, comme ceci :

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

Ajoutez ensuite l'ID « body » à la balise body :

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

Le soulignement « u » est une méthode de ciblage pour Gmail. Il convertit le doctype en une balise de soulignement, et Gmail est le seul client qui se comporte de cette façon. Ainsi, l'utilisation de la balise de soulignement avec le sélecteur de frère adjacent d'un div ou d'un identifiant/une classe sur ce div en CSS est une méthode unique pour cibler uniquement les clients Gmail (du moins pour le moment). Dans cet exemple, nous avons utilisé l'identifiant « body ».

Avec cette méthode, si vous souhaitez que les liens de votre e-mail aient des styles légèrement différents, cela devra être ajouté en ligne à ces liens spécifiques, car cette technique ci-dessus stylisera tous les liens tels qu'ils ont été définis dans la déclaration de style.

Cependant, il y a une petite mise en garde avec cette méthode.

Cela ne fonctionne pas lorsque les utilisateurs de Gmail désactivent les images par défaut, puis les activent. Cela est dû à un bogue dans Gmail qui modifie incorrectement le style une fois les images activées. Le développeur d'e-mails Remi Parmentier a plus de détails sur ce bogue.

Option 3 : ajoutez la balise <a> et créez vous-même des liens

En liant de manière proactive les éléments que Gmail lierait automatiquement, vous avez plus de contrôle sur leurs styles et leurs couleurs. Cette option est parfaite si vous souhaitez également modifier l'endroit où le contenu renvoie vers , en Peut-être avez-vous une page de contact sur votre site Web vers laquelle vous préférez amener les abonnés au lieu de leur demander d'ouvrir automatiquement l'application de navigation de leur téléphone ou de vous appeler directement directement.

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

Dans l'exemple ci-dessus, l'adresse physique est stylisée en gris sans soulignement et est liée à la page de contact de notre site Web. Cela empêchera Gmail d'appliquer son style et ses fonctionnalités par défaut.

Au revoir, les liens bleus Gmail

Avec l'une ou l'autre de nos trois méthodes, les liens bleus ne perturberont plus la conception de votre e-mail et ne lui donneront plus l'impression d'être cassés dans Gmail. Et c'est super, car les e-mails cassés peuvent nuire à l'engagement et aux conversions (et vous ne le voulez certainement pas).

Vous avez des questions sur nos méthodes ? Ou avez-vous une autre solution à partager? Faites-nous savoir dans les commentaires ci-dessous.

Créez des e-mails conformes à la marque et sans erreur avec Litmus

Découvrez à quoi ressemblent vos e-mails (plus de liens bleus, n'est-ce pas ?) sur plus de 90 clients de messagerie, applications et appareils, y compris Gmail. Dites adieu aux e-mails cassés. Ouf!

Commencez votre essai gratuit →

Publié à l'origine le 13 octobre 2017, par Jaina Mistry. Dernière mise à jour le 16 juillet 2021.

Partagez, merci!

Ce que vous devez savoir pour gérer les 3 types d'abonnés aux e-mails inactifs

Apprenez à approcher les abonnés inactifs en fonction de leur type d'abonnés aux e-mails inactifs afin de créer une stratégie de réengagement efficace.
Lire la suite

Exemples et stratégies de marketing par e-mail de nos célibataires préférés

Les e-mails de la Journée des célibataires se répandent dans le monde entier (pas seulement en Chine). Consultez 8 exemples d'e-mails pour inspirer votre campagne ainsi que des stratégies pour commencer à planifier.
Lire la suite

Matrice holistique de mesures des e-mails : voyez-vous l'ensemble ?

Visualisez l'ensemble des performances du marketing par e-mail avec des métriques d'e-mail holistiques à court et à long terme. Et créez des campagnes plus performantes dès aujourd'hui.
Lire la suite

Comment éliminer les e-mails du Black Friday et du Cyber Monday (BF/CM)

Démarquez-vous et convertissez les abonnés avec ces stratégies éprouvées pour les e-mails du Black Friday Cyber Monday et des exemples parfaits dont vous pouvez vous inspirer.
Lire la suite

Rendu des e-mails Outlook : comment j'ai appris à ne plus m'inquiéter et à aimer Outlook

Vous vous demandez pourquoi vos e-mails sont mauvais dans Outlook ? Découvrez les problèmes de rendu et d'affichage des e-mails auxquels vous pouvez être confronté et comment les résoudre pour la perfection des e-mails.
Lire la suite