Nathan J Pledger

Program.X musings from the Isle of Man concerning ASP.NET, in particular accessibility, web standards and neat ideas.

Links in new windows

 I haven't posted for a while and happened on an article I will post shortly, but in introducing it, I stumbled on an annoying issue in sites I continue to see. So, I will post this, and then link back to it in due course. It is also relevant as I have been asked by a site designer I am helping about link policy, so here is my response.

Whether links should appear in new windows is a controversial issue in ethical site design. Should a link appear in a separate window? Ideally, no. Popups and new windows are intrusive and disruptive to content flow. If the user wants to open a new window, there are established procedures in place to do this. For example, holding down SHIFT, modifying the default browser settings, or right-clicking the link to open it in another window or tab.

Maybe we could reserve new windows and pop-ups for external links? Some commercial sites I could mention have a bizarre notion that to open a link in a new window will keep the user at the original commercial site. That would be a fine view if commercial sites were paid for by the minute, but in reality, it just disappears into the background and consumes more resources.

In reality, it isn't that simple. While a list of links, or a link following a page of text could logically be opened in the same window, content is such that opening a link in the same window would disrupt the content flow even more. Therefore, techniques are identifying links as external are enough to not only inform the user that the link is for a different site but also make their own choice of whether to open in a new window.

We could also highlight the external nature of the link by a bit of text attached to the image using the TITLE attribute, or maybe some text placed alongside. Also, another attractive technique is to attach some CSS to format the link so it has a small icon to the right.

eg.eg.

 
<a href=http://www.programx.co.uk title="Program.X Site (external link)" class="externalLink">A Link</a>
 

Then attaching some CSS:

 
a.externalLink { padding: 0px 16px 0px 0px; background: url(externalLink.gif) no-repeat right; }
 

Consider this page:

 http://www.holistichealthcare.org.uk/Links.aspx

This provides an attractive list of links, well designed and effective in identifying link destinations.

Comments

Nathan Pledger said:

Ok,so the example isn't anywhere close to XHTML. Not my fault, can't be bothered fighting with the editor! You get the point though. :)
# March 24, 2006 1:20 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)