What is an anchor link?
An anchor link is similar to a hyperlink but instead of linking through to an external source (such as a website) an anchor link jumps to content within the same web page/document/email you are currently viewing.
When done right, anchor links in email can simplify navigation and help lead the reader to the right content.
Anchor links can be styled as text, a button or an image. In the example, Crazy Cakes has 3 anchor links below the main image, a bit like a menu bar, each linking to the 3 respective sections within their email newsletter.
Try it
Tip: Click the 3 anchor links below the cupcakes
|
Why and when to use anchor links in email
Anchor links are great if you have a long newsletter and wish to add some navigation for a better user experience.
We recently received a brief for a very long and content rich email newsletter. The layout consisted of 3 main sections and within each section there were 4-8 pieces that clicked through to a website.
To give subscribers a chance to skip directly to what they were most interested in, we created 3 anchor links at the top of the newsletter which would jump to the 3 respective sections when clicked.
Other examples or uses for anchor links in email could be:
- Table of contents
- Back to top
- Jumping between sections
- Menu bar
2 Steps to creating your anchor link:
Anchor links are so easy to set up and you don’t need to be a ninja at HTML.  An anchor link is made up of two parts:
- The destination anchor
- The source anchor (when clicked, jumps to the destination anchor)
Step 1 – Create the destination anchor
In the Crazy Cake email template, the anchor tags are the headings for each of the 3 content sections.
Wrap each heading in an <a> tag and add a name for your destination anchor:
<a name=”flavours”>Irresistible new flavours</a>
<a name=”loyalty “>Loyalty programme</a>
<a name=”blog “>Crazy blog</a>
Pro tip: Keep the tag name simple and remember they are case sensitive!Â
Step 2 – Create the source anchor
When clicking a source anchor, you will automatically navigate to the destination anchor. Crazy Cakes have their anchor links at the top of the email template.
Wrap each source anchor in an <a> tag with a # and the name of your anchor tag:
<a href=”#flavours”>New flavour</a>
<a href=”#loyalty”>Loyalty programme</a>
<a href=”#blog”>Crazy blog</a>
Special note on anchor link attributes
Instead of using the ‘name’ attribute you can also use the ‘id’ attribute.
We have used the ‘name’ attribute with great success, but we are using the Doctype ‘XHTML 1.0 Transitional’.
HTML5 on the other hand doesn’t support the ‘name’ attribute as it classifies the attribute as obsolete. It does however support the global ‘id’ attribute meaning depending on how your email code is generated/created you could use any of these 2 attributes:
Using the “name” attribute
Destination anchor:
<a name=” flavours “>Irresistible new flavours</a>
Source anchor:<a href=”#flavours”>New flavour</a>
Using the “ID” attribute
Destination anchor:
<a id=” flavours “>Irresistible new flavours</a>
Source anchor:<a href=”#flavours”>New flavour</a>
Email client support for anchor links
| Email client | Support for anchor links |
| Gmail (Web) | YES |
| Gmail (Android app) | YES |
| Inbox by Gmail (Android app) | YES |
| Gmail (iOS app) | NO |
| Apple Mail (iOS) | NO |
| Yahoo! Mail (Web) | YES |
| Outlook.com (Web) | YES |
| Outlook (Android app) | NO |
| Outlook (desktop) | YES |
| Outlook for MAC | NO |
| Samsung email app (Android) | YES |
| Windows Mail (Windows 10) | YES |
As always, know your audience – this can help guide you to creating amazing emails with great user experience.
0 Comments