A New Blog Navigation System: The TreeHugger PostHugger

Exec Summary: Applying old school tech (anchor tags) to a newish publishing format (long blog pages), TreeHugger has created a faster, more enjoyable way to read blogs. Hit the homepage to test drive the navigation bar. And read on to understand how to use it, how it came about and what problems we are still facing. Would love your feedback in the comments section.

The Problem:

A few months ago, I noticed that reading long blogpages required a ton of scrolling. And spending too much timeon computers, my eyes aren't the same as they were in myyouth. So, the experience wasn't as pleasant as it could be.

Is this a big deal? No, not really. Clearly, life will goon with scrolling blogs. But, could the experience be alittle nicer? Absolutely.

The Basic Solution:

Blogs are long pages of repeating elements (posts).So, I thought, why couldn't we create a navigationbar that could accompany each post that would allowyou to jump around the page easily?

So, that's what we built. It's a simple, graphicalnavigation bar that uses anchor tags to allowreaders to jump easily from post to post. Frankly,I am confused why I have never seen it used on ablog before. I suspect that someone musthave used it somewhere at some point. If someonehas, please add a comment below!

It's primary use will be to simply start at the topof the page and clickety click your way frompost to post until you've had your fill. While notperfect yet, the reader should have to movetheir cursor only slightly each page. Lazy?Damn straight.

Additional Functionality:

We added some additional functionality alongthe way due to new ideas surfacing and suggestionsfrom the team. They aren't rocket-sciencebut are certainly helpful for the readers andfor increasing traffic and pageviews.

a) Jump to Top, Bottom of Page Buttons. These allowyou to easily navigate around the page fromany point.

b) Add to de.licio.us. This allows you to easilysave a specific post to your de.licio.us bookmarks.

c) Add to digg. This allows you to easily "digg"a tech/science post. (add to wists coming soon!)

d) Email this. Send the post to pals.

e) Make TH your homepage. We wantto encourage this, and this should help make iteasier for our less tech-savvy audience.

f) Link to older posts. When you reach the bottomof the page, you can keep clicking and be taken tothe most recent page of older posts. Here's whatit looks like:

g) An easter-egg! (of sorts). We image-mappedpart of the TreeHugger header so that if youclick just above the "T" in the TreeHugger logo,you will jump to the first post. And won't haveto reposition your cursor for a good 16 orso posts.

Who designed and built it?Graham Hill, founder of TreeHugger designed it withinput from Nick Aster, Lindsey Lake and the TreeHugger team.Nick Aster (triplepundit) and Lindsey Lake programmed it.

Ways to improve it:

It's still a work in progress and we have hita few stumbling blocks that some of youtechie readers might be able to help us with.

1) Keeping spacing perfect so that you never have tomove your cursor when moving to the second andsubsequent pages. The problem is created by MT Pagination andhow it inherits the coding from the previous page, instead of havingit's own independent coding for the first 4-5 entries. Break tags,padding and margins do not work. While we can solve the issue for thefirst element, then the posts that follow are disrupted.

One option might be to remove the header and startthe posts from the very top of the page. Other ideas?Please comment below or email graham at treehuggerdot com.

2) The second and subsequent pages top/first post'ssingle up arrow doesn't bring you anywhere. We needto have it appear there since the same code is usedfor the following posts. The unsatisfactory workaroundis that we have made it not clickable. It would be better if we could get rid of it, or if it couldlink through to the first page or at least to theabsolute top of the page. Ideas?

3) We have some ideas for version 2.0. One thingwe suspect we will have to address: advertiserclickthrough rates. We wonder if this might sufferdue to this new navigation. Some of our ideas would deal with this potential problems. Any suggestions?

4) Interface Design. Would love to hear what youlike and what you don't. And, even more importantly,how you would suggest improving it. Please comment belowor email graham at treehugger dot com.

Phewf. That was a long one...Thanks for reading.

And if there's a little eco in you somewhere,have a little read, TreeHugger can easily help youshift your life in a greener direction.

Graham Hill (graham at treehugger dot com)