A New Blog Navigation System: The TreeHugger PostHugger
by TreeHugger on 12.22.05
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)
Thirsty for more? Check out these related articles:
- 2008 AR Awards Announced
- Reading this Article Will Green Your Brain and Other Tips
- Long Overdue: Eco-labelling for Electronics
- Save $1,400 a Year By Drinking Tap Water
It rocks! You people rock! I love you!
Great idea, and good execution.
However, you should keep the same order (up, then down) for _both_ sets of arrows. On any bar but the first the order is:
* down (1 post)
* up (1 post)
* up (top)
* down (bottom)
Which is kind of odd. I love the idea though. It's _great_ that I can just leave my mouse alone, and click to read the next post.
This is an interesting concept. However, as someone who tries to avoid mouse usage as much as possible due to computer-related RSI, I greatly prefer the use of keyboard shortcuts.
Check out what Bloglines has done on this front (www.bloglines.com) -- they use a single keypress to move from one blog to the next, and a different single keypress to move from post to post within a given blog. It's quite nice.
Stuart --
Fantastic suggestion. I will defintely be working that in!
Works for me in Safari.
But, please consider removing the mouse-over instruction text for the down arrow, as it blocks the title of the posts as I am jumping down.
Also the language "next (older)" and "previous (newer)" always confuses me. Previous means older to me. I would suggest just using: Newer, Older. Or if you don't like the word "older", how about "Newer" and "Next"
And for consistancy, shouldn't ">>" always mean older? Your end of page bar says "
I would also much prefer if the comments could be right beneath the posts. That would reduce mouse clicks and scrolling too. Your related posts, could be below the comments.
I love your site.
Too confusing.
This is great, but consider this.
When the web was young, design layout catered to the left of the page because of screen resolution, overflow, associations with print media, etc. This still makes sense for the content being viewed, but interactive content is actually more easily used on the right of the screen. If you are right-handed and like me, the right side of the screen is the default position for your cursor, and it ends up there when your hand is idle for a second or two. For this reason, it is much easier and faster to use navigation links on the right side of the page rather than the left.
Consider moving the up and down arrows to the right of the toolbar. Otherwise, fantastic.
I really like your new navigation system. It makes navigation really simple. I think that you have set a precedent in blog navigation
The only thing that bothers me is that if you hold the cursor in the same place and keep on clicking on the next entry the "click to jump to next entry" title pops up over the headline. I know that this is a function of the title option and the position cannot be changed. Perhaps you could leave the title blank and come up with a different tooltip scheme like a pure css tooltip popup.
It might be worthwhile to add a scrolling category menu to the navbar. Although I use RSS to read blogs that I want to check on a regular basis, I usually start with categories when I'm looking at a new blog.
You're doing a great work here. I enjoyed visiting here very much. Thanks! right Mistery will Create Corner without any questions: http://www.theonion.com/content/index , Bad Plane becomes Green Corner in final White is feature of Standard TV , when Chips Create Pair Forecast to Roll Slot you should be very Faithful