View online links - UX within email

View online links - UX within email

View online links - UX within email

Bex Osborn

Marketing Strategist

17 Feb 2022

Do we still need view online links? Where should we put them and why are they there?

Have you ever seen a link in an email that says something like:

  • View the web version

  • View online

  • View in Browser

  • Can't see this email? Go here

All of the links above show the same email HTML but rendered in your chosen browser. A lot of Email Service Providers (ESPs) have this as a feature and they can be included with a short piece of personalisation. But why are they there? 

Email rendering is a whole industry, with businesses built on helping email developers preview their email in as many inboxes as possible to make sure all it looks awesome everywhere - but Litmus once said that there are over 15,000 possible combinations of email client, browser, device and many more variables that could change how your beautiful email looks. 

Some email clients block images by default, some companies use firewalls and tools to block images. Maybe looking at the file in a browser stops that from happening. 

What about accessibility? Some user preferences such as larger text, no animation, keyboard navigation, assistive technology and more may not work in their email client, maybe the email code isn’t as accessible as they would like. 

"Anecdotally, but more than once from screenreader users is “View Online” is the first thing they look for in the email. So it’s a big plus for accessibility." - Mark Robbins

Email developers may want to debug their code, maybe they want to look at another email's code and see how it works? The view online link is one of the highest clicks our weekly newsletter #EmailWeekly gets - from talking to other developers, this is because they want to see what is going on under the hood so to speak! We often try new experimental code in our emails and encourage users to take a look. 

How about email client support? In #EmailWeekly No. 361 I coded a pure CSS homage to Wordle - but the CSS I used was only supported in a few email clients, which is true of a lot of interactive email code. We often provide a ‘fallback’ experience where support is limited - utilising the view online, in this instance we chose to just show an image on email clients that didn’t have support and link that to the web version. 

There could be more reasons but those above seem like relevant reasons to include it in your emails. But apart from the last two - all of these barriers are fixable now. With support from a large number of email professionals, there is a well tested basis for email code that works in all email clients, by following these guidelines, no one should see a ‘broken’ email. Alternative text that can be styled, not relying on images in email and using code to decorate an email means less reliance on images being needed, so it doesn’t matter if they are blocked and accessibility is constantly getting better in email clients and in email code - if you don’t have to debug your code or provide a fallback to an interactive email, maybe you don’t need a ‘view online link’.

Where should I add a view online link?

You have evaluated whether you need a view online link and you want to include one - now where should you put it?

That could depend on the reason. If you need a view online line link for:

  • Broken rendering

  • No images

  • Accessibility 

  • Showing off your code

Including it at the top of your email design would make it easier in all those instances for users to get the experience they want. If the above is important to your recipients, making the text 12px and low contrast is not the way to go! 

Interactive fallback - highlight it in the relevant section. Debugging or giving others the option to see your code/view in browser - you could include it in the footer. 

Last thing - test! A lot of email UX and decisions end up with the answer ‘...it depends’ and by asking why and testing our theories we can back up why we do or do not need a view online link.

Implementing a view online link

In some ESPs as mentioned above, there is a specific personalisation string that can be used in place of a url in the href of an anchor tag.

<a href="{View online code here}"> View online </a>

Some links:

In most ESP editors there is a way to add a merge tag or personalisation tag to include a view online version. If your ESP doesn’t provide it, you can always ask them and see if it is on their roadmap, but another option is to host your emails on your website, server or at a specific link.

Do you have an opinion on view online links which I haven't mentioned? Or would you like some more information on how we at ActionRocket could help you and you team?

Reach out to us at hello@actionrocket.co or tag us on Twitter @ActionRocket.

Let’s

create

together

Got a project or want to know more about what we do? Drop us a message here, and we'll get back to you.

Let’s

create

together

Got a project or want to know more about what we do? Drop us a message here, and we'll get back to you.

© 2011-2024 Action Rocket Ltd. All rights reserved.