Designating Offsite Links
Friday, April 23, 2004 at 6:01 pm | 
Comments off
I always like to know where a URL will take me before I click it. For this reason, I hate the URL obfuscation in the latest version(s?) of Movable Type. While browsing the internet, I usually take a quick look to the status bar before clicking a link.
Since I'm guessing the others feel the same way that I do on this, I've decided to implement a system to show users which links I post will take them offsite. Since I like easy, I went the CSS 3 way, using attribute selectors, thus, it won't work in IE. No surprises here — IE has a hard enough time with CSS 2. It also does not work in Opera, but does work in Mozilla, Netscape, and Safari. Your mileage may vary.
First, I used a contextual (decedent) selector (CSS 1) to only affect links within my #content div. This is to avoid every link in my sidebar from having the offsite graphic, when it is inherently obvious that those links will be offsite. Now we get into the CSS 3. I checked if the href attribute of the a element started with http://. If it did, I knew that it was probably an offsite link, so I went ahead and added my nifty little graphic that designates offsite links. As always, editorial line breaks designated with ».
#content a[href^="http://"] {
background: url(/images/offsite.gif) »
no-repeat center right;
padding-right: 8px;
}
So why did I say probably? Well, because I could post a link to my own site with the full URL. More likely than that, however, would be for a reader to post a link with the full URL in a comment. To account for this, I used another CSS 3 selector to check if the URL starts with http://www.ryanbrill.com or http://ryanbrill.com — if it does, we know to ignore it.
#content a[href^="http://www.ryanbrill.com"], »
a[href^="http://ryanbrill.com"] {
background: transparent;
padding-right: 0;
}
So there you have it, a quick and dirty way to designate to your users when you will be sending them offsite. I tend to open offsite links in a new tab, so I still have the original site sitting there where I left it. Now, at least on this site, you will easily be able to tell which links will send you to a distant land.
Edit: If you want this to work in IE as well, just add this bit of JavaScript to your site:
<script type="text/javascript"> //<![CDATA[ if (navigator.userAgent.toLowerCase().» indexOf('msie') != -1) { onload = function setExternal() { domain = 'ryanbrill.com'; re = new RegExp('^http://(www.)?'+domain); for (i=0; i<document.getElementById('content').» getElementsByTagName('a').length; i++) { if (!document.getElementById('content').» getElementsByTagName('a')[i].href.match(re)) { document.getElementById('content').» getElementsByTagName('a')[i].className = » 'offsite'; } } } } //]]> </script>
Obviously, change the value of the domain variable, and remove/change the getElementById('content') to suit your needs.
Comments
Yes, the attribute selectors (a[href^="http://"], for instance) are a part of CSS 3. In browsers that do not support it, it will degrade gracefully and people just won't know what they are missing. ;)
Why wouldn't you just use a class="external" on external links? It's a little extra code, but it's cross-browser compatible and semantically logical.
Am I missing something?
Garrett - I chose not to use a class simply because a) I didn't want to have to add a class to every link and because b) I knew I'd end up forgetting to add the class to every link. ;)
Edit - Almost forgot to mention c) all previous post's links will automatically be updated, as well.
Ryan wrote:
> a) I didn't want to have to add a class to every link and because
> b) I knew I'd end up forgetting to add the class to every link. ;)
I could add:
c) Users posting comments wouldn't care to add extra formating anyway
But on the other hand:
What do you have PHP for? It could easy add a little markup to all external links on any of your articles/comments ;)
I was just thinking about this very issue, and I've done some user testing on it. I too hate URL obfuscation and I'm very surprised at how much it effects my day-to-day surfing. I like to know where I'm going!
On "offsite links" I really wonder how useful it is to identify them in any way other than the usual underline. I can see some cases where this would be useful, but in user testing this (pretty much what you use here) I found that it actually gets in the way a bit as the user seems to stop and process.
One person actually said something like "what is that arrow for?" I explained and she replied, "oh, well, I can tell it's a link going away because of the text."
We talked about this, and what I came away with was that maybe the best way to help people with these kind of links is to write in such a way that the link text itself lets the user know what will happen when they click.
I honestly wonder if people really care where they go, onsite or off? I mean they know they're going somewhere else....anyway it's an interesting topic.
Keith,
Thanks for your input. I was hoping for comments like this, so I'd know whether people like it or not. Obviously, I'm not set on keeping it around if people don't like it - it's just something to try it out.
The results of your user testing are interesting. I wouldn't have thought it would be confusing to people, but then again, different is often confusing, at least in a way.
Perhaps one of these days, if I can find some willing subjects, I'll try some user testing on my site. I'm sure the results would be most interesting and eye-opening.
Excuse my CSS3 ignorance, but why wouldn't you just check for target="new" instead of HTTP?
This is really a great idea though...I love the idea of the small graphic and doing this through CSS...I was trying to think of a way to do this the other day and my brain just ended up hurting.
:-)
j
I like the concept, and the execution is nice, however, I think I must agree with Keith in saying that the best way to handle this is to wrote clearly so that users can tell where a link will take them based on the context.
For one, users will be faced with a new convention that they likely won't understadn until they have clicked on the link. Remember, users scare easily when faced with unfamiliar things.
Secondly, such a device, while it may be useful over time to regular visitors, should in no way replace good writing.
I'd also like to point out that Tim Berners-Lee wrote about the idea of links taking users to conceptually new places on the W3C site way back in '97. He pointed out that users already tend to understand that links will take them to someplace new and different, either a new section of your site, or another site, and it the context that you place a link in that is responsible for indicating what that new place is.
Jim,
Target is no longer a valid attribute (http://www.w3schools.com/tags/tag_a.asp), and Ryan doesn't have any of his links open in new windows (to my knowledge) anyways.
Sam Ingle said, "and Ryan doesn't have any of his links open in new windows (to my knowledge) anyways."
Check the "Formatting help" link underneath where you write a comment. It uses JavaScript to open a pop-up. That's the only one I know of.
And now I have a question for you Ryan, why didn't Firefox block that pop-up for me?
Call me lazy or just overly simplistic...
For offsite links, I place link text in italic instead.
"Works for me" (tm)
"And now I have a question for you Ryan, why didn't Firefox block that pop-up for me?"
I'm not 100% certain about this, but I think it's probably because you requested the popup (ie. clicked the link).
Call me crazy, but I use this technique to display a little GIF with the text "off-site" rather than any color or styling tricks that I don't think users will understand at a glance.
From http://underscorebleach.net/css/common/
---------------
/* *** Background color must match A:hover background color *** */
A[href^="http"]:hover {
background: url(/images/common/off-site_link.gif) #000 no-repeat 80% 100%;
padding-bottom: 6px;
}
A[href^="http://underscorebleach.net"]:hover, A[href^="http://www.underscorebleach.net"]:hover {
background-image: none;
padding-bottom: 0;
}
---------------
I've also extended the functionality with off-site links a bit on my site.
Any thoughts?
"I'm not 100% certain about this, but I think it's probably because you requested the popup (ie. clicked the link)."
I'm not sure that I like that. :S Until I clicked it I didn't know that it was going to open in a new window, as far as the browser knows you could be trying to trick me into opening a new window.
Of course, it would be a little bit annoying if I was half way through typing when I clicked it then lost all of my message because another page loaded.
"I've also extended the functionality with off-site links a bit on my site."
When I hovered over the net-cred links at the bottom of the page in Firefox, the image that was displayed sometimes said -sit and other times said ff-sit if the text in the link was long enough. My mouse cursor also covered up a large portion of the image.
lavalamp,
I don't think there's any way to keep the text from being cut off when the link text is too short, but I've taken your constructive criticism to heart and moved the :hover image to the top rather than bottom. This makes the text more legible since the cursor doesn't obscure it.
Thanks for the feedback. See this page to note changes.
Tom,
It could just be me, but personally I find that way a touch annoying. It could probably be partly alleviated by using a color other than black as your highlight color - something that will be less intense.
I'm still trying to decide if I even like the way that I've done it. If it's not something the people would find useful, there's really no point in having it there, as it will get in the way more than it will help.
Ryan,
I can see how you might think it's annoying, but I tend to subscribe to the school of thought that one should be overly obvious rather than subtle. I know it's web-chic these days to use the little arrow to indicate off-site link-ness, but I think a large percentage of Web users have no idea what that means. Using the text "off-site" is much clearer, IMO.
I also toned down the background-color from #000 to #333. I feel like I'm doing CSS design-by-committee with this thread. ;)
I like the idea of differentiating internal and external links... I typically open external links in a new tab or window anyway, so as to hold my place on the site I'm linking from. So a little visual cue is great for knowing where I'm going.
Your CSS3 method is sweet, but you mentioned the browser support. Garret Murray posted his own JavaScript method a while back... http://www.maniacalrage.com/archives/2003/03/externallinks/
Maybe a hybird of the two would be the way to go.
I like that idea, Sharif, but it's superfluous for apps like Opera7 and Gecko-based browsers that have nascent CSS3 support. It might be worthwhile to only insert a little "if" conditional on the HTTP_USER_AGENT string, right up front, to only step through all the links only if the user's browser is not Opera or Mozilla.
Then, in the CSS, you'd have something like:
A.external, A[href^="http://www.site.com"] {
font-weight: bold;
}
Oh, and I add that suggestion only because it *seems* like it could add a noticeable amount to the load time if there were a lot of links on the page. Perhaps I'm wrong there.
Simplicity > efficiency? Your call. (Choose Miller.)
I like the idea of adding the graphic next to the link, I only have a couple of concerns.
The first is that in 4 months, when someone comes to your site and sees that little graphic, are they going to wonder what it stands for? If I came to a site that had a little graphic next to some links but not others, I would wonder what the difference is. Without some sort of guide on your sidebar, it could be a bit confusing.
The second concern is with the use of CSS 3. I am a proponent of Mozilla and Firefox as much as the next person, but the truth be told, over 90% of web users still use IE6. While waiting for IE to conform is a great idea, according to Microsoft:
"While it is true that our implementation is not fully, 100 percent W3C-compliant, our development investments are driven by our customer requirements and not necessarily by standards," said Greg Sullivan, a lead product manager with the Windows client group.
Source: http://news.com.com/2100-1032-5088642.html
I also agree that JavaScript isn't the answer due to loading times, and I will admit also that I do not have a good replacement to CSS as well. There was a comment in the original URL obfuscation link you provided that had a simple PHP script that appeared to have some of the functionality you were looking for.
Actually, I just went through the rigamarole of writing a little javascript that applied an external/offsite-type style to non-Gecko browser. Problem was, for some reason both Opera and IE6 seemed to choke on applying a background-image to a an anchor after the page had loaded. Perhaps this is some sort of quirk?
I don't know, but then I decided that it wasn't worth the time to find out. I know it seems be a mini-trend in Web design these days to use javascript to apply css so for the greatest cross-browser compatibility and accessibility, but I hate that approach. JS is unwieldy, hard to maintain, annoying to debug, and makes pages slugging. I try to minimize my use of it.
Nice idea, Ryan. A small suggestion: instead of altering the padding and adding a background, you might instead want to use the CSS :after pseudo-element like so:
#content a[href^="http://"]:after {
content: url(/images/offsite.gif")
}
The :after pseudo-element is pretty sweet, but it's a little quirky in that the text is written after the elment, but in my experience, sometimes it overflows its parent element.
Also, is the support universal for *images* written with :after? I know that writing characters (specified in UNICODE) is safe.
By popular demand, I went ahead and whipped up some JavaScript to make this work in IE. You can see the code needed to do this in the edit above.
Now THAT'S customer service, baby!
I did see the following link about using Javascript and CSS through CSSVault today. It may be helpful for some of the problems people are running into:
Separating behavior and structure
PS: Sorry about the long link.
Edit: No problem, I'll just clean it up for you. :)
I edited your javascript a bit, Ryan. I thought the logic in your userAgent if conditional was a bit off, since we want to apply this to all non-Gecko browsers, right? Here's what I've got:
-------------
<script type="text/javascript">
// cred to http://www.ryanbrill.com/archives/designating-offsite-links
//<![CDATA[
if (navigator.userAgent.toLowerCase().indexOf('gecko') == -1) {
onload = function setExternal() {
domain = 'underscorebleach.net';
re = new RegExp('^http://(www.)?'+domain);
for (i=0; i<document.getElementById('container').getElementsByTagName('a').length; i++) {
if (!document.getElementById('container').getElementsByTagName('a')[i].href.match(re)) {
document.getElementById('container').getElementsByTagName('a')[i].className = 'offsite';
}
}
}
}
//]]>
</script>
-------------
Also, I found that I needed to use the onLoad method manually in IE. I needed to call the function directly from the BODY tag.
Also, I encountered IE and Opera choking on applying the background-image to anchors. Can anyone verify this? I could only apply text styling to "offsite"-classed links.
p.s. I really wish there were a way to use [code] of some variant of PRE in these blog comments. :/
I chose to go with the "safe" method, of only applying the JavaScript to IE. For instance, I don't know the userAgent string returned by Safari, but I don't think it has "gecko" in it. Perhaps more testing would be in order to get the "perfect" solution.
As far as preformatted text goes, I've been contemplating various ways to implement that, but none of the methods are overly appealing. I guess a <div> with an overflow of auto would be best. We'll see.
For IE why dont you use a DHTML behavior which is attached to the link element? Then you shouldnt have to wait until the full page loads.
Mind if I steal your graphic? I'm going to change up the colour... :)
Mark, help yourself to the graphic. :)
And whats with upheavals ???
Bye and THX
Errr, what?
I agree with Keith, that I find such arrows, unfortunately, disturbing and distracting. I suppose I'd react better to some styling/colours. And I'd certainly hate a page containing additionally some *text* apart from the arrow! It makes concentration on reading the actual contents v.difficult.
Secondly, I presume I will anyway consider the status-bar of my browser if pointing on any link on your page - to see where actually I'm going to be sent.
I don't mind having a small icon beside ext links. It didn't work well on my site since 90% of links are external so it just looked stupid.
But I think this technique will be most useful for putting an icon beside links to different files, such as PDF. Just match the end of the URL instead of the start. I hate accidentally opening PDF files.
now if only more browsers supported CSS3....
Dont like using javascript for this
Dafin
Comments are no longer open for this entry
April 23rd, 2004
6:32 PM | #
Blimey! Someone's being a busy bunny! Did you say that this was CSS3? What would happen with this on older browsers tho?