Give Them All You Can Up Front

I think one of the worst things you can do is show your latest blog post in its entirety on your home page. I don’t mind scrolling, but when I am trying to get a quick feel for your site and there are 15 long articles, I generally just close the page. So what should be on your home page then?

Below is a screen shot of what Railstips looks like for most people when they visit it. After the screen shot I will explain my thought process and why it is organized the way it is.

1. Title and Tagline

The largest text element is right at the top and that is the title “RailsTips”. Right below it, in a more typical font size is the tagline: “One man, feverishly posting everything he learns.” With just those two things, a new visitor knows that the site is tips for Rails and that there is a real person on the other end.

2. Navigation, Search and Subscribe

Enveloping the title and tagline is the navigation for the site, a search box if you haven’t found what you are looking for yet, and a link to subscribe. I intentionally bumped up the contrast of the subscribe text and placed a small standard feed icon near it for those looking to get more in the future.

I also like putting the search right near the navigation. Navigation is for the “I’d like to find this on my own” people and search is for the “I’m lazy and looking for something specific” people. I place them together and right at the top, so neither group of visitors has to work to figure out how to get to what they want.

3. Titles and Abstracts

Next up, you can see a few articles and if you scroll down, you get the most recent 20 with just a title and an abstract. Typically when I visit any blog, my first thought is “Is this worth subscribing too?” Visitors to RailsTips can figure this out quickly, as it is only the flick of a mouse wheel away.

Also, as you scroll, everything goes away. There are no sidebar distractions and the title headings and abstract text almost have a rhythm to them.

4. Info Sidebar

The other thing you will see is a quick info sidebar. I included a short about blurb that gives the visitor a quick overview of who I am and a link to read more if they are interested (yeah right!). Below that is a styled up image to let them know that I am available for hire and can help with their projects. It links to my companies website for more information.

Below those two tidbits, I link again to the main feed with a short blurb describing it and also to a links feed that people can follow if they are curious in learning more about what I am learning about.

If you visit Railstips, you will notice that I have the main feed linked up at the top of the page, in the sidebar and in the footer. If something is important, don’t feel bad duplicating it.

If there is anything that I have learned from usability studies, it is that everyone finds what they are looking for a bit differently. Giving people multiple chances to subscribe is not going to hurt anything and it will definitely help.

5. Footer

If someone makes it all the way to the bottom of the page, I am going to assume they are interested in more. That is why I have a huge footer with a variety of categorized links to popular posts and such. I have already talked about my charted archives and the size of my footer, so I will not go into more detail here.

Wrapping It Up

1. Let people know where they are.
2. Help them get what they want quickly.
3. Give them a quick overview of what has been happening.
4. Give them a quick overview of the site.
5. Give them every opportunity to explore.

Do these 5 things for visitors the first time they come in contact with your site and there is a far better chance that they will return. Bonus points for helping them in that order.