Home Blog Hyperlinks in Gmail blauw? Hoe fix je dit?

Hyperlinks in Gmail blauw? Hoe fix je dit?

Hyperlinks in Gmail blauw? Hoe fix je dit?

Geschreven door Wilbert Heinen / 26 oktober 2017 / Techniek / Design

In september 2017 heeft Google een update gedaan voor alle Gmail gebruikers. Gmail gebruikers wisselen veel informatie met elkaar uit zoals telefoonnummers, adressen en e-mailadressen, voor het inschieten van meetings en het inplannen van events. Veel tijd gaat verloren door deze informatie te moeten kopiëren naar andere apps en websites. Om het de Gmail gebruikers wat makkelijker te maken en tijd te besparen, heeft Gmail een handige en gebruiksvriendelijke update doorgevoerd.

Waarom krijgen de hyperlinks in Gmail een default styling?

Met deze update worden in Gmail voortaan alle telefoonnummers, adressen en e-mailadressen automatisch omgezet van tekst naar interactieve blauwe hyperlinks. Wanneer Gmail gebruikers op een adres klikken, dan wordt de gebruiker automatisch doorgestuurd naar Google Maps. Wanneer de Gmail gebruikers op een e-mailadres klikken, dan wordt er automatisch een nieuwe e-mail opgesteld. Als mobiele Gmail gebruikers op een telefoonnummer klikken dan wordt er een telefoonoproep gestart.

E-maildesign vs. nieuwe update

Niet alle e-maildesigners zullen blij zijn met deze update. Alle telefoonnummers, adressen en e-mailadressen krijgen door deze update namelijk een blauwe en onderstreepte default styling mee. Dit kan in strijd met je huisstijl zijn en ervoor zorgen dat jouw e-mails minder toegankelijk worden. Zeker als je een blauwe achtergrond hebt, zal de link minder goed zichtbaar zijn.

Als e-maildesigner zit je dus weliswaar niet te wachten op de default styling op de hyperlinks, maar dit zorgt er uiteindelijk wel voor dat Gmail gebruikers meer geneigd zijn om een actie te verrichten in een e-mail.

Hieronder kun je een voorbeeld vinden van onze mailing in augustus 2017. Hier kregen de hyperlinks in Gmail een default style.

afbeelding zonder de html code in Gmail

Figuur 1: afbeelding zonder de HTML-code

Maar daarna hebben we de code toegevoegd aan onze e-mailtemplate waardoor de kleur van de hyperlinks in Gmail nu overeenkomt met de destijds geldige huisstijl.

Afbeelding met HTML-code

Figuur 2: Afbeelding met HTML-code

Hoe kan ik de default styling aanpassen naar mijn eigen huisstijl?

Het verwijderen van de default styling op de hyperlinks in Gmail verwijderen kan nog vrij lastig zijn. Onze vrienden van Litmus kwamen met twee oplossingen voor de default styling van hyperlinks in Gmail.


Oplossing #1

De eerste oplossing voor de default styling op de hyperlinks in Gmail is door het volgende style blok aan je template toe te voegen en vervolgens een id="body" op de body tag te plaatsen.

<!-- Gmail Date/Phonenumber/Links Reset Styles -->

<style type="text/css">

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

</style>

<body id=“body">

Let op! Deze code werkt in principe wel maar het kan voorkomen dat ook normale links nu kleuren en text-decoration overnemen van de zogenaamde parent container en niet meer in de opgegeven link kleuren worden weergegeven. Je kunt aan je inline style van een link !important toevoegen om dit te ondervangen. Hieronder zie je een voorbeeld daarvan.

<a href="https://www.e-village.nl" alt="" style="color: #000000 !important; text-decoration: underline !important;">https://www.e-village.nl</a>

Let op! Outlook op Windows negeert inline styles die gevolgd worden door !important. Hierdoor kan het zijn dat de links waar !important aan is toegevoegd anders worden getoond in Outlook. Outlook wordt onder consumenten overigens nog maar weinig gebruikt, maar mochten jouw e-mails toevallig veel in Outlook op Windows worden geopend, dan raden wij aan om wel even goed te testen qua weergave.

Oplossing #2

Voor het verwijderen van de blauwe default kleur op de hyperlink in Gmail kun je de methode toepassen.

  • Voeg de html code toe aan het adres/e-mailadres/telefoonnummer.

  • Zorg er dan voor dat de span een class krijgt. Bijvoorbeeld: <span class="telefoonnummer"></span>

  • Voeg de class toe in de <style> van jouw e-mail.

  • Opgelost! De blauwe default kleur op de hyperlinks in Gmail is nu verwijderd.

Hieronder kun je een voorbeeld vinden van het toepassen van deze html code in je e-mailtemplate. Dit is bijvoorbeeld de html code waar het telefoonnummer in jouw e-mail tevoorschijn komt.

<span class="telefoonnummer">030 - 698 80 80</span>

Daarna kun je onderstaande style toevoegen aan jouw class “telefoonnummer" in het blok.

.telefoonnummer a { color:#000000!important; text-decoration:underline!important;}

Hulp nodig bij het doorvoeren?

Wil je bovenstaande html code aan jouw huidige e-mailtemplate toevoegen, maar heb je geen idee hoe je dit moet doen, of heb je simpelweg geen tijd hiervoor? Onze afdeling Campaign Services staat voor je klaar om te assisteren of de taak desgewenst van je over te nemen, zodat je met jouw e-mail beter resultaat behaalt.

Heb je een alternatieve oplossing of vragen?

Heb je een alternatieve oplossing voor het fiksen van de blauwe hyperlinks in Gmail? Ik ben benieuwd wat jij van deze nieuwe update van Gmail vindt. Of ben je juist fan van de blauwe default style op de hyperlinks in Gmail? Plaats dan een reactie in de LinkedIn-groep E‑mailmarkting Nederland.

Scroll omhoog