And offer your criticisms! Be frank. Be brutal. But please be constructive
This was my first built-from-scratch Wordpress project and I had to learn a lot as I went, using software mostly foreign to me (Adobe CS5). I especially had trouble making a custom Wordpress theme based on the default, and I’m not sure if I messed anything major up in the process.
It’s a website for a student group I work for, a live-in demonstration home for “sustainable living”. It’s essentially a museum run by college students for the whole community, so I wanted to strike a balance between professional and friendly/casual – to at once not look amateurish, but also not “corporate”. Did it work? Is there too much text? Too little? Does the site, at first glance, draw you in at all or does it just bore you from the get-go? Etc.
Please feel free to offer any comments, insults, suggestions, changes, whatever. Thank you!
I like the look of it; good balance of the elements you mentioned – I’m no designer though, web or otherwise. I will point out, though, that your “What is appropriate technology” link doesn’t appear to go anywhere. Is it a relative link?
Find us on Facebook and Volunteer Email List both link to offsite on the same page, instead of opening a new page. I prefer a new page while keeping the original page open, but YMMV.
It looks like a nice balance. I haven’t read in-depth, just skimmed,
I’m not a big fan of the font used for the “campus center for appropriate technology” wording up top. It’s distracting. My first thought was “That’s a weird font!” instead of “What is “appropriate technology?””
I actually prefer it the way you like it too, but I recently read some things about “not breaking the back button” that made me reconsider. Anyone who knows how to use separate browser windows/tabs ought to know how to open links in new ones themselves, and for the not-very-internet-savvy people, there’s a possibility that it may confusing… (thinking of folks like my dad here, who doesn’t know the difference between a “window” and “a google” and “an internet”).
I might open it in a new window with a little cursor hint pointing that out.
It’s both. It’s informational, it’s a blog, and it’s also meant to be community-based – input and feedback are important to us. Any idea how we could do that without the comments and without requiring a lengthy signup process?
Interesting… what about it is distracting (if you know)? Would it help if I faded it a bit so it’s not so glaring black, or does the entire font need to change?
I’m not a designer of anything, and I won’t speak for It’s Not Rocket Surgery, but I find the font difficult to read. For example, the “f” dropping below the line of type rather than rising above it makes me look at it more than once, somehow.
No clickable links (except for the first one) on what appears to be your nav bar. Some of these items seem to be duplicated in your Quick Links list. I find this a bit confusing. What’s the distinction?
I wasn’t bored, but I wasn’t wowed, either. Here go my crits:
I’m not a fan of fixed-width pages rather than ones that flow. Also not a fan of graphical backgrounds - they’re just kBs I’m downloading without adding any info.
The navigation’s generally very good, no mystery meat. Maybe a note when thinks link offsite? Some people (like me) run redirect blockers or the like, as a matter of course. Easy to turn off, but a warning to do it is handy.
Too many different fonts (not in the header, in the page)- I’m in favour of sticking with just one for the body text and (if you feel you must) a different one for the headings and links. You’re using 3. Cut at least one, preferably two.
I quite like the font used in the logo as a font, but I agree with others that it doesn’t work here - it doesn’t suit the subject matter, it’s too arty - kind of Art Nouveau, actually.
I like the overall site palette, very cool and calm. Exception - the dark grey background for the dropdown menus. It’s jarring. Consider a colour variant of the green you’ve used- maybe a different, lighter value of it?
Personally, I’d redo the header logo image to match the footer image - add some tree branches to match those roots or … something.
Lastly, but to me, most importantly, I think a shout-out to Wordpress in the footer is always good form. I don’t think it’s *required *by the GPL, but it’s the least you can do.
Agree on the font type for the title, it can be difficult to read.
As MrDibble said, the drop-downs in black are a bit jarring and don’t flow with the rest of the site, a green or even dark brown would work better.
At the bottom of each page, you have “You may use these HTML tags and attributes: <a href=”" title="">" with more code examples. Is that intentional for anyone submitting feedback to use? It is unclear and honestly, looks like it is an error in scripting.
I also agree, tie in the logo and footer images - tree branches up top would do nicely.
Otherwise, it generally is easily navigated and I like the colour scheme.
First impression: Very smooth. As you desired, doesn’t look amateurish but also doesn’t look corporate.
You may want to create a little bit more space between “Quick Links” and “Recently at CCAT.”
Dropdown menus: You may wish to indicate which menu options have further levels (e.g., a rightward-pointing arrow on “Overview” under “About CCAT”).
Capitalization nitpicks for the front page: Should be: “Things to Do” under “Get Involved”; “Find Us on Facebook” under “Contact” and “Quick Links”; and every “Is” should be capitalized under “Quick Links.” Similar changes to be made on other pages, but I’m not going to list them all.
On the reply submission form at the bottom of the FAQ page, you may wish to add a space between “Website” and its text box. You may also wish to align the three text boxes for submitter contact info. It’s also a little ambiguous what this form is for. Is it for contacting someone at CCAT? Is it for submitting a comment that will be posted on the site? Since you allow the use of HTML markup, you probably should add a Preview button.
Please, please, please don’t take control of your users’ browsers like this. If someone wants the new link to open in a new window or tab, they can take that action themselves. If you hard-code it in, someone who *wants *it to open in the same page has no way to make that happen. If you feel that you *must *force the external links to open in a new window, please mark the link in some way to indicate this will happen (e.g., the box-with-an-arrow icon).
I only see that under the “Leave a Reply” submission forms (e.g., it isn’t on the front page), so I’d say it pretty clearly refers to the HTML someone using that form may use.
I tried a bunch of different fonts, but it was hard to find something that would look right spaced out over that distance (kerning? tracking?).
How does the new font look?
I struggled with this a bit because some users were confused about top-level clicks contrasted with the actual items in the menus. (How is “About Us” different from “Overview”, for example?)
I modified the whole menu system a bit and I hope it’s more logical now. All the top-level headings are unclickable and just there for organization – this is represented by the fact that their cursor isn’t a hand – and the names are different so there are no overlapping entries.
The alternative would be to make redundant links that span different levels. For example, “Home & Events” and “Home & Events -> News” would both be clickable and would both go to the same page. Do you think that would be better?
They are intentionally duplicated. The quick links are just (what I think) the most common destinations would be for most of our visitors. It’s kinda like a mini-sitemap.
I went ahead and renamed it “Popular Links”. Or can you think of a less ambiguous way to do this?
I struggled with this a lot, too, because I generally prefer clean, elegant pages… but TBH I don’t know how to make it look pretty and still sleek. That said, once the school year starts again, I hope to work with an actual graphic artist and maybe re-design a whole new theme that’ll be lighter and sexier.
That said, if you’re a designer and you can think of specific things I can do to make it prettier and lighter, I’m all ears
Done. See the Projects page for an example. (I left the indicator out of the footer section because hopefully the externality of those links are more obvious)
I assume you’re talking about the different font used in the navbar? I absolutely agree, but again, perhaps this come down to my inexperience with design, but I could not find a way to get either the header or the body font to look good at the font size required for navbar readability. They just look… strange… blown up.
If you can think of a better way, please let me know.
The greens I tried against this background ended up looking more slimey than anything. I tried a shade of brown instead. Thoughts?
Hmm. Interesting. The current background is actually a cob wall that’s like the ones we have on site, but I have to make that more obvious somehow… and I like the tree idea. I’ll have to think about how to implement it
Thank you for the reminder! I can’t believe I left that out… I use Wordpress so often it’s easy to take it for granted and forget about all the developer hours that went into it. I feel like an asshole
But it’s there now.
You might also be pleased to hear that the entire site is now CC-licensed.
Both fixed, hopefully.
I thought the same thing. It’s gone now.
Our audience generally isn’t tech-savvy enough to care about HTML in their comments, I believe. And if they are, the functionality is still there if they choose to try it.
Again, I really like this idea. I’ll have to think about how to do it
Thanks!
What specifically happens? On my Android phone, it works like I’d expect it – click to open menus, click again to go to pages. The only thing that seems to be missing are the hover effects, but there’s not a whole lot I can do about that.
That said, I also implemented an alternate interface for mobile browsers. Reload the page on your phone… is the alternate one any better?
Thank you! All of these changes have been implemented, with the possible exception of missed capitalizations here and there. I’ll watch for them as I update the pages.
I’m not sure I can do this without either breaking Wordpress update functionality or else further extending the theme/making a plugin, both are which are somewhat out of my capabilities right now… but I’ll look into it. Seems like the comments functionality is out of place, so I may just disable it altogether and provide a separate forum for feedback/questions.
Although I prefer the auto-open functionality myself, this is the advice I keep hearing as well.
Because our target audience is the general population who may or may not be tech-savvy, I will keep it the way it current is in the hopes that anyone who wants to use new tabs will know to middle-click.
Thank you all so much for the feedback! Keep it comin’
I fixed it, I hope. The front page at least now passes XHTML Transitional validation and automated accessibility verification at cynthiasays.com. If you know of a better accessibility validator, let me know.
ETA: The ironic thing is that not even the Humboldt.edu front page passes W3C validation, and the Accessible Technology Initiative subsite fails WCAG validation. Go figure.
[rant]
Wow. I just spent four hours cleaning up the perfectly-validated code and CSS so it’d work with IE7 and old Webkit browsers (Safari 3 and below) Thank you, Adobe Browserlab!
“Web standards” my arse… this is just as hard as I remember it from the 90s… except now there isn’t just IE and Netscape; there’s IE, different versions of Gecko, different versions of Webkit, Opera, iPhone, Android, and who knows what else.
Fixed now, thanks!
