Requests to make all external links open in a new window

[Brockenstein]

We should avoid adding _blank or _new to a tags.

We should no longer force users to open up a link into a new window. There are several reasons for this. One is the initiative to give users the control to use the site as they would like. The next is not overloading mobile devices, every time you force them to open a new window it takes up ram and mobile devices have less ram than a pc, as well as the fact that on some mobile devices they have a max window cap, meaning if they hit that cap, the link no longer will work. And another good reason for this change is because of accessibility, screen readers do not know when they have been opened up onto a new window.

There might still be a fear that external links drive away users from our site but, our goal shouldn't be to try to keep them our site. Our goal should be to build a site so good that the user wants to return.

If we do need to make an link open in a new window we need to Include an alert in parentheses at the end of the link that is visible only to screen readers: example

<a href="link.com" target="_blank"> Web Accessibility in Mind <span class="wai">(link opens in new window)</span></a>

[michaelspellacy]

Brock is right. This is an argument I have been making long before responsive design came along. It’s a simple rule: Don’t make assumptions about user experience.

The new window argument is as old as the hills and dates back to a time when folks were under assumption that leaving a site was a bad thing. Sometimes spawning a new window makes sense, but majority of the time it does not. Old habits die hard.

[merich42]

Sometimes business requirements state that all external links need to open in a new window (mostly Gov clients) this can be accomplished with a small snippet of js that adds the appropriate (link opens in new window) and target adjustments; just another case where hard coding the target tag is still not needed.

[michaelspellacy]

I think, ultimately, what should end up in the document, are the pitfalls of spawning new windows with recommendation not to do it unless it is absolutely necessary or makes sense from a business rule perspective (and the rule can't be "Don't let users leave site"). Followed with code samples as mentioned above when it must be done. I have always been partial to handling it like this:

<a href="whatever.html" class="external">New Window</a>

You can then open via script and also add icon to CSS to indicate new window, You can also alter this behavior more easily on smaller screens. @Brockenstein suggestion is fine, but i think you have to make sure that window is alway opens new no matter what device you happen to be viewing it on.

[michaelspellacy]

@merich42 We need to question those requirements. I know, I know. Easier said than done. Especially on government sites. :-)

[mhartz]

@michaelspellacy The only issue I would see with adding the icon is that the client would probably complain. However I do prefer the option to open in a new screen v.s. forcing it.

@Brockenstein's way could be the more standard way of doing it when requested, but we could push for the optional way and let the project managers know it is the suggested way.

Either way it needs to be addressed for sure.

[merich42]

@Brockenstein I agree, however, when we fail. here is a decent snippet for accomplishing the above objective.

/* External Links */
    // All links that are external to **SITE**and are not .gov or .mil will launch the external link disclaimer
    $('a').filter(function(){return this.hostname && this.hostname !== location.hostname && this.href.indexOf('.gov')==-1 && this.href.indexOf('.mil')==-1}).attr('rel','external');
    $('a.external-link').filter(function(){return this.href.indexOf('.gov')==-1 && this.href.indexOf('.mil')==-1}).attr('rel','external');
    $('a[rel="external"]')
    //adds in disclaimer popup
        .click(function(e){e.preventDefault();externalLinkConfirm($(this).attr('href'))})
        .each(function(){
            $(this).attr('title',$(this).prop('title')+' (external link)');
            $(this).append('<span class="wai">(link opens in new window)</span>');
            }       
    );

[michaelspellacy]

@mhartz They can only complain if they don't understand the benefits of doing so, so totally our job to recommend. We have been successful on it on a few occasions, so it is not impossible. It would be nice if we could understand the requirement during design phase and have such things included then.

[stephendelancey]

I agree with Brock I use this as a reference when I need to decide weather or not to have a link open in a new window. http://css-tricks.com/use-target_blank/

these two point particularly apply: A Bad Reason: "Internal" links and "External" links are different.

We'll have "internal" links (links that point to our own site) behave normally, but "external" links (links that point to other sites) open in a new window/tab.

This is related to the above two reasons, only perhaps worse. You understand that normal style links are ideal, but if that means a user leaves your site, you're willing to break that ideal.

I've heard from a lot of people that this is "a convention." As in the way it's supposed to be done. It's not.

And then:

A Bad Reason: My client wants it that way

I get the "I don't want to pick this fight" thing, since we only have so much energy. But it's weird this has to be a fight at all. If they don't trust you with this, what do they trust you about?

I might approach it like this:

The default behavior is for links to open normally. There are some reasons why we might want to break that behavior, and we can go over those, but for most links we don't. We don't want to force our desires on users and potentially frustrate them for such a small thing. We want our users to feel good about us.

And hopefully your calm and educated approach will help your client feel good about you.

[JakeRuef]

I just wanted to jump in and add the obvious here but sometimes the obvious can settle or spark new conversation...

1. When working in creative, I always agreed with the first "bad reason" point Stephen made above about making only links that take you to a different site open in a new page...but now have changed my perspective based on the usability issues Brock mentioned and realizing how much i hate it when i end up with 100 open pages on my phone. (Its nice to have time to think on usabilty issues like this instead of spending multiple mind-numbing hours trying to find the perfect stock photo, which really is an exercise in finding the least awful stock photo...but i digress.)
2. I also agree that approaching this matter at the begining of a project and discussing with a client in a calm, casual manor is key. However, the difficulty of making sure that every person who engages with the client agrees with this practice and approaches this talk with the client in the same way would be the biggest obsticle.
3. The most obvious thought though is this: There is a "last page" or "back" button on most web broswers ive used to get back to the previous site or you can always manually choose to "open in a new window" by using whatever gesture your device requires to "right-click" on a link.

[scampbell44]

Awesome to hear from the creative perspective in this conversation. Thanks for the input Jake!

I don't have much to add to this excellent discourse, just want to emphasize one of Jake's points:

Approaching such things at the very beginning of the project with all key participants (e.g. client, account team, etc.) is so very important.

It's more challenging to push back at the development stage when expectations have already been set.

[JakeRuef]

Thanks! (and for the record I am in the tail end of transitioning from creative to my new role in UX but still will always be a creative at heart)

[michaelspellacy]

@JakeRuef We are all "creative" here in our own right, just because we are developers or UX, does not make it any less so. Glad to have you chime in here.

However, the difficulty of making sure that every person who engages with the client agrees with this practice and approaches this talk with the client in the same way would be the biggest obsticle.

This is a very valid point. I think it is easier to change a client's opinion than it is our own. We are often our own worst enemy in situations like these.

[Brockenstein]

I am not sure how often this is an actual client request. Last year when I looked into this line of thought that all external links must open in a new window it was an internal TMP viewpoint. QA had it on their list, Digital Strategists and Account teams looked out for it as well. I don't know of any time I had an actual client request this over the years in TB 1.0.

[michaelspellacy]

Noted, @Brockenstein. I'll bring it up with QA. This is progress.

[michaelspellacy]

Oh and thank you all for the wonderful responses here so far. I think this is great. Keep going! :-P

[michaelspellacy]

Okay, so, pretty good conversation on this so far, but let's condense into something more digestible that we can turn into action items for creation of a standard.

1. Opening statement. New windows are generally frowned upon. They are the exception and not the rule.
2. We should cite CSS-Tricks article or condense into something we can include in our document.
3. Show example or two (we might still need to agree upon which examples are most sound)

Since @Brockenstein proposed it, I think he should start writing it up and post here for review. You game, Brock? It can be an initial rough draft that we can all work on here. No rush on it.

[Brockenstein]

So I have more more thing to bring to attention on this matter. A difference between social icons, which is just an image with a link verses the social share which has functionality on it and closes once you are complete.

So I have the thought that social icons should normally not open in a new windows but social share should open up in a new window. Thoughts?

[JakeRuef]

Isn't there a common funcitonailty that when you click share it shows up in a sort of "modal window/light box/dialog box" that allow you to share without leavin the page at all? I know those things are sort of a "cheaters" UX solution but when it comes to social sharing i feel like they are really convienient.

[Brockenstein]

Well, we have been encouraged to not use apps like sharethis or addthis and instead use links that share to the social pages and if needed added javascript to grab information related to the page.

[JakeRuef]

Totally understand. What is being used when sharing something on Mashable? Are those native social share pages that open in a new window but with code that resizes the browser window to appear like a "pop-up". (i remember applying a code that did something like that for a freelance site i made years ago...not sure if that was even a good practice lol).

[Brockenstein]

I am not sure if the ticker is using a an api or not, or if the whole thing was built but them but basic idea is there yes. The link is opening in a new window and using javascript to resize, Max and I were just talking about how that probably would be ideal

[Brockenstein]

Here is my write up for documentation:

New windows are generally frowned upon. They are the exception and not the rule.

In most cases we should avoid using _blank or _new target attributes on anchor tags. Besides being a frustrating user experience, suddenly opening new windows can disorientate or be missed completely by the user. Causing many needless windows being open taking up additional resources on the users device.

There are of course reasons we might need to use _blank or _new css-tricks.com gives us some examples of good reasons and bade reasons for using these attributes.

When we do have the exceptions to open up a new window we want to keep accessibility in mind. Remembering to let the screen reader know what is about to happen.

<a href="link.com" target="_blank">Web Accessibility in Mind <span class="wai">(link opens in new window)</span></a>

.wai {
    position: absolute;
    display: block;
    overflow: hidden;
    width: 1px;
    height: 1px;
}

One reason we might open a link in a window would be user-initiated media playing.

<a href="https://www.youtube.com/watch?v=4wGR4-SeuJ0" target="_blank">
  <span class="wai">Video opens in new window</span>
  <img src="img-path.jpg">
</a>

Another reason we would open in a new window might be for social share (not social links) or an email link.

[michaelspellacy]

Sorry I missed this, Brock. My spin on it. I think it is close, but do let me know what you all think.

New Windows

While it may have once been seen as a common best practice in keeping ones visitors on one's site, spawning of new windows is generally frowned upon and should be seen as the exception and not the rule.

Inappropriate use of spawning new windows can have the opposite effect and may actually confuse users or make the experience unnecessarily complex or unpleasant. Some mobile devices even cap out the amount of windows one can have open.

There are, of course, some good reasons. to spawn new windows that you might like to know about, but for the most part, the decision to open a link in a window should be left up to the end user to decide.

Accessibility & New Windows

When a developer is required to spawn a new window, it is considered very good form to pepper in some additional helper text for the benefit of those who may be using assistive technology, such as a screen reader.

<a href="link.com" target="_blank" alt="">Web Accessibility in Mind <span class="wai">(link opens in new window)</span></a>

.wai {
    position: absolute;
    display: block;
    overflow: hidden;
    width: 1px;
    height: 1px;
}

Media

User initiated media is another example:

<a href="https://www.youtube.com/watch?v=4wGR4-SeuJ0" target="_blank">
  <span class="wai">Video opens in new window</span>
  <img src="img-path.jpg" alt="">
</a>

Note: "wai" stands for web accessibility initiative.