Making a text link is one of the easiest things to do when building a websites. It’s so easy that we tend to forget alternatives that might be better.
The best example I can think of is a series of blocks that each contain just a head, an intro and a link to an article, like the one you see here underneath.
A list of articles
The only linkable items here are the “Read more” texts at the bottom of the blocks. The source code looks like this:
-
Lorem ipsum dolor sit amet
Suspendisse potenti. Pellentesque nibh ... Read more
Nothing wrong with the code, but why don’t we replace the li with an a-tag? That way the whole block is clickable. Much easier for the sloppy clicker. Especially when you use the :hover pseudo-class to add an effect like changing background to make the clickable area even more obvious to the user.
ul.articles a {
float: left;
width: 100px;
margin: 0 0 10px 10px;
background: #ccc;
}
ul.articles a:hover {
background: #eee;
}
If you like to have some control over what Google indexes you might not want that the whole text block will be indexed as important text, but just the heading. In that case you might take a different approach. You could put the link in the head of the article block and let Javascript take care of making the whole blocks linkable. Then you’ll have to use some code like this:
-
Lorem ipsum dolor sit amet
Suspendisse potenti. Pellentesque nibh ... Read more
jQuery("ul.articles a:odd").each( function() {
var anchor = this
jQuery(this).parent("li").click( function() {
document.location.href = jQuery(anchor).attr("href")
})
jQuery(this).parent("li").mouseover( function() {
jQuery(this).addClass("alternateBackgroundColor")
})
jQuery(this).parent("li").mouseout( function() {
jQuery(this).removeClass("alternateBackgroundColor")
})
jQuery(this).parent("li").addClass("link")
})
This is just an example, but I hope that I could show you what alternatives you have when you add a link to a website.
