Offsite links, the Browser and the User

So in going over a new site, my style of not opening links to external sites in a new window came under criticism due in part because of my shared belief of letting the user make up their own mind with dealing with links, was called out when the user doesn’t know how to use their browser. I have to believe that once they learn how to use their browser, and it gets beaten into their minds that every link will open in the same window, that they’ll be able to make the choice as to how to open the link.

Since taking a semantic, meaningful approach to coding the markup for websites I see the positives of focusing on the content first. I see it as making the content easiest to be reached and taken in by the user; content and user first. So naturally I have moved toward the idea of let’s not take over someone’s browser and let’s not break the back button.

I mean do we want to assume that users don’t know how to use their browsers, but we can assume that they can manage many, full screened, browser windows? That doesn’t make sense.

My screen size is small enough. I don’t need more windows opened!

You have a fixed width website layout, people browsing at full screen, not full screen, toolbars and sidebars open, other programs open. Do you want to add to a user’s clutter? Let them add to it if they want to.

Breaking the back button

Other than being number 1 and 2 of the Top Ten Web Design Mistakes of 1999 is there a reason why a website needs to take over my computer and tell my browser how it should behave? No, it shouldn’t.

Is there a more used browser control than the back button? Is it not what a new web user learns to use first? Always being able to move back to where you were just at?

The most cited reason for opening a new window that I hear or read is we’ll we want to keep them from leaving our site so let’s just pop them into a new window and they’ll be able to come back when they want. That’s stupid. If I want to stay or come back to your site I will. If your site didn’t have any relevant information and I’m closing that top window, guess what, I’m closing your window too. Make people want to come back to your site, great content, ease of use, whatever, if they want to, they’ll use that Back button.

One common theory in favor of spawning the second window is that it keeps users from leaving your site, but ironically it may have just the opposite effect by preventing them from returning when they want to.

Snyder Consulting - Seven tricks that Web users don’t know, Number 7

Accessibility! Accessibility! Accessibility!

Above all, making the website accessible to all people is a goal to strive for (no website can ever be 100% accessible by everyone), screen readers and people who suffer from other disabilities may find a new window even harder to manage then others. So why make it hard for them? See Dive Into Accessibility - 30 days to a more accessible web site - Day 16: Not opening new windows.

Javascript

<a href="#" onclick="window.open()">A Link that goes nowhere without Javascript</a>
<a href=”javascript:window.open()”>Will also go nowhere without Javascript</a>

If you must use Javascript to open a link in a new window then make sure you take into account the possibility that the user’s browser lacks Javascript support, they block Javascript (thanks NoScript), or they simply have Javascript turned off all together.

<a href="http://www.google.com/" onclick="window.open(this.href); return false“> At least this will still work without Javascript</a>

Or

rel="external"

Using unobtrusive Javascript you can target normal hyperlinks that have a rel attribute of external. So it can make linking easier for non coders if every link with that attribute opens in a new window. Read more at Open External Links as Blank Targets via Unobtrusive JavaScript and New-Window Links in a Standards-Compliant World. You might want to also toss on the nofollow text to that rel attribute.

I assume no Javascript, no images, and no CSS when starting out. Assume the basics, and as you add those three try to make sure the site works as you remove them.

What about PDFs or Word Docs?

There are several good concessions for opening a new window when linking to a non-web document like an Adobe PDF or Microsoft Word or Excel spreadsheet (outlined in detail here).

But there are alternatives to opening the file in the browser, and I know I’ve encountered it while browsing: having the files prompt to either save or open instead of just opening in a browser window.

The method to do this can be found here. I would recommend that server admins take this into account when setting up their servers. They cover Apache and Windows IIS is covered by Microsoft.

I personally hate it when a PDF opens in my browser window; back in the day it would and still does to some extent lock up my browser. I like saving or just opening a PDF in Acrobat.

User (and Developer) Education

It is simple enough because a user has multiple options for opening links (assuming Internet Explorer 7 is being used):

• Shift click a link to open the link in a new window.
• Right click, and choose either, ‘Open,’ ‘Open in New Tab,’ or ‘Open in New Window.’
• Middle mouse click and open a new tab.
• Press the CTRL key and Left Click to open a new tab.

So the user really does have control over how to open links with their browsers. The only problem is making sure that they know how to use it.

My Method

I’ve started to use the title attribute to visually show the user that hey look at me, I’m an external link; but also with this post I started using the external rel attribute, in case, in the future it has some use.

Of course the user has to wait a second or so to see the tooltip, but the information is there, and they can make up their own mind: to either just click or wait, or leave. Their choice.

CSS Attribute Selectors

a[title^="external: "] {/*CSS Here*/}

In addition to the tooltip visual you get by hovering over a link, we can use CSS to target all anchor tags with a title attribute (I’m assuming that we could also use the rel attribute, but the title offers the visual that rel doesn’t.

What I think this will be useful for is adding an additional visual element to the design, to create an icon next to every offsite link. I’m not going to use it like that, and I haven’t tested this yet, but I figure something like the following would work:

a[title^="external: "] {padding-right:25px; background:(url/images/offsite.png) no-repeat right bottom;}

Example: Advance CSS Selectors. IE8 doesn’t like it, setting the browser to work like IE7 fixes it; hopefully it gets fixed as IE8 gets more finalized.

I am using code[title^="CSS code"] {background:#859029 url(images/code_css.png) no-repeat;} to style every code element with a background if it doesn’t appear in a paragraph. So I think that the above CSS selector would work fine.

Internet Explorer 6 sucks and doesn’t handle the selector. I don’t really care, classes can fix it, maybe Javascript, but that is for another day.

Moving Forward

Of course there is still a need to open new windows, such as popups, but knowing when and where is the important part. I would say that a user admin area shouldn’t be held to the same standards as a site for everyone else. You need to show information not on the page, or you need to edit content, or maintain your site which could be easiest with multiple windows (maybe).

target="_blank" has been deprecated and won’t validate against newer versions of the HTML / XHTML specs. So right there is a reason not to use it. Of course what is standard might not be the best practice for real world applications, but it doesn’t help.

Should we assume that those who do know how to use their browsers can assume that every link might open in a new window? A lot of times I do CTRL click or right click to open a link in a new tab, but sometimes I don’t. We should strive for the best practices available at the time; that means no more new windows.

Web developers unite! Help your friends, family and coworkers by explaining to them how to use their browser; like tabs. Tabs are great! I see people just opening window after window because they don’t have their browser setup for tabs correctly.

The best way to move forward I think, knowing that some people don’t know how to use their browser is to simply just have every link open in the same the window or however the user has their browser set up. That is, not to rely on the (deprecated) target attribute, but let whatever the default action is, happen.

I’m forgetting all about target=’_blank’ now and screw IE6 for its lack of attribute selectors

Additional links: New Window for a New Link? and Beware of Opening Links in a New Window. Obviously things I discussed here have been thought of before; I’m just coming out in support of them.