The Last Word (Maybe) on Opening New Windows

From time to time, the question surrounding the opening of new windows (tabs) to external sites...pops up. (Sorry.) I thought I would share a few thoughts as to why we may want to think real hard before implementing this functionality. It is a touchy matter for some and has been discussed, ad nauseam, for years, so I might be sweeping a dirt floor here, but this is certainly how I, and many others in the UX and UI profession, have come to see and respond to the request over the last decade. Also, why repeat myself to friends and colleagues when I can just share this article when fresh controversy over this subject erupts again? I like to be efficient with my time.

History Lesson

Let me tell you a little story. Back in the early days of the web, around the mid to late 90’s, we did a lot of unusual things in an effort to keep users on our sites. If websites were ever narcissistic and creepy, this was their heyday.

Hi, where ya going? Check out my Flash! Click on me. Don’t leave...please.

I think this sums up the experience back then pretty well, don't you? Overall, there was this rampant and irrational fear that if a user left your site, that they would never return. Let's be honest here. With a website going to such lengths to keep us from leaving—who'd want to stay?

In later years, this effort was also combined with a misguided attempt to improve one’s SEO (Search Engine Optimization), so it was very commonplace to have every link that left your site, open in a new window. SEO specialists didn't like the idea of a user leaving a site because it supposedly hurt the "time on page" and bounce rate statistics. However, if a user is not on your site, then they are not on your site. Keeping the window open in the background is not an accurate (or honest) portrayal of usage. Now, combine all of this with hostile attempts to push ads into our faces by hijacking the user experience with popup windows and you have a recipe for a UX disaster, which it was. Suffice to say, this incident has left a long standing bad taste in our collective mouths. So much so that it has become an anti-pattern.

Unfortunately, old habits die hard and many of these outdated notions still prevail, but we know better than to employ such seedy techniques today. (I hope.) On the SEO front, good quality content, proper keyword placement and link building strategies rule the day. We also trust that users will return to our sites without having to hold them hostage. Say what? Yes! Because we trust our users and trust that we have done our jobs to craft an experience that they will want or need to return to, no hacks or anti-patterns required! It is often best not to make assumptions about certain behaviors and let the user decide if opening a new window is the best course of action for them. Your users are intelligent and should be treated that way! 'Nuff said.

Personally, I always ask myself a simple question: Do I need a new window? 99% of the time the answer is no, but some functionality may demand it. I never open a new window because I don't want users to leave my site.

If you would like to read another opinion on the subject, by a more reputable and well-known web design heavy-weight, then please check out When to use target="_blank" by Chris Coyier. I am even linking to this article without opening it in a new window. Meta!

So what else might we want to consider before opening up new windows?

Accessibility

Opening up new windows can often be a poor experience for those among us who are disabled. Especially those with cognitive disabilities, who may find the creation of a new window, spawned without warning, to be disorienting. From WCAG:

"Opening new windows automatically when a link is activated can be disorienting for people who have difficulty perceiving visual content, and for some people with cognitive disabilities, if they are not warned in advance."

In addition to this, new windows also break the back button, which a lot of users, disabled or not, find very useful. If you must open a new window, then you had better do right by accessibility and UX! Here is one way to handle it:

... <a href="..." target="_blank" aria-label="my link text (opens in new window)">my link text<a> ...

In this technique, I am using aria-label to repeat the link text and add an additional message that indicates that the link will open in a new window. The aria-label attribute will override the text within. We are not done yet, though. ARIA (Accessible Rich Internet Applications) will benefit some assistive technology users, but it won't cover all use cases, so we need to improve upon this a little more by adding a visual indicator, which often looks something like this:

I really enjoy what Jenn Simmons has to say about CSS Grid. Her experimental layout lab has many wonderful examples to learn from.

Here is the CSS that I use for this visual cue. Feel free to steal it!

a[target="_blank"]::after {
background-color: transparent;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAclBMVEUAAAAWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmEWJmGEDiaiAAAAJXRSTlMAgMjOaRL0vvZfDrOkt26hhvrCjHXb2NKrmXlkW0QzJQhMLCQc4w6HOwAAAONJREFUOMvNkFkWgyAMRR9VpNXiVDvP0/63WGpEOETtb+8HJ/AuRgJOuoxUR12fwYnfHmtwhC9EAJ7H46LnlJ/vvjADVlR5R00pDnlid4t3gMKXvLKCCoUahqX73tasVeKY6z5PWmFm1jKVqUVKoGhzEfdCAw+bazhBwOL6Z0A5LBRdTgNYk8Dv25nvSAhzTZuTaG4k8PtS60xdAJDAcshvcQiFvesv56aKA+Fl+48Jt4zuDwqENs+aFHDFDwH/K8TgJPY8MoUSjLIy5zkJo5BQTAjt2B7j+Qotl/1mG3E2in79A5rTPUZPwwJQAAAAAElFTkSuQmCC);
background-position: center right;
background-repeat: no-repeat;
background-size: contain;
content: "";
display: inline-block;
height: 14px;
margin-left: 10px;
vertical-align: middle;
width: 14px;
}

There are other ways to pass helpful text to assistive technology users, too. Some may not like the redundancy of text in aria-label, so you can do this:

... <a href="..." target="_blank">my link text <span class="sr-only">(opens in new window)</span><a> ...

With this method, I am including visually hidden text that can still be accessed by assistive technology. I like doing it this way because it is progressive enhancment friendly, but to each their own. There are a thousand ways to handle visually hidden text and Scott O'Hara knows them all.

Finally, this is the most simple way to do it:

... <a href="..." target="_blank">my link text (opens in new window)<a> ...

I really enjoy what Jenn Simmons has to say about CSS Grid. Her experimental layout lab (opens in new window) has many wonderful examples to learn from.

I think I like this most of all! Simple and direct. Yes, it is a bit of a poor man's method, but it'll work in a pinch. There is no shame in it.

Security

Let's briefly talk about security. Full disclosure: I am no security expert, but I know enough to be dangerous. (In a good way—I swear!)

A developer by the name of Mathias Bynens discovered that linking to pages with just target="_blank", could leave your visitors exposed to reverse tabnabbing. The page you are linking to, if compromised, can gain full access to the window.opener object of the parent page. (Your website.) The parent page can then be redirected to a phishing page using window.opener.location. Since the user trusts the parent page they just left, they would have little reason to suspect that it has been hacked. Imagine your parent page being seamlessly redirected to a look-alike page, which then requests sensitive information from your users! This is terrifying!

To prevent this, it has been recommended that we should be including, in addition to our accessibility improvements, the following attribute:

... <a href="..." target="_blank" aria-label="my link text (opens in new window)" rel="noopener">my link text<a> ...

For older browsers, you would need to add noreferrer:

... <a href="..." target="_blank" aria-label="my link text (opens in new window)" rel="noopener noreferrer">my link text<a> ...

Browsers that support rel="noopener" can be found on Can I Use.

Google even recommends that rel="noopener" be used on links that use target="_blank". Who am I to argue with Google?

Performance

Finally, it is has also been revealed that target="_blank", when used alone, can cause a slight performance hit when a user is going from one page to another in a new window. Read The Performance Benefits of rel=noopener by Jake Archibald. Once again, rel="noopener" can be helpful here, too! Users like zippy experiences, so why not oblige them whenever you can?

Conclusion

As you can see, there is much to consider before nonchalantly deciding to open new windows with good ol' target="_blank". Throughout this article, I have been very careful to not outright deter use of target="_blank", because there are times where you may need it. However, if you do choose to use it, you should strongly consider all I have mentioned above. This is information that should be shared with fellow colleagues and clients, who often make this request without understanding many of the complexities that may arise due to improper implementation of this functionality.

Given all that could go wrong, whether it be by the hand of a front-end developer or content editor, sometimes the best decision may be not to launch new windows at all. This is a rule I often abide by personally. For clients, I would absolutely approach the launching of new windows with a healthy amount of caution, as a poor implementation can have a negative impact on users, and through that, a negative impact on your client's brand.

Before signing off, let's recap what we should be doing. Feel free to use this to succinctly educate colleagues and clients:

• Ask Why - Have a really good reason as to why a new window should be opened. Opening new windows, just to keep users on your site, is not a good enough reason.
• Trust Users - Let your users decide if opening a new window is the best course of action.
• Accessibility - If a new window is a necessity, use aria-label or alternative techniques for assistive technology and include visual indicators.
• Security & Performance - If a new window is a necessity, make use of rel="noopener". This will prevent tabnabbing and improve page load between parent and child windows.

Thank you for reading!