Entran­cing the ‘new’ for this blog cat­egory of web design, I want to intro­duce you use­ful sites, tools, plu­gins and everything with a price of 0.00. Maybe some of the fol­low­ing hints will actu­ally improve your blog. Who knows?

To face the truth there are two main ways of how your vis­itor, depend­ing on mostly luck your reader, can react on your homepage: 1. omg and 2. wtf. Ok, there are spe­cial cases, like omg wtf or wtf omg. And only you can try to influ­ence it.

I thought it would increase my read­er­ship, so the sub­ject will be sep­ar­ated in many parts, and this is the first one. So. Let’s begin. UI means user-interface, some­thing like the “start”-button in your OS. There are basic­ally 4 things you need to offer to your read­ers in the web­site inter­face: a back-to-top link, a search form, a back-to-homepage link, and a RSS but­ton, but it’s more for you.

Back-to-top link

It is more import­ant than you believe! Espe­cially when you have many posts or com­ments on a page, and the user scroll thru them till end, he definetly doesn’t want to scroll back again. The simple back-to-top link does it for him. And with little help of jQuery it also can look very gor­geous (click on the back-to-top link at the bot­tom for an example).

To make a simple back-to-top link, you must place at the top of your page code, some­where after the body-tag, the fol­low­ing empty anchor tag:
[cc lang=“HTML”][/cc]
At the bot­tom of your page, you simply write a text link, like “Up!” or “Back to top!” and link it to the first anchor:
[cc lang=“HTML”]Back to top![/cc]

Search form

Espe­cially on sites with much con­tent it isn’t easy to find what you look for. Search forms help. Though: the default Word­Press search engine is a waste, I recom­mend to use an embed­ded Google Search instead. Although every two requests sent to the Google server spend as much energy as a boiler. So you could also make you some tea instead. A very nice art­icle about design­ing search boxes can be found on Smash­ing Magazine, a very good resource for web designers.

Back-to-homepage link

All blogs have the “home” link, but not every­body makes it really com­fort­able. The idea: the link should be as big as the header, so you could click on the top of the page to go to the homepage. Instead someone makes the link only around the blog name: it’s a fault.

The easi­est way is the fol­low­ing:
[cc lang=“HTML”]

Blog name

[/cc]
[cc lang=“CSS”]#back-to-home-link {
dis­play: block;
width: 100%;
height: 200px;
}[/cc]
If you want to use a rollover effect or replace the text with a pic­ture, use this css:
[cc lang=“CSS”]#back-to-home-link {
dis­play: block;
width: 100%;
height: 200px;
text-indent: –9999px;
back­ground: url(the-image-or-sprite.jpg) no-repeat top left;
}

#back-to-home-link:hover {
background-position: bot­tom left;
}[/cc]

RSS but­ton

It is not nec­cesary, but I think it would bring you more feed sub­scribers, read­ers. Because, not any­one knows what RSS is, not any­one can find the small icon near the address (in Fire­fox e.g.), so the big and impress­ive “click me”-buttons work. I think.

That’s all for today, next week I will tell you which Word­Press plu­gins are a must, and hope­fully some­thing inter­est­ing, too. I end this art­icle, and hope that you at least didn’t wtf-ed me. I hope also it was help­ful. Cheers!