TreeHugger 2.0 Sneak Peek and Request for Comments

Well the Typekey login is broke but that's probablyy something different.

The new design is really busy. Kind of hard to tell where to do and what's what. Nice if it were centered, and that gray bar were gone.

Oh and if that 2 minute delay was gone after posting a comment.

--
editor note: We'll fix that with AJAX comments eventually, we just have so many things to work on that it has taken a while. Sorry about that.

I prefer the simpler style of the existing site. I spent a few minutes with the new look. It's not quite as intuitive. The new look gives an air of sophistication because of its complexity. But that sophistication detracts from the personal, grassroots feel the site has now.

I'm surprised that I actually like it. Usually I hate drastic changes to comfy places, but I think it's actually a lot better looking than the old style. A little smoother, and a little less aggressively vertical.

However, I have to strongly suggest a much larger font size! Most of the stuff is just way too small. That size font should only be used for "small print" that you don't want people to read :-)

Also, I'm not sure what's up with the green table near the top of the page. It's awkward. Too rectiliniar or something. It looks like some sleazy www.123superdiscounts!.com site or something...

Otherwise, it really does look nice. The rounded corners help a lot, and breaking the sections up so that it's not all vertical is a big visual boost too.

It certainly has a fresh look and the "post jumper" on the side is very clever! Until I started to scroll down, I was getting nervous the run down of posts was missing. The very top of the page is busy with all sorts of new content - I pretty much just look for the latest post.

Sorry, I don't like it. font is too small. Looks too magaziney rather than bloggy. Because the font is so small, I can't quickly tell if it is an article that I want to read or pass on. I'm a daily reader of TH and several other sites, I probably won't be reading TH as much anymore.

Ooooh, pretty!

It's looking pretty good, but I think some parts could be organized a bit differently. Some quick thoughts:

1. There's a lot of navigation going on at the top and I like how you've divided it up. BUT, I think it needs a little bit more to differentiate between sub-sections. Maybe instead of all yellow rectangles, you should go for a different color for each. Keep the green though. :)

2. The posts don't start until below the fold. The main thing I come to this site to do is to read the posts, so this means that I'll have to click or scroll down before I can even start.

3. Will each section have it's own "posts" section? If so, they should be labeled.

4. I would group "most commented" with "most commented this week".

In general, my eyes kind of go crazy hunting for the different bits of content. I think it needs some more organization and maybe some color coding and/or icons in the individual headers.

--Joel Birchler {web developer}

It looks great, congratulations!

The only thing that bugged me was the baseline of the white subheads. I think they should be pushed up a notch to allow some grey below the line of text. It'll be easier to read the drop-out (white) text.

Good job/ Can't wait

-I'm freakin' out man!

-You are freaking out, man.

i love the smaller size of the posts. the post jumper is great! it would be nice if it went up also. if you're going to have it as a feature it might as well work both ways. i think everything below the menu bar looks really nice.

what i would like most to see modified is the menu, it's color seems a little harsh, but maybe i have to get used to it. the icons in the menu are kind of blurry and complex, not that immediately distinguishable. i would make the icons simpler and recognizable.

I must commend you on striving for improvement, and there is definitely improvement in your mock-up. I like the "most commented" section and I like that pictures on the front page are now thumbnails so that they distract much less from the rest of the page.

A couple of (hopefully not merciless) suggestions: please stick to black-on-white for text. I see some grey text on white background, which can be quite hard to read. Second, please use bigger fonts (or at least let me resize them without breaking the layout). In the current version you have done well with this, although I would probably increase the line-height in the text to make it more readable. Lastly, I think the mock-up looks a bit too busy. I would suggest investing some time in an effective navigation scheme so that we are not presented with all the sections of your site (video, articles, comments, job postings, etc.) all at once. It can be very overwhelming to the eye and the brain!

Overall though, the new design looks sleek and I think with just these small modifications (although they would have a very big effect) it would be fantastic.

First impressions (and dare-i-say the most important):

WAY too busy. Eye gets over-whelmed, has nowhere to go, no information is received.

Trim it down.

It's pretty. I don't like that the text is smaller and less visible.

very sleek modern and sexy. which is the perfect image for environmentalism. i dig. i like that more posts can appear on a page, i think? it looks easy to navigate too.

Although I really like the idea of a makeover, I don't really think this is much of an improvement yet...

There's A LOT of clutter directly in front of me at the top of the page. And I work at 1600x1200 so for me it doesn't even take too long to get to the actual content. I viewed the site on 1024x768 (which I assume is your aim), and it was hard for me to focus on anything.
The menu is clearly structured, but this way it takes up half of my screen which isn't very comfortable. Also, all the "window-bars" at the top of each section create quite a visual clutter as well.

Then the scrollbar-thingy... I'm not sure what you tried to improve here, but I think they are an enormous waste of space! Now I have AND scrollbars AND your 100px wide clickbar that doesn't indicate in any way where on the page I am going. It could work when it was very subtly placed (as one sigle small button) as an overlay on the left bottom of my browser, but that's more of a hightech solution. That way it would not waste valuable space (it's on the bottom of the screen floating on top), and it would be easier to go from "page" to "page" if you really want it that way. Right now the pages could be smaller or larger than the actual content in the browser depending on the window size, tab-bars, google-bars etc.

I hope I am not being too critical here, but I think you deserve to be treated seriously with this proposal and I just try to give my opinion on what I think works and what not.

Wow, no actual content (except for Treehugger TV) is visible on the first page (full screen browser window on a 1440x900 display, so not a small display). That could hurt.

I do like the click to scroll and I've got a scrolling trackpad, so good call on that one.

Can we get disclosure triangles on some of the extra content on the sides so that we can hide some of it?

I know advertising is your source of revenue, but it's piled up all over the place. Makes it feel like a warehouse in here or something.

When it comes to design, think simplicity. I know that you could be using your server computing more efficiently as well as the electrons whizzing between your server and my browser.

I think it's a bit of a step in the right direction, but it feels like 1 1/2 steps forward and 1 step back.

Nice work, fresh and clean lay-out.
Some remarks:
- the top navigation isn't very clear for me. Too much on too little space
- Why do you make intersections on a lay-out level between the posts? It's clear that the central area of the site is for posts. So just give it one continuous view

Hello Treehugger!

I love the new layout, you've done a brilliant job on it. I can't wait until it is live.

What I like the most about Treehugger is the way the articles are written. They're not too long yet they remain informative, and they are not too difficult to understand either, which is perfect for me. Keep going strong!

Looks very nice! But will the photos in the posts be that small? On the other hand, their being smaller and the page thereby requiring less scrolling to read is a very good thing, I think:) Easier to navigate, it seems.

I love it! :-) Good luck...

Maybe it's because the tried and trusted always feels comfortable, but I am not too happy about the improvements".
The directory section looks bulky, and the general layout is somehow more messy. The square corners and wild mixture of colors - in large thanks to the different ads - makes it all a bit un-hip and unfriendly. I know it's a lot of information you have to tackle on a page like this but I think it can be done with more elegance.

I agree with Orange, the current setup is much more simplisitic which I find more appealing. The new one is a bit too graphic heavy and off-putting. Not all that bad, but just "too much" as opposed to what we now use.

Either way though, my favourite site and I'll always be a reader.

One suggestion, a couple questions and an opinion.
Maybe it's already in the interact section but a "green" Craig's list/classifieds sort of feature could be useful.
Question, did you add features without complicating the page? Is it easier to use?
From first glance it looks more complicated.
I like the addition of the video section. Love your sight. My goal now is to become a news item here one day with my as yet to be fully realized green developments.

I really don't like the new design.
1. the ad from MSN on top looks like its your banner. Please don't try and trick people into clicking on adds. 2.I think your Treehugger brand should be top left. make it bigger, and wider
3.put the green box of directories on the left column.
4.I have been scrolling down websites for 10 years, that little click thing on the right was confusing. I didn't know how much I clicked down (a whole page or just the next post.) also please don't make me turn my head sideways to read instructions.
5.This site is about the posts. please make them the thing your eyes focus on.
Include videos as posts, not a separate entity.(you can archive them separately if you like.
5.5 Look at http://www.techcrunch.com/
see how open and clean this site looks, compared to your cramped "frames" And Mike still has a lot of ads for a blog. also his network is easily found in the right hand column.
6.Cool off on the sneaky ads. charge more if you have to. look at this comparison http://www.alexa.com/data/details/traffic_details?compare_sites=kottke.org&range=6m&size=medium&y=r&url=treehugger.com
If kottke can do just one ad, you can clean the amount of ads up and not interrupt the posts as much. I don't mind the graphic ads because its as much about a brand being associate with a "green " site as it is about the "click through".
7.check out this post to help with your job board http://37signals.com/svn/archives2/jobs_boards_a_shotgun_or_a_rifle.php
8. ads in videos are good.
9.good luck

Not loving it. I agree that it is "less aggressively vertical" thanks to the wider format and that is a positive. However, it completely de-emphasizes the articles that are the reason I try to check the site every day. I always thought the large pictures were a strength. The articles have been reduced to thumbnails and small font blurbs instsead of sufficient content, and require me to click the "continue reading" to get ANY information, instead of the full text of something I find really interesting.

I like that the topics are visible at the top of the page and it's not necessary to use the drop down menu, but I absolutely hate the way the green page header looks. It just isn't professional. While treehugger's vibe is grassroots, it is still design-informed, and icons, rounded corners throughout, and the use of the wishy-washy grey everywhere all detracts from it. (The grey was actually a good thing as a background, green on black might look much more slick, and I was cool with the rounded corner only at the very top.)

It's too busy. The ads are taking over and it's harder to focus on the real content. I know that probably means more profit, but not if people don't have a pleasant experience on the site. It would be nice if you tried to keep the pictoral and animated ads to one side, preferably the right. I like them and sometimes click on them, but they are not why I visit the site. For example, at the very top, the first thing I have to see is "compare SUVs on MSN autos." SUVs? I don't want an SUV. Maybe a bike! Do you get my point? The types of ads are important, and they need to be consistent with your values.

What happened to the title of the site? The changing mottos are stuck in the corner next to an ad, and the word treehugger is secondary, in small font. You guys are TREEHUGGER.com, we love what you do, but I want you to be proud of it. This design seems to lose sight of what you are all about. Please rethink.

I agree with what many people have already said, which is that the redesign seems very busy. I do like how compact each entry is. I never read all the links below each entry in the current design, so the fact that it's just a byline below each entry in the new design makes sense to me.

I'm not sure if it's the quality of the posted images, but I found it a little difficult to read the small font on the gray background. I prefer reading against a white background if there's a lot of text. Or maybe increase the size of the font? Good luck!

Hmm, for some reason I can't sign into TypeKey on this page. Odd.

I also think it's a problem that no new content is shown immediately when you open the new site.

I feel like you're giving equal weight to comments and user participation as you do to advertisements, although the advertisements are much more noticeable.

Some of the placements make no sense to me: most recent comments is buried halfway down the page, but the most popular/most comments this week is at the top of the page? And how is that different from "most comments" on the right-hand side?

I personally find the "click to jump" feature dubious at best. On the one hand, the site is saying "look at the content! Look at the ads!" but then the click to jump feature says to me "you're going to have trouble finding the content amid the ads, so let me show you where it is!"

Generally speaking, I think the visual hierarchy is very very flat right now: I have no idea what's important or what I should be focusing on. I don't know if that's intentional, but using the text at the top of the page as an example, the treehugger logo is now approximately the same size as "front page" "get informed" "interact" and all the other menu titles. In fact, the first thing I notice on the page is the MSN ad because it's a different color. The section titles are the same size as the article titles,

Why does each column of the top menu have a "more" button? Do they all do the same thing?

I also wonder if some of the menu items on the black band are now redundant: the TV is right there, so do you need a link? Aren't all the archives now listed in the big menu? What am I subscribing to: the RSS Feed? a newsletter?

BTW, is the Front Page text telling me I'm on the front page, or is it a link to the front page? That is, will the header and footer of all pages have this Front Page text?

I'm not convinced that this new design is a good step for Treehugger to take. The site's identity is watered down, and I think there are some significant navigational and Information Architecture issues (really the same thing) to tackle.

I don't want to sound mean, but I feel like you're trying to inform me just as much as you're trying to trick me into clicking on an ad.

All this said, I think the content of Treehugger is great, the writing is great, the topics and stories covered are great, the timeliness of the articles is spot-on, and you're generally doing a great job. I just want people to easily see evidence of all that hard work.

Anything above the "Posts' section I not only do not need to see, it will keep me out of the site. I check here almost daily, found the site while surfing. Had this been the layout when I found it, I would have closed the page and not looked any further. I STRONLY prefer the current layout to the top of that page.
I do normally increase text size at this site. Also I still use dial-up, and the test page is taking far too long to load.
Please keep these things in mind.

Overall, I like the look and feel you guys are going with the new site. It looks more streamlined, a bit more sophisticated. Like others said, more like a magazine than a blog, which makes sense since you seem to move moving to expanding yourselves from blog to multimedia with Treehugger TV and what not.

I agree with others when they say that the font size for the content is too small and the size of the front page bar is too big. I also think that the green bar at the top is a little too tall in general, although the color of course is very nice :)

While I'm talking about fonts, along with seeing the main content's font size bigger, I would like to see the font color, that grey, to be a bit darker because it's almost too light, and with certain setups it could maybe be impossible to read.

If you guys also think that it's possible, and would look ok on resolutions like 800x600, it might be worth it to make the page itself a bit wider, just to balance things out a bit.

The jump bar is also a nice touch, I like that feature a lot because I tend to jump around the site as is.

All in all, I like it. Keep up the good work. It'll be interesting to see what the end product will be with everybody's suggestions.

I have to agree with Ewout, Erik and justpurenatural -- the new design is very cluttered and there's far too much going on "above the fold". The branding of the site is now LESS clear than before, and the jump column is an innovation that "makes me have to think." If it's going to be a portal page, then it should just be top stories and links to categories (look at news.bbc.co.uk, for instance) that are easy to scan, and with information hierarchy -- big important stories are bigger and higher-up on the page. To borrow from Tufte and Don Norman, the design is worse to some extent because a) you have to think more to use it and b) you have boxes next to boxes contained within boxes, and the gaps between boxes are perceived as objects by the human eye as well. If anything, you need to make the design much cleaner, more dependent on colour and size of text and whitespace for structure, and much less dependent on boxes and lines. In terms of advertising, the new design is intrusive in a bad (myspace) way. Most users prefer it when ads are confined to sidebars - eye-tracking studies and "heatmaps" show that any top-banner ads are immediately skipped over by users, so it's not really helping your advertisers any. There's a company called Eyetools Research that can help you with this.

hello,

this is robert redford and I don't appreciate you using my photo without asking me.

besides that particular issue, i agree with a lot of the previous posts.

get rid of the suv ad, make the treehugger banner more prominent, move the menu to the side, clean up the icons, make the post jumper go up, include video as posts (it shouldn't be the first thing we see, we come for the posts), change the color of the text back to black, and simplify the layout.

yeehaw!

Redesign? Is the original site broken? (I think that it is lovely and functional.)

I LOVE TH for its content and always will! Please accept my (solicited) comments as constructive criticism -- as an ardent web user (and web developer).

First impression: Visually too busy and cluttered -- especially for a site with lots of content to read. Big pet peave for me, with many sites. And nothing will chase me away from a site faster.

I prefer the somewhat cleaner design of the original. Nonetheless, the redesign has its merits.

OVERALL: Draw the reader to the content, and make it as readable as possible.

1. CON: The light page body bgcolor. The stronger color of the original site better pulls the eye toward the center, wherein lies the key content (posts).

2. PRO: The slightly different bgcolor for content (post) area. However, I think that I might try reversing: use the lightest color for content/posts bg, and a darker color for the sidebar areas. Sublty works too.

3. Don't care for the new masthead at all. (Okay, I hate it.)

A. Prefer original full-width, non-busy tree hugger logo. (Make up top-banner ad revenue in another way.) Honestly, it screams "sell out" to me. And, there is nothing worse than activism/education stumbling, falling, or jumping over the line to commercialism. [Don't get me started on college basketball!] TH is a popular site that advertisers/sponsors should be lucky to support. Charge slightly more for all other ad spots. Heck, how much do you charge for that banner ad? Bet each of us would chip in a $1.00 a month to see it go away. I'll pay the whole bill, if I can afford it. Or, at the very least, find a sponsor who will be happy and proud to have simply "Sponsored by Whole Foods" in small, no-flashing or obnoxious font above the bold TreeHugger masthead. Keep the integrity of TH with bold branding masthead. TreeHugger: say it loud, and say it proud!)

B. However, if you absolutely insist (emphasis on "really? are you sure?"), definitely position the Treehugger logo top-left and perhaps make part of the green navigation bar (if you insist on keeping that deep navbar).

4. CON: Green block Navigation bar. Even as a web developer I have to say that there is a lot to be said for those simple little drop-down form boxes (e.g., current Category drop-down). If you want to be more stylistic, drop-down dynamic menu. Stacking buttons for Categories, for example, is a complete waste of space, IMO. There are lots of categories, so why bother. I would much prefer a one line navbar with drop-down menus. Not sure why you felt the need to deviate from such a popular single-line web format. This new navbar really pushes content below fold.

5. PRO: "Most Commented" feature seems nice addition. I would definitely prefer to see the "Most Commented" and "Most Commented This Week" stacked for better organization.

6. CON: Right-hand click-scroll. Don't get this at all. Seems quite a waste of valuable space and code. You can do that with your browser scrollbar anyway.

7. PRO: More compact nature of posts. Thumbnail photos makes sense here. You can always provide larger photo on the full-page post. Nice job!

8. CON: Choice of font specs for content/posts. I too would prefer black type. The gray actually looks a bit blurry here, but could be the smoothing of font in mockup graphic. I like the gray for other items. Help differentiate from the bolder/key content.

Also, the font family selected for new site is a tightly kerned font. Something looser will help with the readability, even if you need to use the same smaller size (height) font, and you really will not lose the real estate. Compare with looser nature of current TH site. Even the very smallest font size on current site seems more readable than this new compact site. (Example: on current site, compare the fonts on the comment form section. The "(If you haven't left a comment here before..." is more readable than the "Please keep comments civil and on topic..." line below comment form box.)

9. PRO: Content Section dividers are nice visual break. I would consider something other than gray, as you use lots of gray on the site, so the differentiating affect is diminished. For coordination, consider using same color for navigation button/text as that for the corresponding section separator. You can select a subdued shade of that color for section break so that the demarkation of same does not overwhelm the balance of the page.

11. PRO: Video section. While the video viewing box is wasted real estate for me (I'm happy to have a new window for this, as seldom as I use), I realize that it might be a big seller for many others. In any case, the slight restructuring of this, with the vertical buttons alongside the viewer, is a nice change.

11. Keep up the good work!

Thanks for letting us in on the redesign. Orienting always takes time regardless of having all the information or not. Overall it took me very little time to understand the overall layout. I think the typographic hierarchy can be pushed. Currently most type is white on grey of similar weight and size. It tends to fuse with the grey and take quite a bit of effort to read and figure out where I am.

The orange bands next to the chapter/section in the green header feel too subtle. It looks like when I'm in a section the orange band will turn to red. is that correct? Why not make the entire button red or a slightly different shade of green if you want to preserve subtlety. Right now it's a little too delicate. Ultimately visually meagre.

I personally like the various sized images you have now that accompany articles but putting the images into uniform squares chunks that section well. That plus the light-lined boxes around each help delineate within the overall area.

Great job. Thanks for all the effort. Good luck.
Christina

I prefer the simplicity of the existing site. I don't tend to read sites that look too busy. Those who want short post entries can always use RSS feeds. I tend to prefer simple, visually clean sites where the content is easy to find and read. Even the ads in the middle of the postings on this existing site really bug me.

I wish I could say it is a great improvement over the current setup, but I'm not that excited about the new design.

Once you get down to the posts, the page looks pretty nice, but it's getting to the main point of the page that is the problem. The most recent posts don't even show up "above the fold" for me. I check TH about every hour or two while I'm at work. I want to be able to load the page and see if there's new content in the first couple of seconds that I'm here. All that extra fluff at the top is likely going to make my visits less frequent. Any unfruitful work checking a webpage is frustrating to me.

It's nice that you can just click on the side to move down, but that feature might get frustrating for people like me that like to use the "back" button on the browser. I had to hit the back button about 10 times to get to this page from the mockup.

But, like I said, the post area looks nice. As for the rest, I prefer the current design.

Conceptually, I like the idea of attempting to create a more diverse space for TreeHugger, but posts are the daily vibe of the space and the website design should reflect that. This new design pushes that to the background, showing a slight misunderstanding of what drives people to return.

Technologically, I don’t mind the click bar on the right, but it should be ¼ the width- it takes up way too much space from the page. I hope the video section is quick, and works as well as YouTube, otherwise it is a waste of space.

Visually, it is a disaster. It looses the crisp finish of the current site, and replaces it with heavy adds and a confusing layout. The adds at the top are not spaced far enough from the page content. I think larger buffers are needed.

Summary, it needs work. Please consider what your ‘customers’ value, and give them what they want. Don’t get carried away with new technology, or feature creep. Keep it simple, and the message won’t get lost in the noise.

Ad's are way to big, typeface of articles way too small.

I come to TH daily, scan/read each article and move on if nothing directly grabs me.

This new layout seems to make it more difficult to quickly browse the new content and move along.
Sure makes it easy to buy something from American Apparel though (sorry, not interested in that)

I do love TH... thanks for all the hard work daily.

absolutly hate it!