Home Blog Hyperlinks in Gmail blue? How do you fix this?

Share this post

Hyperlinks in Gmail blauw? Hoe fix je dit?

Hyperlinks in Gmail blue? How do you fix this?

Written by Wilbert Heinen / 26 October 2017 / Technique / Design

In September 2017, Google issued an update for all Gmail users. Gmail users were exchanging a lot of information, such as phone numbers, addresses and email addresses in order to plan meetings and events. A lot of time was lost having to copy this information to other apps and websites. In order to make life easier for Gmail users and save them time, Gmail has rolled out a useful and user-friendly update.

Why are hyperlinks in Gmail given a standard styling?

With this update, all phone numbers, addresses and email addresses in Gmail are automatically converted from text to interactive blue hyperlinks. When Gmail users click an address, the user is automatically redirected to Google Maps. When Gmail users click an email address, this automatically starts a new draft. When mobile Gmail users click a phone number, a phone call is initiated.

Email design vs. new update

Not all email designers will be too thrilled about the update. All phone numbers, addresses and email addresses are given a default blue underlined styling with this update. This can clash with your house style and make your email less accessible. Especially when you use a blue background, your link will be less visible.

As email designer, you may not want the default styling for hyperlinks, but in the end, it does encourage Gmail users to take action in an email.

Below is an example of our mailing from August 2017. Hyperlinks were given a default style in Gmail.

afbeelding zonder de html code in Gmail

Figure 1: image without the HTML code

But then we added code to our email template so the colour of the hyperlinks in Gmail corresponded to our house style then.

Afbeelding met HTML-code

Figure 2: Image with HTML code

How can I adjust the default styling to my own house style?

How can I adjust the default styling to my own house style?


Solution #1

The first solution to the default styling of hyperlinks in Gmail is adding the following style block to your template and then placing an id="body" on the body tag.

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

Note! In principle, this code will work, but it may be that normal links now take on the colours and text decoration from the so-called parent container and are no longer displayed in the link colours you set. You can add !important to your inline style of a link to resolve this issue. An example below.

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

Note! Outlook for Windows ignores inline styles that are followed by !important. This may result in links with !important added being displayed differently in Outlook. Outlook is not very popular among consumers anymore, but should your emails be viewed in Outlook on Windows a lot, we recommend testing how they are displayed.

Solution #2

Removing the default blue from the hyperlink in Gmail can be achieved with the following method:

  • Add the HTML code to the address/email address/phone number.

  • Make sure the span receives a class. For example: <span class="phone number"></span>

  • Add the class in the <style> of your email.

  • Solved! The blue default colour on the hyperlinks in Gmail has now been removed.

HBelow is an example of applying this html code to your email template. For instance, this could be the html code where the phone number in your email appears.

<span class="phone number">030 - 698 80 80</span>

You can then add the style below to your class “phone number” in the block.

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

Need help with the implementation?

Do you wish to add the html code above to your current email template, but have no idea how to do this, or simply don’t have time? Our Campaign Services department is ready to assist or take it out of your hands if you wish, so your email will achieve better results.

Do you have an alternative solution or questions?

Do you have an alternative solution for fixing the blue hyperlinks in Gmail? I am curious what you think about the new Gmail updates. Or are you a fan of the blue default style for hyperlinks in Gmail? Leave a comment in the Linkedin Group E‑mailmarkting Nederland.

Scroll omhoog