Thoughts on Hyperlink Styling?

HTML & CSS
1

Right now I have a Section “landing page” with tons of Subsection and Article hyperlinks, and it just looks like it could be better, but I’m not sure where to begin with improving how my Hyperlinks are styled?! :-/

And I read an article in Smashing Magazine on this topic, but it just didn’t seem to help me “connect the dots”…

I’m not sure where to begin, but here are some questions for starters…

Questions:

1.) Is Color or an Underline more important to indicate a hyperlink?

2.) Must a Hyperlink be underlined?

3.) Is Blue “dead” as far as a Hyperlink Color?

4.) Can a hyperlink be Black/Dark Grey with an Underline and effectively serve as a Hyperlink? (e.g. Economy )

5.) Is it necessary to use all of these “pseudo-classes”…


    a:link { }
    a:visited { }
    a:hover { }
    a:focus { }
    a:active { }

6.) Must you use the exact same Hyperlink Styling across all pages, or can you have maybe TWO different Hyperlink Styles (e.g. Style #1 for large bodies of Article text, Style #2 for pages which are mostly Hyperlinked Directories)?

7.) In general, what things should I NOT do when it comes to Hyperlinks?

8.) In general, what things SHOULD I do when it comes to Hyperlinks?

Sincerely,

Debbie

2

Most people expect a shade of blue/purple with an underline in a body of text, so that’s what I typically present (menus and navigation tend to vary, though).

3

  1. By default, links are colored blue and underlined. I would think that color is more important than underline because non-blue text can be underlined for emphasis without being a link. However, both defaults together strongly signal “link”.

  2. No, but it is the default behavior; therefore, expected.

  3. No, quite the contrary, it is very much alive.

  4. Yes, but it would not be “intuitive”… users have not been conditioned since day one to expect that.

  5. No, but those that are used, should appear in that order. (The rules are more specific, but your question was general.)

  6. Users like predictability… consistency. What do you think? If navigation becomes guesswork, would you stick around and explore? Might you overlook something becaue the anchor style is different?

7,8. Use familiar, predictable styles consistently. Provide visual feedback to the user on :hover, if possible (doing so reinforces link recognition). If your site is responsive, be aware that some mobile devices do not respond to :hover.

9(?). As @Force_Flow said, menus and nav are more creatively styled, but they are also obviously menus.

4

  1. I think underlining is easier to read than a different color, but it’s probably less effective. It’s difficult for me to read text that has links underlined, bold and in a different color. My eye jumps ahead to read them first. Subtle style differences can be just as good.

  2. I like to have the confirmation of a hover effect, the others are not so important.

  3. Won’t it just confuse your readers to have two different styles of hyperlinks? Even if one is for “articles” and another for “lists”.

  4. For me, coming across an underlined word that is NOT A LINK can be very frustrating.

Maybe you could consider underlining in a different color. Although there are differing schools of though on this too. :scratch:

5

Instead of talking in generalities, below is a screenshot of a web page that I am struggling with…

(To the right of this screen-shot in the right margin are additional boxes with blue hyperlinks.)

Here are some concerns that I have about this particular page…

1.) Maybe the blue links stand out to much and should be less dominant?

2.) Ironically, the article on Smashing’s website says, “Links should be dominant and jump out at you!!”

If you have five links on a page full of text (e.g. News Article) then I agree. But on the page I am showing above, I think too much boldness works against you.

For example, I would consider red links on one of my Article pages, but to have 30+ red links on the page above would be insane?! :eek:

3.) I made each of the SubSection Names (e.g. Economy, Markets) hyperlinks to allow people an easy way to see all Articles for a given SubSection.

But I don’t want to make those blue underlined links as well for fear of overkill?!

4.) In the lower right-hand corner of each “SubSection Box”, I have a link which takes people to the given SubSection page (e.g. “==> View more Economy articles”)

I’m not sure if I should even have that there, and if I do, is having it as the standard blue, underlined too much?

In summary, I feel like this page is over-dosing on BLUE… :-/

Sincerely,

Debbie

6