Frustriert von blauen Links in E-Mails? Erobere sie für immer

Veröffentlicht: 2021-07-24

Blaue Links in E-Mails: Sie sind ein hilfreiches Usability-Feature, bereiten E-Mail-Marketern jedoch viel zu oft Kopfschmerzen, die durchdachte, markenspezifische Kampagnen entwerfen möchten.

Im Laufe der Jahre haben wir verschiedene Möglichkeiten zum Umgang mit blauen Links in HTML-E-Mails gesehen, von einfach bis komplex.

Aber welche Techniken funktionieren am besten? Und wie können Marketer ein schönes E-Mail-Design sicherstellen, ohne auf nützliche Funktionen in einer E-Mail zu verzichten? In diesem Leitfaden sehen wir uns an, was blaue Links sind und wie Sie am besten verhindern, dass sie Ihre eigenen E-Mails ruinieren. Machen Sie sich bereit zu lernen:

Was sind blaue Links?
Sollten Sie sie entfernen?
So ändern Sie sie für jeden E-Mail-Client
Edge-Cases als Fallback (und für Outlook)

Die Anatomie einer kaputten E-Mail (2. Auflage)

Achtung: Es gibt noch andere Schuldige für eine kaputte E-Mail

Machen E-Mail-Fehler Sie schaudern? Blaue Links sind nur eine Möglichkeit, wie Ihre E-Mail kaputt aussehen kann. Sehen Sie sich genau an, was Ihre E-Mails zerstören kann, und erfahren Sie die Tipps und Tricks, um der Wahrheit zu entsprechen.

Aufdecken häufiger Probleme und Fehlerbehebungen →

Was sind blaue Links?

Blaue Links sind genau das, wonach sie klingen: Text in einer E-Mail, der den standardmäßigen blauen, unterstrichenen Stil von Hyperlinks annimmt. Im E-Mail-Marketing – insbesondere auf mobilen Geräten – werden diese blauen Links automatisch von E-Mail-Clients erstellt, um Benutzern Optionen zum Speichern oder Interagieren mit Informationen anzubieten.

In den letzten Jahren hat Apple Mail den Umgang mit einigen dieser Links aktualisiert und färbt sie nicht mehr blau. Bei Adressen und Uhrzeiten behalten iOS-Geräte das ursprüngliche Design bei, fügen jedoch eine gepunktete Unterstreichung hinzu, um anzuzeigen, dass diese anklickbar sind.

Dies ist zwar ein Fortschritt in Bezug auf die Zugänglichkeit für einige der Blue-Link-Probleme, löst jedoch nicht alle Probleme, da mehr als nur Adressen und Zeiten betroffen sein können.

Die meisten iOS-Versionen von Apple Mail färben Telefonnummern, URLs und E-Mail-Adressen blau – belassen physische Adressen und Uhrzeiten jedoch in der ursprünglichen Farbe (rot im Beispiel unten).

blaue Links in iOS Apple Mail

In iOS 13 ist der Inhalt immer noch verlinkt, aber die ursprüngliche gestylte Farbe wird beibehalten:

Auto-Links in Apple Mail iOS 13

In unseren Tests sind diese Dinge die besten Kandidaten für verlinkte Inhalte (blau oder anders):

Adressen
Termine
E-mailadressen
Website-URLs
Mal
Telefonnummern

Die Vorteile von blauen Links: Sollten Sie sie entfernen oder nicht?

In jedem Fall können die verknüpften Informationen für Abonnenten wertvoll sein, egal ob sie eine Telefonnummer zu ihrer Kontaktliste hinzufügen oder online nach einer Adresse suchen möchten. Blaue Links sind zwar aus Branding-Perspektive ärgerlich, aber tatsächlich großartig für die Benutzerfreundlichkeit und Zugänglichkeit und bieten kritische Funktionen.

Dies führt zu der Debatte: Sollten wir dieses Verhalten überhaupt überschreiben?

Einerseits möchten wir, dass unsere E-Mail-Designs konsistent und markenkonform bleiben. E-Mail-Clients, die unser eigenes Styling überschreiben, können Überraschungen verursachen, Interessengruppen verärgern und Probleme mit der Zugänglichkeit verursachen. Auf der anderen Seite können sich Benutzer auf diese Funktionalität verlassen und erwarten, dass sie auf Informationen in einer E-Mail reagieren können.

Was sollten E-Mail-Designer also tun?

Unserer Meinung nach ist es der beste Ansatz, die Stile – aber nicht die Funktionalität – dieser Links zu überschreiben. Die ideale Lösung für blaue Links sollte die Möglichkeit behalten, Maßnahmen für diese automatisch generierten Links zu ergreifen, aber es uns ermöglichen, diese Links zu gestalten, nicht das Betriebssystem oder den E-Mail-Client.

Einige würden argumentieren, dass das Überschreiben des blauen, unterstrichenen Stylings zu weit geht. Das Standardverhalten weist jedoch ernsthafte Probleme mit der Zugänglichkeit auf, die wir bekämpfen können. Sehen Sie sich zum Beispiel diese E-Mail-Fußzeile mit blauen Links an, die der Adresse hinzugefügt wurden:

blauer Link in E-Mail-Fußzeile

Es ist ein übliches Design: Weißer Text auf schwarzem Hintergrund, mit kleinem Text, um den Fokus auf den darüber liegenden Inhalt zu halten. Wenn Informationen verknüpft sind und der blaue Stil angewendet wird, ist der Kontrast extrem gering. Jeder mit Sehbehinderung – oder Menschen mit hervorragender Sehkraft, die einen abgedunkelten Bildschirm oder ein mobiles Gerät in einer sonnigen Umgebung verwenden – wird es extrem schwer haben, diese Informationen zu konsumieren. Eine hilfreiche Funktion wird zu einem frustrierenden Erlebnis.

Auch die automatische Verknüpfung wird nicht von allen E-Mail-Clients gleich behandelt. Während blaue Links der häufigste Übeltäter sind, behalten einige Kunden die Schriftfarbe bei, fügen jedoch eine subtile Unterstreichung hinzu. Einige Clients verknüpfen Telefonnummern, aber keine Adressen. Bei all dieser Inkonsistenz kann die Verwaltung frustrierend sein.

Wie können E-Mail-Designer mit blauen Links umgehen?

Der beste Weg, um das Auto-Link-Styling zu überschreiben

Obwohl wir in der Vergangenheit verschiedene Lösungen untersucht haben – wie das Targeting von häufig verlinkten Texten mit Spannen und Klassen oder das Einfügen nicht sichtbarer Zeichen in diesen Text, um das Verhalten zu unterbrechen –, ist die beste Lösung, die wir gefunden haben, eingebettetes CSS zu verwenden um das automatische Link-Styling zu überschreiben. Fügen Sie dann Werte wie Unterstreichungen und markentypische Farben hinzu, um die Nutzer darauf hinzuweisen, dass der Inhalt noch anklickbar ist. Ideal für Benutzerfreundlichkeit und Zugänglichkeit.

Diese Methode hat einiges zu bieten. Du kannst:

Legen Sie Ihre eigenen Stile für Text fest.
Verwenden Sie unterschiedliche Stile für verschiedene Links – es wird nicht ein Stil für eine E-Mail erzwungen.
Behalten Sie die von E-Mail-Clients und Betriebssystemen eingeführte Funktionalität bei.
Pflegen Sie das Styling leicht.

Das ist eine Win-Win-Situation für Sie und Ihre Abonnenten.

Der einzige Vorbehalt? Verschiedene E-Mail-Clients tun beim automatischen Verknüpfen von Text unterschiedliche Dinge, daher benötigen Sie mehrere CSS-Regeln, um das Styling zu überschreiben.

Haben Ihre E-Mails blaue Links?

Immer wissen, wenn E-Mail-Clients ihr E-Mail-Rendering mit Litmus Email Previews aktualisieren. Zeigen Sie Ihre E-Mails in allen gängigen E-Mail-Clients und -Geräten in der Vorschau an und erkennen Sie Fehler, bevor Sie sie senden.

Mehr erfahren →

Blaue Links in Apple Mail überschreiben

Beim Erstellen von Links um Text fügt Apple Mail diesen Links zusätzliche Attribute hinzu, die über das übliche href hinausgehen. Ein einfaches Beispiel ist folgendes:

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

Wir haben in der Vergangenheit viele Möglichkeiten zum Umgang mit blauen iOS-Links behandelt. Glücklicherweise müssen Sie jetzt nur noch Elemente mit bestimmten Attributen anvisieren und das Styling für diese Elemente überschreiben.

Fügen Sie im Stilblock Ihrer E-Mail Folgendes hinzu, um von Apple hinzugefügte Links als Ziel zu verwenden, und erzwingen Sie, dass dieser Text den Stil von seinem übergeordneten Element übernimmt:

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

Die Funktionalität ist weiterhin vorhanden, aber der Text wird so gestaltet, wie Sie es ursprünglich beabsichtigt haben.

Um sicherzustellen, dass der Inhalt anklickbar ist, ändern Sie den Wert für Farbe von erben in einen Hex-Farbcode, der dem Design Ihrer Marke entspricht (z. B. #77d6fc für hellblau) und ändern Sie den Wert für Textdekoration auf Unterstreichen.

Blaue Links in Gmail überschreiben

Anstatt dem automatisch verknüpften Text Attribute hinzuzufügen, macht Gmail etwas ganz anderes. Bei der Verarbeitung des HTML-Codes einer E-Mail wandelt Gmail den Dokumenttyp in ein Unterstreichungselement (u) um. Wenn Sie dies wissen, können Sie Ihrem eigenen HTML-Code einen Hook hinzufügen, um nur auf Gmail-Elemente abzuzielen. Dies geschieht normalerweise durch Hinzufügen einer ID zum body-Element.

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

Es gibt zwar einige Möglichkeiten, blaue Gmail-Links zu korrigieren, aber dies ist unsere Empfehlung: Richten Sie alle im Textkörper in Gmail enthaltenen Links mit den folgenden Elementen in Ihrem Stil-Tag aus und überschreiben Sie dabei alle hinzugefügten Stile:

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

Es verwendet genau die gleichen CSS-Eigenschaften wie der Apple Mail-Trick, nur speziell auf Gmail angewendet.

Denken Sie daran, die Farb- und Textdekorationswerte zu aktualisieren, um den Abonnenten klar zu machen, dass sie auf die automatischen Links klicken können. Auch hier bevorzugen einige Leute die Option, also verstecken Sie sie nicht vor ihnen.

Blaue Links in Samsung Mail überschreiben

Samsung Mail verwendet eine ähnliche Technik wie Gmail. Anstatt jedoch ein Element in ein anderes zu konvertieren, fügt Samsung Mail der E-Mail eine bestimmte ID namens „MessageViewBody“ hinzu. Richten Sie wie bei Gmail diese ID und alle darin enthaltenen Links in Ihrem Stilblock aus:

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

Auch hier werden exakt die gleichen CSS-Eigenschaften wie zuvor verwendet. Und Sie sollten gegen den Farbwert Ihrer Marke tauschen und den Link unterstreichen, wenn dies Teil Ihres Designleitfadens ist.

Jetzt alle zusammen

Es wäre zwar praktisch, alle oben genannten CSS-Selektoren in einer Regel zu verketten, Gmail entfernt CSS jedoch mithilfe von Attributselektoren, sodass die Korrektur aus Gmail entfernt würde, sodass blaue Links frei herumlaufen können.

Daher sollten Sie alle drei Regeln getrennt halten. Die gute Nachricht ist, dass Sie nach dem Hinzufügen zu E-Mail-Vorlagen keine weiteren Schritte in Ihrem Code ausführen müssen, um blaue Links von den meisten E-Mail-Clients zu entfernen.

Kombiniert könnte Ihr HTML-Code so aussehen:

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

Hier ist ein Beispiel dafür, wie dies aussehen könnte, wenn Sie nichts getan haben (ohne Fix), den Standardstil entfernt haben, ohne Ihren eigenen hinzuzufügen (mit Fix) und den Standardstil durch Ihren eigenen (mit gestylten Fix) ersetzt:

Ohne Fix	Mit fix	Mit gestyltem Fix

Umgang mit Randfällen für den Just-in-Case-Codierer (und Outlook)

Wie Sie vielleicht wissen, gibt es beim E-Mail-Design immer Grenzfälle. Blaue Links sind nicht anders. Einige E-Mail-Clients verknüpfen Text weiterhin automatisch. Und da sich E-Mail-Apps alle 1-2 Tage ändern, könnten die drei oben genannten Clients sehr leicht ein Update einführen, das diese Korrekturen bricht.

Für diese Randfälle können Sie einen anderen Ansatz wählen.

Bei dieser Technik werden Auto-Link-Kandidaten mit einem Element umschlossen, das dann per CSS im Kopf einer E-Mail angesteuert wird. Auf das Containerelement wird eine Klasse für das Targeting angewendet. Bevor Designer herausfanden, dass sie den x-apple-data-detectors-Hack verwenden könnten, wurde dieser Trick häufig für blaue Apple-Mail-Links verwendet.

In unserem Beispiel verwenden wir die Klasse „blueLinks“:

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

Da E-Mail-Clients innerhalb dieses Elements einen Link hinzufügen, zielen Sie darauf im CSS im Stilblock Ihrer E-Mail ab und überschreiben Sie bestimmte CSS-Eigenschaften:

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

Dies kann eine sehr robuste Lösung sein, erfordert jedoch mehr Wartung. Da sich der Inhalt einer E-Mail häufig ändern kann, kann es zeitaufwändig und fehleranfällig sein, nachzuverfolgen, wo diese Klassen angewendet werden, und sicherzustellen, dass alle verdächtigen Texte berücksichtigt werden.

Aus diesem Grund empfehlen wir normalerweise, die drei oben genannten eingebetteten CSS-Lösungen zu verwenden und nur dann auf die klassenbasierte Lösung zurückzugreifen, wenn Tests eine Notwendigkeit dafür ergeben.

Ihr Fix für Outlook-Desktop-Clients

Mobile Outlook-Apps können mit der obigen Edge-Case-Lösung behoben werden, aber diese Lösung funktioniert nicht mit den Outlook-Desktopclients.

Bei Outlook-Desktopclients werden URLs und E-Mail-Adressen immer als Standardfarben angezeigt, wenn Sie sie nicht in <a>-Tags einschließen. In den meisten Fällen möchten Sie, dass diese mit der angezeigten Webseite oder E-Mail-Adresse verlinken. Wenn Sie also das <a>-Tag mit dem href-Attribut hinzufügen und es als Link gestalten, sorgen Sie für eine gute Abonnentenerfahrung.

Wenn es nicht wie ein Link aussehen soll, können Sie trotzdem das <a>-Tag hinzufügen und es so gestalten, dass es wie der Rest der Kopie aussieht.

In Ausnahmefällen haben Sie möglicherweise einen Client, der benötigt, dass die URL wie eine normale Kopie aussieht und nicht verlinkt ist. In diesem Fall besteht die einzige Möglichkeit, dies zu erreichen, darin, viele Joiner mit Nullbreite im gesamten Link hinzuzufügen:

www.litmus. com wird zu w&zwj;ww&zwj;.&zwj;litm&zwj;us.&zwj;com

Das ist nicht das Schönste, aber es funktioniert. Es kann jedoch zu Reibungen mit Ihren Abonnenten führen, wenn sie versuchen, die URL zu kopieren und einzufügen. Manchmal wird das &zwj; beim Einfügen in verschiedene Programme seltsam erscheinen oder stören. Wenn Sie beispielsweise die URL kopieren und einfügen, wenn sie wie oben in der Adressleiste von Firefox codiert ist, führt dies zu einer Google-Suche, anstatt Sie direkt zu Litmus.com zu führen:

Kopieren und Einfügen eines Links mit Joinern ohne Breite in einen Browser

Das ist also, was ich als letztes Mittel bezeichne, wenn der Client nicht auf den Grund hört.

Dieser Fix funktioniert nicht für E-Mail-Adressen, und meiner Erfahrung nach habe ich keine Lösung gefunden, um eine nicht gestylte, nicht anklickbare E-Mail-Adresse zu erstellen, die für jeden E-Mail-Dienstanbieter (ESP) funktioniert. Bei einigen ESPs können Sie ein <a>-Tag ohne href-Attribut oder ein <a href=“#“> verwenden. Aber einige ESPs lassen Sie keine E-Mails mit diesen Hacks senden.

Fixieren Sie den Stil, nicht die Funktionalität

Während Sie die blauen Auto-Links vielleicht für ein pixelgenaues Design entfernen möchten, denken Sie daran, für wen Ihre E-Mail bestimmt ist: Ihre Abonnenten. E-Mail-Clients haben gute Absichten, Dinge wie Adressen, Daten und Telefonnummern anklickbar zu machen – und viele Leute mögen und freuen sich darauf, sie auf diese Weise zu verwenden. Verstecke sie nicht. Transformieren Sie sie stattdessen so, dass sie dem Design Ihrer E-Mail entsprechen. Sie machen sowohl Ihre Stakeholder als auch Ihre Abonnenten glücklich.

Erstellen Sie markenkonforme, fehlerfreie E-Mails mit Litmus

Sehen Sie, wie Ihre E-Mails auf über 100 E-Mail-Clients, Apps und Geräten aussehen (keine blauen Links mehr, oder?). Verabschieden Sie sich von kaputten E-Mails. Wütend!

Starten Sie Ihre kostenlose Testversion →

Ursprünglich veröffentlicht am 2. Juli 2019 von Jason Rodriguez. Zuletzt aktualisiert am 23. Juli 2021.