So reparieren Sie Gmail Blue Links für einen E-Mail-Traum, der wahr wird

Veröffentlicht: 2021-07-16

Frustriert über scheinbar zufällige, markenfremde blaue Links beim QA-Testen Ihrer ansonsten perfekten E-Mail in Gmail? War dort. Habe das gemacht. Die guten Nachrichten? Du hast nichts falsch gemacht. Seit 2017 wandelt Gmail einen Teil Ihrer Kopien – wie E-Mail-Adressen, Telefonnummern, physische Adressen und Uhrzeiten – automatisch in anklickbare Elemente um und färbt sie manchmal blau. Und da nach unseren Daten der zweitbeliebteste E-Mail-Client mit über 30 % der geöffneten E-Mails ist, können Sie Gmail nicht ignorieren.

Unabhängig davon, was blaue Links sind und warum, muss Ihre E-Mail so aussehen, wie sie genehmigt wurde. Oder lassen Sie die Links zumindest auf der Marke stehen. Glücklicherweise ist das Entfernen des Standardstils nicht so schwer. Wir zeigen Ihnen, wie die blauen Links entstehen – und was Sie tun können, um sie an das Design Ihrer E-Mail anzupassen. Und das alles unter Beibehaltung der benutzerfreundlichen Links für Ihr Gmail-Publikum.

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 – einschließlich Gmail – in der Vorschau an und erkennen Sie Fehler, bevor Sie sie senden.

Mehr erfahren →

Denken Sie an die Barrierefreiheit

Zunächst ist es wichtig, sich daran zu erinnern, dass die blauen Links einen wichtigen Zweck erfüllen. Sie machen es Ihren Abonnenten bequemer, auf Ihre E-Mails zu reagieren, beispielsweise um zu einem von Ihnen angegebenen Standort zu navigieren oder Sie schnell anzurufen. Beides großartig für Benutzerfreundlichkeit und Zugänglichkeit.

Ja, wir hatten auch einige blaue Links in unseren E-Mails

Diese Auto-Links können jedoch mit dem Standardstil geliefert werden: unterstrichen und blau. Dies kann zu Konflikten mit Ihrem E-Mail-Design führen und Ihre E-Mail sogar weniger zugänglich machen, wenn die Links eine Hintergrundfarbe haben, die sich nicht gut von ihnen abhebt.

Fusszeile — Der blaue Link hier fällt kaum auf

Sie sollten also die Funktionalität des Links beibehalten, ihn aber so gestalten, dass er besser zu Ihrem E-Mail-Design passt und lesbar ist.

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 →

Drei Möglichkeiten zum Ändern der blauen Linkfarbe in Gmail

Um die blaue Linkfarbe zu ändern, müssen Sie verstehen, warum dies geschieht. Wenn Gmail eine Adresse oder Telefonnummer in einer E-Mail erkennt, fügt es automatisch eine zusätzliche Stildeklaration hinzu, die jeden Link in der E-Mail blau formatiert, wenn keine Inline-Stile daran angehängt sind:

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

Die Klasse .ii bezieht sich auf die Klasse, die dem div zugewiesen wurde , das die gesamte E-Mail in Gmail enthält. a[href] ist ein CSS-Attributselektor. Dies erklärt, dass jeder Link in der .ii- Klasse die Farbe Blau haben muss.

Adressen und Telefonnummern werden in E-Mails normalerweise nicht verlinkt. Gmail erkennt sie jedoch und wandelt sie in einen Link um, ob es Ihnen gefällt oder nicht. Da diese Links im laufenden Betrieb erstellt werden, sind ihnen keine Inline-Stile zugeordnet, und daher wird das obige Standard-Stil verwendet.

Es gibt drei Methoden, mit denen Sie verhindern können, dass die Links blau werden, je nachdem, ob diese Links gleich oder anders aussehen als die anderen Links in Ihrer E-Mail.

Option 1: Verwenden Sie die <span>-Methode

Die <span>-Methode ist die einfachste Methode, um zu verhindern, dass Telefonnummern und Adressen in Gmail blau werden. Es ist perfekt, wenn Sie sie anders als Ihre anderen Links stilisieren möchten und gleichzeitig ihre Funktionalität beibehalten möchten. Hier ist wie:

Fügen Sie die Telefonnummer oder Adresse in ein <span></span> . ein
Geben Sie dem <span> eine Klasse, zum Beispiel: <span class=”contact”></span>
Deklarieren Sie die Klasse im Abschnitt <style> Ihrer E-Mail, um die Telefonnummer oder Adresse nach Ihren Wünschen zu gestalten
Profitieren!

Hier ist ein Beispiel für den HTML-Code, in dem die Adresse in der E-Mail erscheint:

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

Und hier ist eine Beispiel-Style-Deklaration für die Klasse „contact“ im <style>-Block im <head> Ihrer E-Mail, in der wir den Link auf schwarz (#000000) und unterstrichen setzen:

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

Ändern Sie die schwarze Farbe in unserem Beispielcode, indem Sie #000000 durch einen Farb-Hex-Code ersetzen, der zu Ihrer Marke passt. Wenn Ihr Link nicht unterstrichen sein soll, ändern Sie die Unterstreichung in Ihrem Code in Keine.

Wenn Sie ein <span> mit einem Klassennamen um die Adresse oder Telefonnummer herum erstellen, erhalten Sie etwas, das Sie mit CSS ansprechen können. Wenn Sie nur auf <span> selbst abzielen, wird der Link nicht formatiert. Es wird nur den nicht verlinkten Text formatieren, während der Link innerhalb des <span> immer noch den standardmäßigen blauen Stil hat. Um also auf den Link innerhalb des Spans abzuzielen, enthält die Style-Deklaration den Klassennamen sowie „a“.

Dies ist besonders für Telefonnummern geeignet, wenn Sie <a href=”tel:XXX-XXXX”> direkt zu Telefonnummern hinzufügen möchten, aber nicht möchten, dass die Telefonnummer versucht, eine Telefon-App auf dem Desktop zu öffnen. Und dann müssen Sie Inhalte für Desktop- und Mobilgeräte aus- und anzeigen. Überspringen Sie einfach die Kopfschmerzen und nutzen Sie die Tatsache, dass ein E-Mail-Client endlich etwas tut, um Ihnen zu helfen.

Option 2: Alle Link-Stile überschreiben

Eine andere Möglichkeit besteht darin, Ihr eigenes Standarddesign festzulegen, das für alle Links in einer E-Mail gilt. Diese Option ist perfekt, wenn Sie möchten, dass Ihre Adress- oder Telefonnummern-Links genauso aussehen wie Ihre anderen Links, während die Funktionen von Gmail beibehalten werden.

Fügen Sie diese Gmail-spezifische Stildeklaration zu Ihrem <style>-Block im <head> Ihrer E-Mail hinzu:

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

Fügen Sie dann die ID „body“ zum body-Tag hinzu:

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

Die Unterstreichung „u“ ist eine Ausrichtungsmethode für Gmail. Es wandelt den Dokumenttyp in ein unterstrichenes Tag um, und Gmail ist der einzige Client, der sich so verhält. Daher ist die Verwendung des underline-Tags mit dem angrenzenden gleichgeordneten Selektor eines div oder einer ID/Klasse für dieses div in CSS eine einzigartige Methode, um (zumindest im Moment) nur Gmail-Clients anzusprechen. In diesem Beispiel haben wir die ID "body" verwendet.

Wenn Sie mit dieser Methode möchten, dass Links in Ihrer E-Mail leicht unterschiedliche Stile haben, muss dies inline zu diesen spezifischen Links hinzugefügt werden, da diese obige Technik alle Links so formatiert, wie sie in der Stildeklaration definiert wurden.

Es gibt jedoch eine kleine Einschränkung bei dieser Methode.

Es funktioniert nicht, wenn Gmail-Benutzer Bilder standardmäßig deaktiviert haben und sie dann aktivieren. Dies ist auf einen Fehler in Gmail zurückzuführen, der das Styling falsch ändert, sobald Bilder aktiviert sind. E-Mail-Entwickler Remi Parmentier hat weitere Details zu diesem Fehler.

Option 3: Fügen Sie das <a>-Tag hinzu und erstellen Sie selbst Links

Durch proaktives Verknüpfen der Elemente, die Gmail automatisch verknüpfen würde, haben Sie mehr Kontrolle über deren Stile und Farben. Diese Option ist perfekt, wenn Sie auch ändern möchten, wo der Inhalt verlinkt ist , Vielleicht haben Sie auf Ihrer Website eine Kontaktseite, auf die Sie Abonnenten lieber weiterleiten möchten, als dass sie automatisch die Navigations-App ihres Telefons öffnen oder Sie sofort direkt anrufen.

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

Im obigen Beispiel ist die physische Adresse grau ohne Unterstreichung und mit der Kontaktseite unserer Website verlinkt. Dadurch wird verhindert, dass Gmail seinen Standardstil und seine Standardfunktionen anwendet.

Auf Wiedersehen, blaue Gmail-Links

Mit einer unserer drei Methoden werfen blaue Links nicht mehr das Design Ihrer E-Mail ab und lassen sie in Gmail kaputt aussehen. Und das ist großartig – denn kaputte E-Mails können das Engagement und die Conversions beeinträchtigen (und das möchten Sie definitiv nicht).

Sie haben Fragen zu unseren Methoden? Oder haben Sie eine andere Lösung zum Teilen? Lass es uns in den Kommentaren unten wissen.

Erstellen Sie markenkonforme, fehlerfreie E-Mails mit Litmus

Sehen Sie, wie Ihre E-Mails über 90+ E-Mail-Clients, Apps und Geräte – einschließlich Gmail – 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 13. Oktober 2017 von Jaina Mistry. Zuletzt aktualisiert am 16. Juli 2021.

Teilen, danke!

Was Sie wissen müssen, um die 3 Arten von inaktiven E-Mail-Abonnenten zu verwalten

Erfahren Sie, wie Sie inaktive Abonnenten basierend auf der Art des inaktiven E-Mail-Abonnenten ansprechen, damit Sie eine effektive Strategie für die erneute Interaktion erstellen können.
Weiterlesen

Unsere beliebtesten E-Mail-Marketing-Beispiele und -Strategien für den Singles Day

Die E-Mails zum Singles' Day finden auf der ganzen Welt (nicht nur in China) Anklang. Sehen Sie sich 8 E-Mail-Beispiele an, um Ihre Kampagne zu inspirieren, sowie Strategien, um mit der Planung zu beginnen.
Weiterlesen

Ganzheitliche E-Mail-Metrikenmatrix: Sehen Sie das ganze Bild?

Sehen Sie sich das Gesamtbild der E-Mail-Marketing-Performance mit kurz- und langfristigen ganzheitlichen E-Mail-Kennzahlen an. Und erstellen Sie noch heute leistungsstärkere Kampagnen.
Weiterlesen

Wie man Black Friday und Cyber Monday (BF/CM) E-Mails aus dem Park schmeißt

Heben Sie sich ab und konvertieren Sie Abonnenten mit diesen bewährten Strategien für Black Friday Cyber Monday-E-Mails und perfekten Beispielen, von denen Sie sich inspirieren lassen können.
Weiterlesen

Outlook-E-Mail-Rendering: Wie ich gelernt habe, mir keine Sorgen mehr zu machen und Outlook zu lieben

Sie fragen sich, warum Ihre E-Mails in Outlook schlecht aussehen? Erfahren Sie mehr über die E-Mail-Rendering- und Anzeigeprobleme, mit denen Sie möglicherweise konfrontiert werden, und wie Sie diese für eine perfekte E-Mail beheben können.
Weiterlesen