Blue links in iOS got you down, too?
This post covers how to fix blue links in Gmail. If you’re struggling with blue links in iOS, we’ve got you covered, too.
In September 2017 Gmail rolled out an update for G Suite users in which addresses and phone numbers are automatically linked in emails. Clicking on addresses will automatically send the user to Google Maps across webmail and on mobile devices, and tapping a phone number opens the dialer app on mobile devices.
This update is a fantastic improvement in terms of usability for the growing number of G Suite users. Users can tap an address in an email on their mobile device and instantly have that address open in Google Maps, rather than having to copy and paste the address.
However, for email designers the update isn’t so great. Both phone numbers and addresses are styled with the default styling—underlined and blue. This can be in conflict with your email’s design and can even make your email less accessible.
Yes, we had some blue links in our emails, too.
Predictably, removing the default styling isn’t simple. In this blog post we’ll walk you through how the addresses and telephone numbers are styled, and what you can do to change the default styling to match your email’s design, all while maintaining the easy-to-use links for your G Suite users.
 |
DO YOUR EMAILS HAVE BLUE LINKS?Always know when email clients update their email rendering with Litmus Email Previews. Preview your emails in all popular email clients and devices and spot errors before you send. |
Why the Links Turn Blue
When Gmail spots an address or phone number in an email, it automatically adds an extra style declaration, which formats any link in the email that has no inline styles attached to it, as blue:
.ii a[href] { color: #15c; }The class .ii refers to the class given to the div that contains the whole email, in Gmail email clients. The a[href] is a CSS attribute selector. In Gmail, this CSS attribute selector is declaring that any link in the .ii class needs to be the color blue.
Addresses and phone numbers aren’t commonly linked in emails. However, Gmail recognizes addresses and phone numbers and turns them into a link. As these links are created on the fly, they don’t have any inline styles attached to them, and the default styling above is used.
Great! So, how do you stop the links from turning blue?
Fixing Blue Links in Gmail
The blue links may look ugly but they serve an important use. They make it more convenient for your subscribers to act on your email—be it to navigate to a location you’ve included or to give you a quick call—so you’ll want to retain the functionality of the link, but style it so it better matches your email design and is legible.
There are two methods you can use to make this happen:
Option #1: The <span> Method
The <span> method is the simplest technique to stop phone numbers and telephone numbers turning blue in Gmail:
- Wrap the telephone number or address in a <span></span>
- Give the <span> a class. Example: <span class=”contact”></span>
- Declare the class in the <style> section of your email.
- Profit!
Here’s a full example:
The HTML where the address appears in the email:
<span class="contact">675 Massachusetts Ave.<br>Cambridge, MA 02139, USA</span>The style declaration for the class “address” in the <style> block:
.contact a {color:#000000!important; text-decoration:underline!important;}Creating a <span> with a class name around the address or phone number gives you something to target using CSS. Just targeting the <span> itself won’t style the link, it will just style the <span> and the link inside the <span> will still have the default blue style. So, to target the link inside the span, the style declaration includes the class name and “a”.
Option #2: Override All Link Styling
An alternative option is to set your own default styling which will apply to all links in an email by adding this Gmail specific style declaration to your <style> block:
u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; } Followed by adding the ID “body” to the body tag:
<body id="body"> </body> The underline “u” is a targeting method for Gmail. It converts the doctype to an underline tag and Gmail is the only client that behaves in this way. Thus, using the underline tag with the adjacent sibling selector of a div or id/class on that div in CSS is a unique method of targeting only Gmail clients (at least for the moment). In this example, we’ve used an id of “body.”
With this method, if you want links in your email to have slightly different styles, this will need to be added inline to those specific links as this technique above will style all links as have been defined in the style declaration.
However, there is a small caveat with this method. It does not work when Gmail users have images off by default and then enable them. This is due to a bug in Gmail that improperly changes styling once images are enabled. Email developer Rémi Parmentier has some more details on this bug.
Got an alternative solution to Gmail’s blue links? Share it in the Litmus Community!
The post How to Fix Blue Links in Gmail appeared first on Litmus Software, Inc..
