New Windows and Custom Cursors

closePlease note: This post was published over a year ago, so please be aware that its content may not be quite so accurate anymore. Also, the format of the site has changed since it was published, so please excuse any formatting issues.

As of late, I have been looking for an elegant solution to warn visitors that a link they’re about to click on will open in a new window. It’s a constant battle for web designers and there are many schools of thought ranging from changing the colour of the link, to including a little graphic after the link, to not opening new windows at all.

In searching for a good solution, I thought, “it would be nice to have the pointer be slightly different when the user hovered over a link that will open a new window. This way, they’ll have some warning.” I already knew that CSS has an option to change the cursor, but I was disappointed to learn that the different cursors available are pretty dull (most of them are the resizing cursors). All was not lost, however, as I noticed that it’s possible to point to a .cur file and use your own custom cursor. Great, right?

Well, maybe not. After doing more research into the matter, every single web page I happened upon pointed out that this only works in IE. Just as I was about to give up, I stumbled across a page that had a custom cursor and it worked in Firefox! Joy of joys! This morning I tested to make that it wasn’t a fluke, and sure enough, it works. So what’s the difference?

I think the other articles are just old. That or the authors didn’t actually try to replace the cursors, they just re-wrote the work of others, because as of Firefox v1.5, graphical cursors have been available (FF v1.5 went live about a year and a week ago).

I know you’re all itching to know how it’s done, so here’s the code:

.custom_cursor { cursor:url(custom.cur), auto; }

Okay, so what’s going on there? Well, the class name can be whatever you want. You could apply this unilaterally to all links by changing “.custom_cursor” to simply, “a”. The URL specified is a relative path, but it doesn’t have to be (in fact, if you keep your CSS file in its own folder like I do, you’ll need to specify the full path). The “auto” at the end is there to ensure that a cursor is displayed at all. This is important because despite the fact that this fantastic little trick works in IE and FF for Windows, it doesn’t in Opera and it doesn’t work at all for Mac users (at least, not that I’ve found). Netscape 8.1 for Windows was interesting. When using Firefox page rendering, it didn’t work, but when using IE page rendering, it did.

Another cool trick I ran across was this W3C valid trick for using CSS to denote which windows are popups and which aren’t. The same cursor restrictions apply.

I should point out that the browsers which failed only failed for custom cursors; that is to say, cursors for which a URL was specified. The default cursors work just fine in Windows and Mac (thanks for testing, Kris! I really need to get my own Mac).

But what about the argument that you shouldn’t use popups at all?

Well, it’s right. It’s a usability/accessibility argument that I’ve been avoiding addressing for a long time. The argument in favor of using either JavaScript popups or, as I do, target=”_blank” popups is typically one of two things: Either to give users a handy way to return to your site (none of that pesky clicking back a bunch of times) or to create a clear line between internal links and external links. On this site, I have been using both excuses (although of late, I’ve been telling myself it’s mostly for the latter reason).

The argument against it is… Well, I won’t be able to express it better than was done in an article I read this morning. I will, however, sum up the article (in case you’re too lazy to go read it):

1) Users ignore your carefully crafted navigation and use the back button instead. Sorry, but it’s true.

2) When you open a new window, the back button “breaks” and that confuses the hell out of 99% of users (even the internet savvy).

3) When users get confused because the back button doesn’t work, they often just close all open browser windows and start over from the beginning (which, as Steve Krug would tell you, reduces their reservoir of goodwill). Some users will become frustrated enough that they leave (and may not return).

4) There is no elegant solution.

5) Don’t open new windows.

So there you have it. It’s something that I’ve known for a long time and continued to do. I’m a little ashamed of it (but not as ashamed of the fact that my site’s font of choice is Times New Roman). As of this post, I will stop opening external links in new windows (except for on Friday Funday entries, as I believe opening new windows is well suited to the nature of those posts). I’m not going to go back into the archives and remove the targets from links. Well, not yet, anyway.

I’d like to hear feedback from users about this. Have you had any particularly good or bad experiences with new windows (and I don’t mean advertising popups, I know you hate those)? Are you in favor of my decision to stop opening external links in new windows?

0 People like this. Be the first!

4 Comments

  1. Lindy

    I don’t have too much of a problem with the opening new windows thing. Firefox has a preference that will open all new windows as a new tab – that way the confusion of the back button thing is non-existent. Maybe the new tabbed IE will fix this problem for you?

  2. Actually, when Firefox opens the new window as a tab, the back button still “breaks”, so the confusion still exists.

    I’m not sure what you mean by, “maybe the new tabbed IE will fix this problem for you”. I don’t use IE, so version 7 fixes nothing (in fact, in many cases, IE7 breaks the way webpages display. I have yet to see this happen on a page that I designed, but I’ve seen it happen to other pages).

    If you mean that tabs are the solution, I disagree. As long as the back button maintains the user’s browsing history, everything is hunky-dory. As soon as that history is erased, reset, or inaccessible to the user, it has become useless and navigation is (potentially) destroyed.

    As for the new-windows-as-tabs in Firefox, it’s starting to get on my nerves. If something is supposed to open in a new window, then that’s probably where I want it. I’m a big boy, I know how to open links in tabs if that’s where I want them.

  3. Lindy

    It was stated that people get confused by the new window and no back button, then closing the window and starting over. What the tabs do is =show= you that it is a new window, instead of confusing you by pretending that it isn’t a new window. Therefore, I think that tabbed browsing will be a good middle ground until something better comes along.

    Plus, you didn’t ask what would help =you= with this problem, you were asking about what would help with the lowest common denominator. And, since most people still use IE, maybe it will help get tabbed browsing out there and somewhat help your problem.

    It was just a thought.

    Happy Thanksgiving!

  4. Okay, but if we’re talking about lowest common denominators, then most people who use the internet are using IE for Windows. When a new browser window opens in Windows, regardless of the browser, you can see it in the taskbar. There is honestly very little difference between tabs in a browser window and “tabs” in the taskbar.

    Really, though, I don’t feel as though I have a new window/popup/tabs problem. The problem I have is how to let users know that they’re leaving my site and will be required to use the back button to return (which is why I was looking into the cursor thing).

Leave a Reply