Frustré par les liens bleus dans les e-mails ? Les conquérir pour de bon

Nous avons couvert de nombreuses façons de gérer les liens bleus iOS dans le passé. Heureusement, tout ce que vous avez à faire maintenant est de cibler des éléments avec des attributs spécifiques et de remplacer le style de ces éléments.

Dans le bloc de style de votre e-mail, ajoutez ce qui suit pour cibler les liens ajoutés par Apple et forcez ce texte à hériter du style de son élément parent :

La fonctionnalité sera toujours là, mais le texte sera stylisé comme vous l'aviez prévu à l'origine.

Pour vous assurer que les gens savent que le contenu est cliquable, modifiez la valeur de la couleur d'hériter en un code de couleur hexadécimal qui correspond au design de votre marque (par exemple, #77d6fc pour le bleu clair) et modifiez la valeur de la décoration de texte en souligné.

Ignorer les liens bleus dans Gmail

Au lieu d'ajouter des attributs au texte lié automatiquement, Gmail fait tout autre chose. Lors du traitement du code HTML d'un e-mail, Gmail convertit le doctype en élément de soulignement (u). Sachant cela, vous pouvez ensuite ajouter un crochet dans votre propre code HTML pour cibler des éléments uniquement pour Gmail. Cela se fait généralement en ajoutant un ID à l'élément body.

Bien qu'il existe plusieurs façons de corriger les liens bleus de Gmail, voici notre recommandation : ciblez tous les liens contenus dans le corps de Gmail avec les éléments suivants dans votre balise de style, en remplaçant tout style ajouté au cours du processus :

Il utilise exactement les mêmes propriétés CSS que l'astuce Apple Mail, spécifiquement appliquée à Gmail.

N'oubliez pas de mettre à jour les valeurs de couleur et de décoration de texte pour indiquer clairement aux abonnés qu'ils peuvent cliquer sur les liens automatiques. Encore une fois, certaines personnes préfèrent l'option, alors ne la leur cachez pas.

Remplacement des liens bleus dans Samsung Mail

Samsung Mail utilise une technique similaire à Gmail. Au lieu de convertir un élément en un autre, cependant, Samsung Mail ajoutera un identifiant spécifique à l'e-mail appelé "MessageViewBody". Tout comme avec Gmail, ciblez cet identifiant et tous les liens contenus dans votre bloc de style :

Encore une fois, les mêmes propriétés CSS sont utilisées qu'avant. Et vous voudrez échanger contre la valeur de couleur de votre marque et souligner le lien si cela fait partie de votre guide de conception.

Tous ensemble maintenant

Bien qu'il soit pratique de regrouper tous les sélecteurs CSS ci-dessus en une seule règle, Gmail supprime CSS à l'aide de sélecteurs d'attributs, de sorte que le correctif serait supprimé de Gmail, permettant aux liens bleus de se déplacer librement.

Par conséquent, vous devez séparer les trois règles. La bonne nouvelle est qu'une fois qu'ils ont été ajoutés aux modèles d'e-mails, vous n'avez rien d'autre à faire dans votre code pour supprimer les liens bleus de la plupart des clients de messagerie.

Combiné, votre code HTML pourrait ressembler à ceci :

Voici un exemple de ce à quoi cela pourrait ressembler si vous ne faisiez rien (sans correctif), supprimiez le style par défaut sans ajouter le vôtre (avec correctif) et remplaciez le style par défaut par le vôtre (avec correctif stylisé) :

Sans correctif	Avec correctif	Avec correctif de style

Gestion des cas extrêmes pour le codeur juste au cas (et Outlook)

Comme vous le savez peut-être, il existe toujours des cas extrêmes en matière de conception d'e-mails. Les liens bleus ne sont pas différents. Certains clients de messagerie lieront toujours automatiquement le texte. Et comme les applications de messagerie changent tous les 1 à 2 jours, les trois clients ci-dessus pourraient très facilement introduire une mise à jour qui interrompt ces correctifs.

Pour ces cas extrêmes, vous pouvez adopter une approche différente.

Cette technique consiste à envelopper les candidats à liaison automatique avec un élément qui est ensuite ciblé via CSS dans l'en-tête d'un e-mail. L'élément conteneur a une classe appliquée pour le ciblage. Avant que les concepteurs ne découvrent qu'ils pouvaient utiliser le hack x-apple-data-detectors, cette astuce était couramment utilisée pour les liens bleus Apple Mail, vous verrez donc généralement quelque chose comme "appleLinks" utilisé pour la classe, mais cela peut être n'importe quoi.

Dans notre exemple, nous utiliserons la classe « blueLinks » :

Étant donné que les clients de messagerie ajouteront un lien dans cet élément, ciblez-le dans le CSS du bloc de style de votre e-mail et remplacez les propriétés CSS spécifiques :

Cela peut être une solution très robuste, mais elle nécessite plus d'entretien. Étant donné que le contenu d'un e-mail peut changer fréquemment, le suivi de l'application de ces classes et la prise en compte de tout le texte suspect peuvent prendre beaucoup de temps et être source d'erreurs.

C'est pourquoi nous recommandons généralement d'utiliser les trois solutions CSS intégrées ci-dessus, en revenant à la solution basée sur les classes uniquement lorsque les tests en montrent le besoin.

Votre correctif pour les clients de bureau Outlook

Les applications mobiles Outlook peuvent être corrigées avec la solution Edge Case ci-dessus, mais ce correctif ne fonctionnera pas avec les clients de bureau Outlook.

Pour les clients de bureau Outlook, les URL et les adresses e-mail apparaîtront toujours comme couleurs par défaut si vous ne les enveloppez pas dans les balises <a>. Dans la plupart des cas, vous souhaiterez que ceux-ci renvoient à la page Web ou à l'adresse e-mail qui est présentée. Par conséquent, l'ajout de la balise <a> avec l'attribut href et le style comme un lien permettent une bonne expérience d'abonné.

Si vous ne voulez pas qu'il ressemble à un lien, vous pouvez toujours ajouter la balise <a> et lui donner un style pour qu'il ressemble au reste de la copie.

Dans les cas extrêmes, vous pouvez avoir un client qui a besoin que l'URL ressemble à une copie normale et ne soit pas liée. Dans ce cas, la seule façon d'y parvenir est d'ajouter de nombreux menuisiers de largeur zéro tout au long du lien :

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

Ce n'est pas la plus jolie des choses, mais ça marche. Cependant, cela peut causer des frictions avec vos abonnés s'ils essaient de copier et coller l'URL. Parfois, le &zwj; apparaissent bizarres ou interfèrent lorsqu'ils sont collés dans différents programmes. Par exemple, copier et coller l'URL lorsqu'elle est codée telle qu'elle est ci-dessus dans la barre d'adresse de Firefox entraîne une recherche Google au lieu de vous diriger directement vers Litmus.com :

C'est donc ce que j'appelle un correctif de dernier recours au fond du seau, le client n'écoute pas la raison.

Ce correctif ne fonctionne pas pour les adresses e-mail, et d'après mon expérience, je n'ai pas trouvé de solution pour créer une adresse e-mail sans style et non cliquable qui fonctionne pour chaque fournisseur de services de messagerie (ESP). Pour certains ESP, vous pouvez utiliser une balise <a> sans attribut href ou <a href="#">. Mais certains ESP ne vous permettront pas d'envoyer un e-mail avec ces hacks.

Corrigez le style, pas la fonctionnalité

Bien que vous souhaitiez peut-être supprimer les liens automatiques bleus pour un design parfait au pixel près, rappelez-vous à qui est destiné votre e-mail : vos abonnés. Les clients de messagerie ont de bonnes intentions de rendre cliquables des éléments tels que les adresses, les dates et les numéros de téléphone, et de nombreuses personnes les aiment et ont hâte de les utiliser de cette façon. Ne les cache pas. Au lieu de cela, transformez-les pour qu'ils correspondent à la conception de votre e-mail. Vous ferez le bonheur de vos parties prenantes et de vos abonnés.

Créez des e-mails conformes à la marque et sans erreur avec Litmus Voyez à quoi ressemblent vos e-mails (plus de liens bleus, n'est-ce pas ?) sur plus de 100 clients de messagerie, applications et appareils. Dites adieu aux e-mails cassés. Ouf! Commencez votre essai gratuit →

Publié à l'origine le 2 juillet 2019, par Jason Rodriguez. Dernière mise à jour le 23 juillet 2021.