Best Web Site Design Tips & Tricks

Make Links Blue, Underlined Or Both

Your visitors expect links in editorial copy to be colored blue and generally underlined as well. Why? Because that’s the way links are defined on the web. If you use a different color then at least the underline is a clue indicating a link. In the same way, if you remove the underline but keep the blue link, the color is the clue that this is a link.

• For a fuller explanation on links, see the CSS2 Specification, sections The link pseudo-classes: :link and :visited and The dynamic pseudo-classes: :hover, :active, and :focus.

So, to be absolutely clear, it’s best to use both blue and underlined, but using at least one or the other is acceptable.

• Rule: Make Links Blue, Underlined Or Both.

Change The Color Of Visited Links

Ever been lost on a website because the website uses the same link color for visited and new destinations? To reduce navigational confusion, select different colors for the three link attributes, link, hover, visited.

The purpose of links is to help users understand where they’ve been, their current location, and where they can go (past, present, and future). The three are directly interrelated, knowing your past and present locations makes it easier to decide where to go next.

• On the web, links are a key factor in the visitors navigation process.

Over 80% of websites use different colors for visited and unvisited links, making this design approach a strong convention that people have come to expect. Weak short-term memory is an inherent shortcoming of all humans, but this definitely impacts some people more than others, particularly many older visitors.

• Rule: Change The Color Of Visited Links.

Change the Hover Link Color

The aim of your pages is to impart knowledge by passing information to the reader as quickly as possible. So by providing a quick, visual indication that the readers mouse pointer is hovering over a link is a fantastic aid. It saves them having to find their mouse pointer and actively and precisely align the pointer to the link in question. So provide a simple, clean hover link color by changing either the text color, background color or both.

• Rule: Change The Hover Link Color.

Recommended Link, Hover, Visited And Active Link Colors

Standardisation is the key to success in many instances, that’s why companies such as Microsoft fight so hard to become the leaders in their market sector. Why? Well, why do so many users like Microsoft Windows Products? Why do browsers emulate each other? Why do …, you get the idea.

Standardisation lets the user feel comfortable, they (we) feel in command of the situation. If you’re old enough you may remember the days when every application had a different command structure and behaved totally differently to every other application. It was a major undertaking to learn any new product.

Use the following standard link attributes:

• Unvisited link color = Blue.
• Hover (mouseover) link color/effect = Red text, pastel background.
• Active link color = Red.
• Visited link color = Purple.

Standardisation lets users get on with their task without having to learn new skills, so provide as much standardisation as you can on your web pages and in your designes, particularly with regards links.

• Rule: Use The Recommended, Standard Link Colors.

Use Descriptive Linking

Always proved descriptive, unambiguous descriptions in your links, preferably in the form of a phrase and not just a word or icon. Don’t say things like, “to whatever click here“. It’s much better to be precise, i.e., for further information on how to make money our make money quick page is just what you need.”

Readers prefer to scan web pages, they don’t read every word, so make it quick and easy for your visitors to both see and assimilate your links.

• Rule: Use Descriptive Linking.

Don’t Open Internal Links In A New Window

When your visitors click on an internal link they expect to be taken to the new page in the current window of their browser, they do not expect their browser to open a new window which they then have to navigate to. Visitors also expect to be able to use the back button to return to their previous page, this is not something they can do from a new window.

Opening new windows for external links to other sites is fine, but links within a site should always open in the same window.

• Rule: Don’t Open Internal Links In A New Window.