How to differentiate between links

When you visit a new website and are about to click on a hyperlink, do you know what is about to happen?

In the early days of the internet, a link was just a link. You’d click it and be taken to a new page.

Nowadays, clicking on a link can trigger any number of different behaviours. It may, as before, be an ordinary link that takes you to a new page. It may, however, open the link in a new tab or window. It may even trigger an event on the same page, such as an alert, or open up a floating box full of text (this is a common design pattern for displaying ‘Terms of Service’).

Personally, my sites open links in the same page by default, only opening in new windows if the link is to a different domain. You might disagree with me and think along the same lines as Vitaly Friedman – that you should never force links to open in new windows – but the point of this blog post is not to discuss the merits and disadvantages of each approach. Gotta leave me something to write about in the future!

No, this post is about tackling a design problem that has been worsening since the turn of the millennium.

The problem for website users

When you click this link, what do you expect to happen? You might be able to gather some clues by hovering over the link and hoping for some information to appear. But you can’t do that on touch-screen devices. And even if you could, the information can be missing, masked, or downright misleading.

This looks like a link to a review site: Food Review Site

In fact, it triggers an event on the current page.

We could make things more explicit by writing our links like this:

Google (opens in a new window)

But this is a long-winded, ugly way of indicating the link type. We need something more concise. Something immediately recognisable without the need to concentrate.

Ideally, we want to follow a consistent standard so that a user who has never even been on your site before will be able to accurately predict the browser behaviour when clicking on a link on your page.

The de facto standard

Increasingly, websites are adding a small icon next to links that open in new tabs. Here is a screenshot of Wikipedia’s implementation:

Though these icons vary slightly from site to site, the principle is the same – a small icon that indicates the link’s behaviour.

The problem for developers

So, we have a solution to the problem. What’s the issue?

The issue is that it is a pain to implement. Namely, it’s a pain to remember to do- and to actually implement- the manual addition of an image next to each of your applicable links. It may be quicker and more maintainable to add a class to your links, e.g. “.opens_in_new_window”, which you can style from within your CSS – but that doesn’t relieve the burden much.

If only there were a way for links to be targeted automatically…

The solution

a[target=_blank] {
    background: url('data:image/gif;base64,R0lGODlhCwALAJEAAP///5mZmf///wAAACH5BAUUAAIALAAAAAALAAsAAAIdlIOJJgEPA3MKKGdRfjRtu3UcFGFXRVpTqh6nZBQAOw==') no-repeat center right;
    padding-right: 15px;
}

This is a simple snippet of CSS that applies a ‘new window’ icon to all of your links that open in a new window. That’s it.

The url is a base-64 encoded image, which saves the browser from making an additional HTTP request for the image. If you don’t like the one I’ve used, you can encode your own icon at http://www.base64-image.de/ (and this is a nifty example of it working!)

Advanced attribute selectors (a[target=_blank]) work in IE7 and above, and base 64 encoded images work in IE8 and above, so there is substantial cross-browser support and backwards compatibility.

Let me try it!

Try copying the following into a file on your computer, save it as index.html, open up in your browser. You’ll see two links – the first opens on the same page, so has no icon, whereas the second opens in a new tab, so has the icon.

<html>
    <head>
        <title>New Window Icon</title>
        <style>
        a[target=_blank] {
            background: url('data:image/gif;base64,R0lGODlhCwALAJEAAP///5mZmf///wAAACH5BAUUAAIALAAAAAALAAsAAAIdlIOJJgEPA3MKKGdRfjRtu3UcFGFXRVpTqh6nZBQAOw==') no-repeat center right;
            padding-right: 15px;
        }
        </style>
    </head>
    <body>
        <h1>New Window Icon</h1>
        <p>
            <a href="#">Internal link</a>
        </p>
        <p>
            <a href="#" target="_blank">External link</a>
        </p>
    </body>
</html>

That’s an important design problem solved in just 4 lines of CSS – and one of those is a curly bracket!