|
February 27, 2007
As noted in a previous post, the color you use for links on your web page can dramatically effect how many people click the links. In addition to the link color, the behavior of the links when you move the mouse cursor over them also has a dramatic impact on the number of clicks received. This is known as the click through rate, or conversions. If you have an Internet business, you should make every effort to insure that anyone looking at your web page knows that the links are links and that they are clickable. Sounds simple and easy, but a lot of people try to get fancy or pretty and end up shooting themselves in the foot.
Once again, I refer to Eric Graham's research. Eric provided the research in my previous post proving that links should be blue and underlined. This time, Eric's research on click through rate, or conversions, supports my long standing habit of making links reverse on hover. Hover is when the cursor is moved over a link. Move your cursor over the links on this page and you'll see what I'm talking about. I typically reverse the foreground (text) color and the background color on hover. Eric's research shows that this is a very good habit! Click here for Eric's post on his research.
Things you can do with a link to change it's look: Using inline styles or CSS, you can make a link look various ways. You can control the basic look of an unclicked, never before visited link, you can control how it looks if you've previously visited the page it's linked to, you can control how it looks if it's the active link, and, as we've been talking about, how it looks on hover, or when the cursor is over it. Normally, I just set the visited and active link states to look the same as the normal state and then reverse the colors on hover. If you want the visited state to appear different and distinct, make it a subtle difference. One of my ongoing mantras is that your web pages should not look like a pinball machine at the arcade. Ok, pinball machines show my age, but you get the point.
What about image roll-overs for links. If you've built many web sites, you've probably built menu systems using nice little image slices and had different images that you used for mouse-over, click, etc. to give it a very pretty and impressive look. You then setup JavaScript code to switch the image src in and out. You also have to preload all those little images so that they're in cache which makes it work better (smoother), but this makes the page load a little slower. Sure, they look great. But, does it result in higher profits, happier customers, etc. for your Internet business? No. You can make great looking pages with nice menus (links) using CSS. Sometimes there are good reasons to use images and image roll-overs, so when it's a must, use them sparingly and be sure to use the Alt tags so that you get some text indication if the images fail to load properly, or if the person viewing the web page is on a text only device.
So, how do you do these roll-overs using styles and/or CSS? I prefer using CSS to inline styles... see this post for a more detailed explanation. In the textboxes below, you'll see some code that shows how the links on this page are controlled. The CSS is usually put in a separate file and referenced from the web page. You can also put the CSS in the head section if you want to. Or you can mix these two methods. CSS is very flexible. If you define something twice in CSS, the last definition is used. The html code textbox below simply shows a paragraph tag and a link tag. The CSS textbox below shows the default style definitions for those tags. I'm only changing the color of the links, but to make it clearer, I've defined a few other parameters as well such as the text size and font so that you can see how you could make them different from the default paragraph if you wanted to do so.
If you'd like to learn more about building web pages and using CSS, you can purchase my online home study course An Introduction to Creating Web Pages.
I hope this helps!
Fred
About the Author
Fred Black is an experienced programmer, web site developer, online business operator, systems integrator, father, husband, musician, and songwriter. Visit his Internet Business Blog at: http://www.pqInternet.com.
|
Posted by Fred on February 27, 2007 | Printer-Friendly
TrackBack: http://www.pqInternet.com/Blog/mt-tb.cgi/23
Assigned Categories:
Copywriting
| Internet Business
| Web Site Design, HTML, CSS
Related Entries:
|
You may reprint or distribute this article as long as you leave the content and the About the Author resource box at the end intact. |
|
Comments:
-
Fred,
Excellent post. I meant to tell you before what a good job you were doing using secondary link feedback (reversing background on hover.)
Your blog has one of the best implementations of this, I've ever run across.
Keep up the good work!
Eric
|
|
Post A Comment
|
|
Insert your name and e-mail to receive a short notice each time I make a new post.
NOTE: You will receive a confirmation email. You must click the link in the email to subscribe. Please check your spam folder(s) if you don't receive the email.
| |
|
|
|
|
|
|
|
|
|
|
|
|
| |
