BSNew Gmail Auto-Linking - aka, "blue links"
For the past 5+ years, Trilogy has been using the approach we pioneered to break auto-linking in iOS (TEST 3 on https://litmus.com/blog/update-banning-blue-links-on-ios-devices). We prefer to disable the links as they are often nonsensical “Support this great cause by September 31 and you’ll be entered…”.
With the September 2017 Gmail update, we noticed that was only partially breaking Gmail Web auto-linking. To make matters worse, Gmail was then auto-linking a subsequent piece of unrelated text with the same letters it auto-links.
Over the years, many different approaches to masking “blue links” have been discovered, and many more email clients now have this feature. Some current clients that auto-link are:
iOS
a. some dates, physical addresses, phone numbers, email addresses
b. while these were blue links, dates and physical addresses are black and not bold starting with iOS 10Outlook Mail/Office 365
a. physical addresses, phone numbers, email addresses
b. Additional add-ins (https://store.office.com/en-us/appshome.aspx?productgroup=Outlook&ui=en-US&rs=en-US&ad=US) can cause other text to auto-link
c. The new Outlook/Live Beta does not currently auto-link or support add-insWindows 10 Mail
Gmail
a. Web
b. Gmail App on iOS (only phone numbers)
c. Gmail App on Android 6 (addresses, phone numbers)
This list does not include clients that link URLs and email address, as almost every single client does that.
So what to do about all this? We tried breaking auto-links with , and while that does work in Gmail – it does not work in iOS. So we doubled up and tired
The smart folks at Litmus have come up with some masking solutions: https://litmus.com/blog/how-to-fix-blue-links-in-gmail
But it does not remove the link on hover. Still stumped on that one… help please. Auto-linking is coding pet peeve number #2 (behind anything Outlook related).
If anyone has additional information or corrections to what is above, please add a comment below and I’ll update the original post.
Add an id to your body tag
<body id="body">Then use this code
The id will make the code more specific so it'll override the styles added by the email client.
Make sure you add inline styles to your links so they still actually look like links.
Hope that helps
Trying to disable the links, not just cover them up. Having a feeling I'm stuck, but working on some ideas still.
Wrapping the item in an <a> tag with no href disables it.
<a style="color: #000000; text-decoration: none;">1111 Address St, Email, CA</a>
I understand your concern with “a subsequent piece of unrelated text”. I have never seen, heard or encountered that.
However, this argument (link or not link) (style or default style) needs to be reframed. The concern (of any party) should never be whether or not the link is blue and whether or not that style is inconsistent with other styles. Blue underlined text is the defacto standard affordance of any link across the entirety of digital experiences. Users do not care if the link is blue. Users care if they can’t understand what is a link and what isn’t. And simply seeing an affordance change on hover is insufficient, especially when considering the majority of audiences open the majority of email on a mobile device where hover isn’t an input type.
Format detection is a form of progressive enhancement. When format detection is available, the result is an enhanced experience – shortcuts to common expected activities such as: making a call; locating an address; scheduling a reminder; etc. Users understand these enhancements and will select them when they value them.
Forcing a user to guess is a dark pattern. Forcing a user to copy and paste and conduct a manual task that is commonly otherwise automated and expected is an anti-pattern (or simply, bad design).
If you really want to take an expected feature away from users, you can prevent format detection with a meta element.
In addition to disabling format detection, there is also the entity hack. By inserting this HTML entity into (each instance of) the content you wish to not be detected:
I've noticed that with the latest Gmail on IOS 12 that the fix:-
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;
with id="body" in the body tag
is not working any more and I get addresses auto-link styling as default blue, underlined. I was able to correct it by adding an <a href="" style="color:#hexcode; text-decoration:none;> tag around the address.
Format detection is a good thing and a feature that users will take advantage of – when they recognize a link affordance. This empty link solution both breaks the feature and the affordance while also creating invalid and inaccessible HTML. If the goal is to disable the feature (odd goal), then using the format detection attribute or the HTML entity are sufficient. If the goal is to create a different visual affordance than blue underlined text, simply find the selectors that Gmail is using.