The trouble with anchor links in email newsletters

Thanks to our cool customers’ input, we discovered a rather startling fact - anchor links aren’t working as reliably as we originally thought in a number of popular email clients. This could be a rather major design issue if your email newsletters and templates contain a table of contents (TOC), or ‘Back to top’ -style links.

Testing a variety of anchor links

We tested the following anchor links in an email newsletter to observe how individual email clients behaved when the links were clicked:

  • Name anchors - <a href="#anchorname">...</a> →
    <a name="anchorname">...</a>
  • Id anchors - <a href="#anchorname">...</a> →
    <h2 id="anchorname">...</h2>
  • ‘Back to top’ links - <a href="#top">Back to top</a>

Unfortunately, our tests uncovered a bit of a mixed bag, with web, desktop and mobile email clients all treating these links variably. Here are the results:

Client (by popularity) Name Id #top Notes
Outlook 2003 / Express Yes Yes Yes  
Windows Live Hotmail Yes No Yes  
Yahoo! Mail Yes Yes Yes  
Outlook 2007 Info Info Yes Linked element displays ~ 100px below the top of the preview pane
iPhone Info Info Info Two taps on the anchor link are required to jump to the linked element
Gmail Yes No No  
Apple Mail 4 Info Info Yes Linked element displays at the bottom of the preview pane
AOL Mail No No No Anchor links open an unrelated landing page in a new browser window
AOL Desktop No No No Anchor links do not work
Thunderbird Yes Yes Yes  
Android 2.3
(default client)
No No No Anchor links do not work

Thankfully, the most popular email clients (Outlook 2003, Express, Hotmail, Yahoo! Mail, or almost 60% of market share) deal with named anchor links just fine. But then there are notable exceptions like Gmail (~ 6% market share). Our support legend Stig has the following:

“Gmail uses loads of Ajax, and uses the anchor in the URL for navigation… So in order for anchors to work (and not mess with app functionality) a string is added to the name, both in the link and the anchor.

However, it only converts <a name="..."> tags and not <h2 id="...">. So if you’re linking to an element’s id, the link will update but the id won’t.

Also, the actual anchor behavior - jumping from one point to another - has been replaced with JavaScript, and I’ve found that Gmail will only bother to jump to an anchor element if it is outside of the view pane.”

Moving onto other quirks, AOL’s Mail and Desktop offerings refuse to do anything remotely useful with anchor links. Surprisingly, Apple Mail displays the linked element at the bottom of the preview pane (confusing!) and from one of our customers’ observations, Lotus Notes will follow anchor links, but only after a considerable delay.

Rumor had it that wrapping anchor links in <span> tags could potentially offer a fix, but we found this to not be the case. The most reliable option is to link to <a name="..."> tags and ensure your email can be easily navigated, even without a TOC.

So, is it time to drop the use of anchor links in email? Probably not. However, you may choose to place a little less weight on featuring a prominent TOC and instead opt for designing shorter email newsletters, with a clear sense of hierarchy and incentives to open the email and/or read beyond the fold.

Many thanks to @cjcorney, @get_dave, @crumpet and others for contributing to this post. Finally, do you use anchor links in your emails? Have you experienced anything unexpected when linking to sections of your design? Let us know in the comments below.

Posted by Ros Hodgekiss

8 Comments

  • Dave Smith
    11th November

    I always go for <a name=”...”> links having discovered some time ago that Gmail doesn’t respect ID anchor links.

    Really good post and glad I could help.

  • Jason
    12th November

    Coding email newsletters is a huge pain. Do you think this will ever go away?

  • Ben
    16th November

    If it is an important link I still use the full URL to be safe, I test my emails in GMail, Hotmail etc first as well… Its hard enough getting emails to fall at the last hurdle so to speak - if it’s important I play it safe! Awesome share, thank you Ros very helpful for beginners link me learning on my feet.

    Anchor text for commands to go to the top of the page is a little out of my league but thats why I’m here! thanks again.

  • Roberta Croll
    23rd November

    We use Lotus Notes 6.5 and our anchor links NEVER work!

  • Brian Thies
    1st December

    I typically use both name and id in the anchor:  The link.

  • Vincent
    1st December

    IMHO if your newsletter needs anchor links, then it’s probably too long and may not get read entirely.

    :-)

  • George
    6th January

    I’m having this same problem. ie. my anchor links aren’t working in apple mail or gmail. I use both the name and id tag. Anyway. SOMEONE figured out how to do it in gmail. the HARO (help a reporter out) emails are filled with anchor links and they work in any client. Thoughts?

  • Ros Hodgekiss
    6th January

    Hi George, would you be able to provide a link to one of these HARO emails? We’d love to give it a test ourselves and see if there’s something we can learn from their design. Alternately, you can contact our support team with details and we’ll give it a look.

Sign up for free.
Then send campaigns for as little as $9/month

Create an account