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 blog
pages required a ton of scrolling. And spending too much time
on computers, my eyes aren't the same as they were in my
youth. So, the experience wasn't as pleasant as it could be.

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

The Basic Solution:

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

So, that's what we built. It's a simple, graphical
navigation bar that uses anchor tags to allow
readers to jump easily from post to post. Frankly,
I am confused why I have never seen it used on a
blog before. I suspect that someone must
have used it somewhere at some point. If someone
has, please add a comment below!

It's primary use will be to simply start at the top
of the page and clickety click your way from
post to post until you've had your fill. While not
perfect yet, the reader should have to move
their cursor only slightly each page. Lazy?
Damn straight.

Additional Functionality:

We added some additional functionality along
the way due to new ideas surfacing and suggestions
from the team. They aren't rocket-science
but are certainly helpful for the readers and
for increasing traffic and pageviews.

a) Jump to Top, Bottom of Page Buttons. These allow
you to easily navigate around the page from
any point.

b) Add to de.licio.us. This allows you to easily
save 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 want
to encourage this, and this should help make it
easier for our less tech-savvy audience.

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


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


Who designed and built it?
Graham Hill, founder of TreeHugger designed it with
input 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 hit
a few stumbling blocks that some of you
techie readers might be able to help us with.

1) Keeping spacing perfect so that you never have to
move your cursor when moving to the second and
subsequent pages. The problem is created by MT Pagination and
how it inherits the coding from the previous page, instead of having
it'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 the
first element, then the posts that follow are disrupted.

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

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

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

4) Interface Design. Would love to hear what you
like and what you don't. And, even more importantly,
how you would suggest improving it. Please comment below
or 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 you
shift your life in a greener direction.

Graham Hill (graham at treehugger dot com)