Links and Styles

Posted: 14 September 2007, 9:32 pm
Filed under Articles, Internet

Links are one of the most important things when it comes to websites; without them, how would any of it work? If you using the Internet, you are already familiar with links - how did you get here otherwise? However, like many parts of web design, these poor links can be incorrectly and/or badly styled, resulting in a lot of hassle for the poor soul trying to navigate your website.

Links: The General Gist

When creating a link to another page with HTML, the code <a href="#">#</a> is used, replacing the # with the URL and the text to be turned into a link. Simple enough, right?

If one does not apply any styles to their links, the default of blue and underlined can be seen. Against the default background colour of a page - white - it is very obviously a link, now that we know what the convention is.

However, with design being a bigger part of development than it was in the beginning, it is obvious why people would want to style their links to match the theme of their site, as well as not being so stark. The problem, though, lies with those who style their links so much that we cannot see them at all. They must be thinking “Well, I know where my links are - everyone should!”

Basic Link Tips

While you do not have to stick with the convention of blue and underlined (especially if such a style would not show up at all on your page), it is still necessary to take into consideration something very important: your link should stand out. Use a colour that stands out against the body text, the one stand out colour - your <strong> and <em> tags do the job perfectly fine without you making one pink and the other blue or some other combination.

Visited and Unvisited Links

There are two kinds of links in the world: the ones you have clicked on, and the ones you haven’t. Unclicked, or primary links, should stand out more vividly than the ones you have already been to. When choosing your colour palette, make sure your unvisited links are bright and clearer; your unvisited links can look duller or paler when compared to them.

Take a look at my ones here: links you haven’t clicked on are brighter and lighter than their clicked counterparts.

Choose Your Words Wisely

How many times have you seen a sentence with “to visit our partner site, click here“? Annoying, isn’t it? It breaks the flow one has when reading an article. Imagine if Wikipedia had a “click here” for a link - it would be horrible!

Instead, use your links to highlight where the person will be going. Instead of using the dreaded “click here”, let’s rephrase the sentence above. “We recommend you visit our partner site…” The moment I see that link (for I already know it’s a link, as it stands out brightly and is underlined) I know that I am going to the partner site. If I were to mention that I think that Australasia needs a Disneyland, you can tell that the link will most likely lead you to an article on the subject. I could choose to click it, or keep reading on to learn that I like pie.

Choosing Your Targets

Actually, don’t. You don’t have to be afraid that if you don’t assign target="blank" to your links I will leave you forever. If I like your site, I will come back, even if your link takes me away.

If I want to open a new tab, I will do that all on my own. And if I forget to, and want to come back? That’s what the back button is for. I’m sure people other than me know how to use it. The same goes for history. Don’t make us deal with more windows/tabs than we already have.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google

2 Comments »

  1. Rachael. 14 September 2007, 11:13 pm

    It’s & gt ; not & r q ;

    Other than that… I’ll be linking to this article!

  2. Catherine. 15 September 2007, 11:27 am

    I noticed that the moment I disconnected, but it was too late as sister had taken over the connection, so I just planned to leave it until the morning when I was actually conscious (unlike when I wrote this…).

    And thanks for the link.

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google