New Site Design & Reader Poll

January 22, 2012 By Zachary Shahan 14 Comments

In a few moments, I’m going to start work on switching CleanTechnica over to a new design (aka theme). I hope you love it. The hope & goal is that it will be more useful for you (and for new readers) and more attractive. Additionally, it has an insane number of customization options, so it allows us to more easily create the design and layout we think is ideal for CleanTechnica.

However, as I think you know, we take your thoughts and preferences into consideration a ton on this site. So, after having the theme in place for a week, I will create a poll and get your feedback on it (general feedback and, perhaps, feedback on specific options). If you’re not inclined to change, please give the theme a few days’ chance.

Look forward to hearing from you in the poll next week, and hope you love the theme!

Filed Under: CleanTechnica Tagged With: quickies, site design, themes

About Zachary Shahan

If you couldn't guess, I spend most of my time on CleanTechnica and Planetsave. I'm the director/editor of both sites and am a little obsessed with them and the topics they cover. I'm also Publishing Services Manager at Important Media, which means that I do everything I can to support other Important Media writers, editors, and directors (as well as the network as a whole) in the good work they are engaged in. You can also find my work on Scientific American, Reuters, Change.org, most of the sites in the Important Media network, & many other places. For more, or to connect, go to: zacharyshahan.com

Anonymous

At the bottom, the “>>” button to the previous page is rather small; several times I’ve hit the “Last” button by mistake. Maybe it could be changed to “Next” or “Older”?
For that matter, the “Last” button is of no use beyond showing that the first post was made in 2008. A link to an archive of posts, broken down by year and month, might be worth having.

http://cleantechnica.com/ Zachary Shahan

Thanks. Will work on these things.

The archive is generally via the categories. Don’t really see someone needing to scan through a specific month’s articles, but if you do, i can add that.

Not sure about changing the navigation on the bottom of the home page. Don’t see any way to make the numbers bigger.

Anonymous

At first glance, it feels too sparse. I use Google Chrome on a 13″ MBP. I might sound like nitpicking but I’ll try to articulate how I feel about using the new layout. This is based on the article permalink page. More details below:

1) The horizontal nav bar does’t scale well at narrower browser widths. It looks like a tag cloud that isn’t quite a tag cloud. Perhaps some design elements that give it a sense of structure and coherence among members will help.

2) There’s a lot of empty space between the top banner and the horizontal nav bar.

3) I feel that the top banner isn’t quite confident of itself by not bleeding into the top and side edges.

4) There’s a lot of empty space above and below the pictures in the topic slideshow (by now it might be evident that I’m a fan of grid layouts and bleeding graphics to the edge).

5) There’s a lot of empty space between the slideshow bar and the 3-column content area.

6) In the article column, there’s a lot of empty space between the article header and the share buttons, and between the share buttons and the article itself.

7) Justifying the article paragraphs will make it feel like a “stronger” and “more confident” column.
I would find it easier to share the article if I found the little share buttons just below the last paragraph. Also, somehow the Repost button feels like an outcast that’s rejected by the clique of little share buttons.

9) In the 2nd column, the social buttons and applets are haphazardly laid out. Google+ feels like a big bully about to pick on Feedburner. Facebook and Twitter feel like BFFs leaving Feedburner to fend for itself. Of course, these sites might have little incentive for coordinating the dimensions of their embedded applets, so this might require a bit of creative tweaking to lay them out harmoniously.

10) In the 3rd column, the top “Clean & Green Jobs” is not aligned with the tops of the other 2 columns.

11) The 3-column content area might benefit from subtle and dissimilar background coloring of the 2nd and 3rd columns to direct the eye toward the article content.

In summary, I like a clear (but subtle) indication of structure that guides the reader’s eyes and makes him feel that he’s not obliged to read everything on the page. For example, with subtle background coloring (or some other creative device) on the 2nd and 3rd columns, the reader will only have to glance at the first item and be semi-assured that the rest of the items on that column are similar (“Here are some social applets, so the rest of this column is about social applets. I don’t have to scan these, I just want to read the article.”)

This one is AWESOME:
If I reduce the browser width just enough to see the article content, the 2nd and 3rd columns disappear from sight, not causing an annoying horizontal scrollbar. I like this feature

That’s my feedback. I hope this helps

http://cleantechnica.com/ Zachary Shahan

Thanks for the detail!

1) Hmm, that’s not good. I can cut a category or two, or the search option and put it somewhere else, to see if that will help. But should probably do so while checking how it looks on such a screen. Will try to do that tomorrow.

2) Doesn’t seem to be a way to reduce that. (Without messing with code, which we can’t do at the moment.)

3) Not sure if I follow. You mean that you think it should be wider & taller?

4) You mean on the home page, right? Not the post pages? That ‘carousel’ can be customized — could put more images in it or make the images bigger. (However, at the moment, not able to on post pages, which is why it has 9 small images rather than the 4 larger images i prefer).

5) Noted. Trying to figure out a way to address that. I sort of like it (keeps the site from looking ‘too; cluttered), but I’m getting the impression most people don’t. But not sure of an easy fix at the moment.
6) You and white space are clearly not fans. We could try a diff sharing plugin, but it’s been hard to find a decent-looking one that
features buttons at the top of the page. (let me know if you know of one )

7) Hmm, no option for that by default.

Yeah, me too. Unfort, no plugins will put them above “related posts”.
I’ve just gone ahead and removed the “Greetbox” thing. Repost is a bit of
an outsider still, but looks much better. It could be placed at the top of
the post instead, but I’ll warn you that it would create more white space
Example on Planetsave:
http://planetsave.com/2012/01/20/2011-9th-hottest-year-on-record-nasa/

9) LOL, yeah, that’s a challenge.

10) Each column is actually it’s own thing. It’s not a grid; items are just
stacked one on top of another.

11) Getting them to align perfectly is impossible, but I did match up the
ad above that as well as I could with the items right next to it in the 2nd
column.

Extra) Will check into background color options for the sidebars — think
they exist, but have to snoop around.

Extra 2) Lol, Nice. Yeah, that’s a good tip! We’d really like to
create two diff site options — one that is minimalistic (including no ads)
for a small monthly fee (i.e. $1) and the normal option. but need to get
someone on board with enough technical expertise to do that for us first

Thanks a ton for the comments! Will see what I can do about the issues that
are lingering. And will have a more structure feedback poll next week to
try to get broader feedback on the design.

(And, of course, if you happen to have any expertise in this arena and want
to get in touch about working on the site, feel free. )

http://muckrack.com/dotcommodity Susan Kraemer

Hi Zak, agree with kimonist.

On my macbook pro: also far too much empty white space. You have to scroll down to see anything other than the logo, and an ad and a categories nav tab, all served with generous dollops of white cell padding.

If when I go to a site, I can’t see at least one story begin, without having to scroll down, I’ll leave the site.

This has that problem.

My macbook has 13″ screen x 8″ high, lots of people use this laptop. Means the readable space is only 6″ high. So, the non-content must get squeezed up into the top 3″ to start to see stories.

Once we are in a story, love the roomy space, love the increased width!!

http://cleantechnica.com/ Zachary Shahan

Hmm, looks mighty hard (temporarily impossible, at least) to change this. but I understand the issue. may be reason enough to go back to the previous theme.

Can you shoot me a screenshot, just so i can see it?

http://muckrack.com/dotcommodity Susan Kraemer

Hi Zach, yeah, just did

http://cleantechnica.com/ Zachary Shahan

hey, thanks! i just updated a couple things. let me know if the menu and featured posts fit on your screen now

Anonymous

There’s no indication of whether there are any comments. If I’ve already read the piece, I don’t want to have click on it again to find out if anything has been added. So I probably won’t.

http://cleantechnica.com/ Zachary Shahan

I can add that in. Will do so now.

Tom G.

Forget my below comments.

I switched browsers to Google Chrome and the page displayed differently which completely negated my original comments. Will use Chrome from now on.

http://cleantechnica.com/ Zachary Shahan

Hmm, thanks a lot for the comments! Any chance you could send a screenshot of what you’re seeing in FF? I see the same in FF & Chrome.
http://cleantechnica.com/ Zachary Shahan

Btw,definitely going to try to work on load time.

& fixing #3.

Tom G.

O.K. so here goes on the design. It’s 9:17 a.m. on Sunday [Mountain Time] and I am using Firefox version 9.0.1 as my browser on a 3.2 megabit DSL connection.

1. If this is the new layout it is taking MUCH longer to load than the old design. I would estimate it took about 8 seconds to completely load.

I recommend doing anything you can to improve loading times.

2. The first thing I notices were the headlines with pictures/links on each of the stories. I found myself reading below the pictures FIRST and missed words like Army, Subaru, Energy and Time.

I recommend placing all of the TEXT below the picture/links OR placing each story title in it’s own grid text box [see preferred layout below].

3. No matter how I adjusted the zoom level of the page the “Tweet and Facebook Like” box covered about 1/2 of the title and picture of the first story.

I recommend the Tweet and Facebook Like” box be in a location with more opens space around it.

Summary:
If I had a choice; I would PREFER a horizontal listing of the stories instead of the vertical listing shown. That way the full title would most likely fit on a single line behind the picture/link.

As far as content is concerned, that is always EXCELLENT. I look forward to the interesting stories and blog postings every day.

Thank you again for all your efforts.
Tom G.