With hyperlinks, as with life, what’s obvious to some isn’t so obvious to others

Tags: ,
Published on: 9/16/2013
Last modified on: 10/18/2013
by Kevin Duncan @kevinjduncan on Twitter

The first few weeks of my freshman semester in college, I would go see a movie whenever I was bored. We did not have a television and my roommate’s idea of lively conversation was him saying “yes” when I asked him: “So you’re eating tuna again. That’s 32 days in a row isn’t it?”

As you can imagine, I went to the movies quite often.

One day after my classes, I came back to the dorm to get ready for baseball practice. My roommate was sitting on the edge of his bed and staring at the wall with a goofy grin on his face. In other words, he was doing what he did every afternoon.

As I was about to leave for practice, he looks up at me and asks: “Are you going to another movie?”

My hand was reaching for the door knob as he said this, but it paused in mid air. He knew I played baseball and, at the time, I was wearing full baseball attire. I had baseball pants on. I was wearing a 3/4 length t-shirt. I had a baseball hat. I was wearing cleats. I was holding a baseball bag with a bat sticking out of it. Short of holding a sign around my neck that said, “I am on my way to baseball practice”, I’m not sure it could have been more obvious where I was going.

“Yes,” I replied. “Yes I am.”

How could one person look at another person decked out in baseball gear and think anything other than: “I bet he is going to play a sport of some kind”? The truth is what’s obvious to one individual isn’t so obvious to another. Also, some people just aren’t that bright.

This holds true in web design, too.

When you are putting a website together, it’s imperative you look at it through eyes different than your own. Designing with standards (when available) in mind, rather than your own personal preference, helps tremendously in this area.

Take hyperlinks, for example. Which of the following do you believe is a link to Christian music station K-Love?

  1. Click here.
  2. No, click me. I can grant you a thousand wishes.
  3. Don’t listen to them. They are liars. Also, I love you. Click here.

The answer is all three are hyperlinks. But, the answer could have just easily been “none.” There is no one way to do them. And, if you polled ten people asking what is the “best” way, you would likely get several answers.

Want to play it safe? Make your hyperlinks underlined. They are underlined by default, and online users have learned to associate underlines with hyperlinks. Plus, underlining is especially helpful to users on touch devices. Here is an example:

The above is very simple CSS code. You’re saying you want all hyperlinks to be red in color and underlined. But, when a user hovers over the hyperlink, you’re saying you want the link to change to black and for the underline to go away. Pretty simple, but very effective.

A possible exception is in the area of navigation. Whereas in the body of text an underline helps identify hyperlinks in a sea of non-hyperlink words, navigation links usually do not require such help. Here is a stripped-down version of the CSS code I use for the navigation here on my website:

Here we are saying all navigation links (the <nav> tag defines a set of navigation links) will not be underlined, will be bold, and will be the color gray. Once a user hovers over one of the links, we’re saying we want the color to change to black and for there to be an overline (instead of an underline) on top of the text.

Navigation links, when at the top of your screen in an area normally associated with navigation, can be styled this way without underlines and still be recognizable to the user. My navigation is (hopefully) a good example.


Is an entire post dedicated to hyperlinks overkill? Probably. Isn’t it obvious by this point what is and isn’t a good hyperlink? Maybe.

But then again, shouldn’t it be obvious someone wearing baseball cleats and holding a baseball bat isn’t going to a movie?

Note: The baseball-movie story above has appeared previously online at an old blog of mine.

Sign up for free email updates:

Feel free to share:
Share on Twitter Share on Google+ Share on Facebook Share on LinkedIn Email This