Anchor links in email: the intricacies
Anchor links are a direct way to link to content nested in a long website, or email.
I personally love them on the web because they make content easy to access and can create a wonderful user experience for those wanting to cut to the chase. With web and email, sharing many similarities, anchor links should have no issues in emails…right? Wrong. Did you know when using them within emails, they might not always deliver the subscriber to where you want to send them to go?
As of recent, I’ve heard lots of questions and buzz around what’s up with them and why they don’t work in email. So I’m going to break down my findings:
What are they
On Google Docs, they can be known as Bookmarks. An easy way to link to specific headings, or pieces of content.
Formerly, they are called anchor links. For example, on the web, my /about me page is a long read. Although I’d love everyone to navigate through my life story, there are often moments I want to drive to specific content. And voila, here appears an anchor link.
I’ve created an anchor link specifically to scroll to a specific heading on my /about page about 80% of the way down. And it looks like this https://www.naomiwest.ca/about/#how-its-going.
Within the email, can’t I do the same to send subscribers down 80% of my email to a specific piece of content?
A sad reality
No. Sorry.
Can i email, an online tool that shows you if clients support various CSS/HTML/Java content, lays out that anchor links aren’t really that supported in email.
As of October 2021, only about 45% of email clients support them. And those that don’t support them, are pretty big email clients in my opinion.
Gmail on iOS returns a buggy experience
Outlook on macOS, iOS, and Android returns a buggy experience
Apple Mail on iOS returns a buggy experience
And with those three leading the pack of email client market share, is it worth using something that only works on such a small % of other clients?
What does this mean to not be supported?
When an email client doesn’t support an anchor link, it means that the link could return blank, open a new window (unintentionally), the # portion could be removed, or clicking on the link does nothing. How lame!
What’s the workaround?
Well, unfortunately, there isn’t one. Aside from hiding or targeting a specific client in CSS, there’s no way to hack the system to ensure that your anchor link is working for some, and not showing for others where it’s guaranteed to be a poor experience.
My recommendation would be to avoid them full-stop and consider the main goal of your email.
However, for those that love to write (aka, me on my /about page), even starting your email with a TLDR could serve a purpose, or a faux table of contents may provide just what your subscriber is looking for (sans an anchor link).
