Not a member? Why not join us or log in? (No more hassle filling in comments, less obtrusive ads and asides.)

Links that make you blink twice!

Posted by Gavin on September 11th, 2005.

Gavin has posted 2 articles.

RSS Feed for fadtastic.net RSS Feed for Gavin

Full Profile →

Out of all the elements that make up a site I’d have to say that I spend a far greater deal of time deciphering how to style my links, than any other element I use. I find it quite important to the overall impression of a site, links being the first main form of interaction a user has with your creation. They can range from links within the main navigation of your site, to your site’s actual content.

Today I’m going to look at a few examples that will hopefully inspire you a little and also differentiate between what’s safe to use, and what could strand your readers oblivious. For this particular topic I’m only going to talk about links most often used in the actual content of a site.

The default styling for links is for them to be coloured blue and underlined which I didn’t really need to tell you, but I thought I’d point out the obvious first. This is probably as bout as safe as you can get. Having the combination of a colour and some form of emphasis like an underline, ensures that they give off a “click-able” attitude.

But what about styles that render our readers oblivious to any links on a page? Well I’ve comprised a few examples of what I’ve seen before, that my mum wouldn’t think twice about clicking, or me for that matter!

But creativity is endless, as long as you think about the user and the way one might perceive it. The examples I’ve shown only touch the surface of what’s possible, and they don’t user any hover states. However with a good combination of conservative design and originality it’s still possible to create a unique and attractive style for links without alienating the reader.

So what are your views? Already seen some good ways of styling links? Then post your comments and let us know about it.

( 14 so far )

Comments RSS Feed

I guess we’d better rethink the fadtastic content links then?!

I like the use of a bg highlight - this has become more popular recently. It’s only downfall is that it often gets me confused between a link and an abbr or acronym tag styling. I have to hover over it before I can tell.

Bold coupled with another colour is a good effect in my opinion. Underline is probably one stage further - becoming the easiest style to decipher as a link. The only problem with using border-bottom that’s dotted instead of the default underline is that a certain amount accessibility is lost due to the underline being harder to see.

I do like the 3d ones, but I feel they’re more at home in a menu.

The most usable links are the default blue underline ones as they’re pretty universal. But they don’t really get people drooling.

As a designer I’m torn between usability, accessibility and looking good. I’d always go for the first two, but with a little bit of a trade off for visual appeal.

aspiramedia
September 11th, 2005
#

Ok, I’m going to post this here.

Although it’s not entirely related to the subject at hand, I’ve been searching for the past twenty minutes for a contact or even an e-mail address of one of the admins of this site, to no avail! So I’ll post here.

Maybe you could comment on the ‘fad’ of giving links a background color on hover? Some examples might be http://9rules.com/whitespace/ or http://www.mezzoblue.com and http://www.flickr.com (the links on the two latter sites are almost identical, also).

Just a thought.

–

I used to have the default blue links on my site, with the underline vanishing on hover, for a retro effect. With my redesign, however, I’ve chosen a lighter blue with a grey bottom border (a.k.a. Simplebits).

3D-looking links annoy me slightly, because it gives the impression that they’re supposed to be a block element, rather than something inline with text. Although, it depends on the environment, I suppose (of the rest of the webpage, that is).

tekp
October 28th, 2005
#

tekp,

Thanks for your thoughts on links.

The admin address is currently andy(at)aspiramedia(dot)com.

Andrew Faulkner
October 30th, 2005
#

this is an old article, but I figured I’d comment. I use the shadow technique on my links, normal state is an inner shadow, but on hover it becomes and outer shadow towards the bottom right

Zeerus
January 19th, 2006
#

Nice!

Odysseas
July 10th, 2007
#

Nice!

Alexis
July 10th, 2007
#

vida guerra wallpaper

puxhotce
September 7th, 2008
#

hentai rape porn I caught up. Mama and fell asleep. After.

hentai
October 9th, 2008
#

Vicky was matching me perfectly. Shall guy rimjob i could make her had brought our drinks.

lesbian
November 1st, 2008
#

uhokebuzizet
November 7th, 2008
#

blilynd
December 1st, 2008
#

edwyzh
December 15th, 2008
#

judwexohytf
December 23rd, 2008
#

Again. He reached out, becominggrumpy, lesbian catfight and me like a skinand she.

videos
January 1st, 2009
#

↑ Jump up to the comment form

The above post has obviously kept you amused. Why not discover similar material:

The posts CSS3: what it means, and what it doesn’t, Bug Hunt!, Navigating the Winding Roads of Hyperlink Usability, One Year On | Are ads ok yet?, 5 development resources that you may not have noticed, are related to this post.

Or why not take time out to find out about the author of the post.